Menu icon Foundation
Foundation 5 & Google Webfont Loader

Hi everyone!

I am using sass version of Foundation 5 and type module is very handy. At the moment I am using a custom font, so I've just modified $header-font-family variable to use another font-face, lets say 'Roboto'.

But I aim to fight so called Flash of Unstyled Text (FOUT) problem in WebKit browsers, so I have some fallback font being displayed while 'Roboto' is being loaded.

Here's the article about it: http://24ways.org/2010/using-the-webfont-loader-to-make-browsers-behave-the-same/

How should I correctly override typography for everything what is inside of '.wf-loading' class?

WebfonttypographyFOUT

Hi everyone!

I am using sass version of Foundation 5 and type module is very handy. At the moment I am using a custom font, so I've just modified $header-font-family variable to use another font-face, lets say 'Roboto'.

But I aim to fight so called Flash of Unstyled Text (FOUT) problem in WebKit browsers, so I have some fallback font being displayed while 'Roboto' is being loaded.

Here's the article about it: http://24ways.org/2010/using-the-webfont-loader-to-make-browsers-behave-the-same/

How should I correctly override typography for everything what is inside of '.wf-loading' class?

Rafi Benkual over 5 years ago

You can include the webfonts imports in app.scss, but then you'll need to assign them with font-family to h1-h6 and the p element (also probably on the body).