DEV Community

Discussion on: Speed Tip: Use Typefaces.js in Gatsby to Locally Host Fonts

Collapse
 
anders profile image
Anders

You can also directly reference the font files Google serves up in your base CSS, WOFF files are basically globally supported at this stage so just copy something like:

@font-face {

    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFVZ0d.woff) format('woff');
}

from fonts.googleapis.com/css?family=Op... or equivalent and you can still get the files served from Googles servers without including a wasteful extra CSS file, best of both worlds.

( You need to use Internet Explorer 11 or something older like that to get the WOFF file references, otherwise it will give you WOFF2 files which works in the modern browsers but not in IE 11: caniuse.com/#feat=woff2 )