Search code examples
cssfontsfont-facewebfonts

Choosing the most ideal font format

I should use the font family Nunito [»] from the Google font library.

Due to some improvements such as site speed performance and concerns like independence, I need to run this technology locally.

<link href="https://fonts.googleapis.com/css2?family=Nunito" rel="stylesheet">

I used this tool for this: google-webfonts-helper [»]

My minimum browser support (Modern Browsers) will be IE9+. In this case, when I select that option from the tool, it gives the following @font-face block.

/* nunito-regular - latin-ext_latin_cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  src: local('Nunito Regular'), local('Nunito-Regular'),
       url('../fonts/nunito-v12-latin-ext_latin_cyrillic-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/nunito-v12-latin-ext_latin_cyrillic-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

Since the opening speed of the project was our primary goal, some questions were kept in mind.

As you can see, this code tries to load both woff and woff2 fonts. The thing that comes to my mind is that since I included woff, why should I try to include woff2?

Wouldn't it be enough to include the woff type font set for all modern browsers (IE9+)?

Finally, I learned that IOS operating system based devices use ttf type font. As a matter of fact, when I use only woff, what is my minimum IOS support?

Solution

  • woff2 is the modern "standard font" and is supported on modern browsers. Woff2 is a more compressed font, so the woff2 files are smaller than the woff files. To support modern and some older browsers, both the woff2 and woff files has to be there. The priority is to ask if the font is present on the device, if not then present Woff2, and if woff2 fails, load the woff font.

    If you look at the performance, the woff2 is the best choice. The woff is a fallback for older browsers.

    Note that not both woff2 and woff are loaded. If woff2 is supported, the browser will only load woff2. On the other hand, if woff2 is not supported, then only the woff is loaded. Presenting both is the best option.

    WOFF2 : modern browsers
WOFF  : fallback if woff2 is not supported
TTF   : Android-browser on Android 4.3 or older
EOT   : Internet Explorer 8 or older
SVG   : iOS-Safari 3.2-4.1. SVG webfonts are not supported anymore in most browsers

    Note that svg files are huge files and bad practice if you're working on performance optimization.

    So for best performance, and for very good cross browser presentation, woff2 and woff are enough. Your css looks fine, first check local, then try woff2 and then, if woff2 fails, a fallback to woff.

    RE: your comment

    To test the performance, I uploaded a Bootstrap page with Font-Awsome and Open-Sans. These webfont files are located in a subfolder on my domain. Each font has this priority:

    src: local('Open Sans Italic'),
     local('OpenSans-Italic'),
     url('../webfonts/OpenSans/OpenSans-Italic.woff2') format('woff2'),
     url('../webfonts/OpenSans/OpenSans-Italic.woff') format('woff'),
     url('../webfonts/OpenSans/OpenSans-Italic.ttf') format('truetype');

    The waterfall diagram shows that from each webfont only the woff2 is loaded. If you do not have to support the old 'Android-browser' on Android 4.3 or older then remove the TTF line from this css example.

    enter image description here