Search code examples
webfontsgoogle-webfonts

Google web-fonts huge during pre-load

I'm halfway through designing and developing this: http://bit.ly/18bQOKS WordPress website for a client.

I'm using REMs for the first time (using this method: http://gregrickaby.com/using-the-golden-ratio-and-rems) to handle font size and line height.

Whilst the page loads, all of the fonts appear much larger for a few seconds in Chrome. Could I prevent this issue by using the bullet proof @font-face method?

Thanks!

S

Solution

  • I found that adding the * selector solved the problem.

    html{font-size:62.5%}
*{font-size:16px;font-size:1.6rem;line-height:1.75}
body{color:#444}

    You can read more on the * selector here: http://www.paulirish.com/2012/box-sizing-border-box-ftw