2

I have a custom font, stored as img/roboto/Roboto-Medium.ttf. I initialize it in my CSS stylesheet using:

@font-face {
  font-family: robotomedium;
  src: url("img/roboto/Roboto-Medium.ttf");
}

There is currently only one div where the font is used, and it is in display: none; until JQuery fades it in:

<div id="test" style="font-family: robotomedium; display: none;">Some text</div>

When needed, JQuery makes the div appear using:

$("#test").fadeIn();

Since the font is not present on the user's system, it needs to be downloaded from the server. I would think the client would download the font when the page loads, but it appears to wait until there is visible text. When the user sees the div appear, the font gets downloaded when it starts to be visible, and since that takes some time, the text is invisible for a second or so. How can I prevent this? I tried preloading the font, without much results.

Momo
  • 3,542
  • 4
  • 21
  • 34
  • Check out http://stackoverflow.com/questions/4383226/using-jquery-to-know-when-font-face-fonts-are-loaded – Irvin Lim Jun 11 '16 at 14:03

1 Answers1

0

Ive seen it happen a few times on some websites but mainly when A. the site is slow, so it takes the server time to feed the font depending on when the thing is being requested

and

B. the font itself is heavy.

You can maybe try putting the @font face, as high up as possible so it can start loading faster and also, try the google CDN for the roboto font.

https://www.google.com/fonts#UsePlace:use/Collection:Roboto

Technically, once a persons computer downloads the font, it should stay there in cache/memory

Also, try a "fallback" font that is similar to the roboto one so it shows while roboto is loading.

somdow
  • 6,268
  • 10
  • 40
  • 58