Member Avatar for RikTelner

I take two versions of Open Sans from Google Fonts' servers. Regular and a bold one. As soon as page loads, the font is shown nicely. The idea is something like this

a.link {
    font-weight: 400;
}

a.link.selected {
    font-weight: 800;
}

There's jQuery snippet that says that as soon as a.link is clicked, it applies .selected to them. Here's the problem. When page finishes loading and the fonts show normally, and then you click the link. The text in link flickers to default font (Times New Roman) for 100ms and then switches to bold version of Open Sans. It's probably because it doesn't have this font in cache and it takes it's time to load the bold version. I can reinstantiate this bug only if I clean cache. Refreshing page without clearing cache does not show the "bug".

Is there a way to load fonts so that when class is being applied, it does not flicker back to fall-back font?

  • 2 Contributors
  • 1 Reply
  • 359 Views
  • 10 Hours Discussion Span
  • Latest Post Latest Post by gentlemedia
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.