Web Font Loader

There are two different technology for web font download; FOUT and FOIT.

When you load a page, we have to download a font from google, we have to wait. During that time, first way is wait so there will be no text. There won’t be a text. Once we download a font and display a text. Second way is display the default font. We can still show the text. And then once we download the font, we change the font family to the web font we do design.

Flash of Invisible Text

1. Font starts downloading
2. Text is invisible whilst web font is requested
3. Time passes very slowly
4. Web font loads
5. Text with the webfont appears

Flash of Unstyled Text

1. Font starts downloading
2. Immediately show text with font-family fallback
3. Web font loads
4. Text with fallback font is replaced with the web font

I will use the second way: FOUT because that way is the reader doesn’t have to wait until font is downloaded.

Let’s start how to set up Web Font Loader

Step 1. Get started Google Web Font Loader

typekit/webfontloader

Step 2. Create _head.html and import Web Font Loader and a font value in the boilerplate

root: typography/html/_head.html

How to get Google font value

Google Fonts

1. Clink ‘ + ’ button

2. Select font-weights

3. Copy a font value

Step 3. Create base font in variables.scss

root: typography/scss/variables.scss