It looks like you're new here. If you want to get involved, click one of these buttons!
@import 'https://fonts.googleapis.com/css?family=Quantico'; html { font-family: Arial; font-family: 'Quantico', sans-serif; }
@font-face { font-family: 'Quantico_off', sans-serif; src: url('Fonts/Quantico-Regular.ttf') format('ttf'); }I'm naming it "Quantico_off" so as to properly differentiate it from the online version of the font being loaded from Google Fonts. However, when I go offline to make sure it's working properly (i.e., not loading the online version instead), it never works. It only seems to default to Arial. Is there any way to successfully do this? Thanks so much, I know I post here a lot haha.
Comments
The steps I followed:
1. Created a local folder named mystory, within that folder I created a sub-folder named Fonts
2. Downloaded the quantico.zip file and extracted the Quantico-Regular.ttf file into the new Fonts sub-folder.
3. Created a new Story Project within Twine 2, changed it's story format to SugarCube 2.7.2, and added the following CSS to the story's Story Stylesheet area. 4. Added the following markup to the story's main passage. 5. Used the Publish to File option to created a Story HTML file which I saved within the new mystory folder, I then opened that Story HTML file using Chrome.
Issue #2: You're specifying multiple values to the font-family property in a @font-face rule. Do not do that. In a @font-face rule, the font-family property is used to define the name of the font face, so you should specify only that. It's only in normal CSS rules that you may specify multiple values to font-family.
Issue #3: You've specified an invalid value to the format() hint—i.e. ttf is not defined within the specification. The proper format hint for a TrueType font is format('truetype'). Quantico is an OpenType font, however, so if you're going to specify a format hint at all, then you should probably be specific and use format('opentype')—though format('truetype') will also work, since OpenType is a superset of TrueType.
That said, I'd omit the format hint in this particular case. Format hints are mostly used by browsers to prioritize the downloading of font resources or, if the format is unsupported, not downloading them. Since you're including the font as a local file, there's no downloading to be done and thus no pressing reason to include the hint.
I'd suggest something like the following: (at-rules go at the top of your CSS)
Though, that is somewhat wasteful of network resources. It would be better to have two separate builds, one for your website and one for download. For example, the website build: And the downloadable build:
Ideally, you could sort of combine the two into one @font-face rule and get the best of both, but Google doesn't give out safe URLs to their actual font resources—just the @import URLs.