0

I am trying to use Roboto for a text-based logo and have the necessary code to load the font in <head>. While the site is loading, you can briefly see the logo in an ugly default font before becoming properly formatted in the web font. The logo literally grows bigger and then smaller. Is this type of problem indicative of poor code implementation or is something else the problem?

I am happy to upload the relevant code portion if the question cannot be answered generally.

Matthew S
  • 843
  • 2
  • 12
  • 26

1 Answers1

0

One option would be to tell the browser to preload your fonts.

Here is an example:

<link rel="preload" as="font" href="/fonts/custom-font.woff2" type="font/woff2" crossorigin="anonymous">

If you’re using a CDN like Google Fonts (Roboto), be sure that the font files you’re preloading match the ones in the CSS, or you could end up downloading two versions of the same font.

Hope this helps!

E Wilson
  • 125
  • 2
  • 10
  • I decided to preload them locally. Too bad it's 4 separate files for italic, bold, and black, and regular, so speed takes a hit. Still a night and day difference compared to the stylesheet loading code that Google provides. – Matthew S Sep 07 '19 at 10:47