How to download self-service font files if GoogleFont is not available?

Question

I want to use a collection of fonts from the Google Fonts directory. I selected the styles and included the CSS link tag in my project template.

Alternatively, with Google Fonts, you can also download the collection, and what you get is a zip file with all font styles.

I can create the CSS equivalent of the one that Google lets me include in HTML, so I want to provide self-service font files as backup if the visitor cannot access the Google font API.

How do I configure this and prevent the download of both the Google font file and the font self-service file? If the user has access to Google Fonts, the browser should not download its own version of the font.

Answer 1

You have 3 options:

• Use 2 @font-face rule sets using different font-family names (for example, "Droid Sans" and "Droid Sans Local" ), and then using a font stack like "Droid Sans", "Droid Sans Local", Helvetica, Arial, sans-serif . However, this will load both fonts, increasing the loading time.
• Use one @font-face at-rules rule set, but use 2 src attribute sets. It can also increase loading time if the browser decides to download all the specified font files.
• Do network-level mirroring through DNS, as most CDNs do. This requires network configuration, but your CSS will not change and will be most transparent to the browser without requiring additional downloads.

Google Web Fonts already uses the third option, so I personally would not have to worry if you already use a source containing a CDN. But it can be useful if you use fonts from a less reliable source. But if you try to tweak this for your fonts, why not tweak it for all of your static resources (images, stylesheets, JS, etc.)? The most logical course of action is simply to get a free or paid CDN to place all of your static assets.

Answer 2

I would recommend just placing them yourself. This is fontsprings' bulletproof font syntax.

 @font-face { font-family: 'MyFontFamily'; src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), url('myfont-webfont.woff') format('woff'), url('myfont-webfont.ttf') format('truetype'), url('myfont-webfont.svg#svgFontName') format('svg'); } 

Having all four of these sets ensures that it works in browsers. Just make sure you have the font in all four types. Font Squirrel has great font sets.