0

I need to integrate a new font across a web app I am working on via @font-face. This font will only be put on certain content in the app that is shown by the element have a particular class. Is there any way to not load @font-faces unless a certain class is present on the page? I do not want to have to slow down the load time of every single page because some content on some pages need that web font.

chromedude
  • 4,246
  • 16
  • 65
  • 96
  • 2
    The browser should be caching the font. Load time should only be impacted with the first request. – gilly3 Apr 14 '12 at 01:53
  • 1
    Some useful info here - http://stackoverflow.com/questions/2726928/will-a-browser-download-a-font-face-even-if-it-is-not-used-in-the-page – brains911 Apr 14 '12 at 02:25
  • see the link it might help - http://stackoverflow.com/questions/107936/how-to-add-some-non-standard-font-to-a-website – w3uiguru Apr 14 '12 at 12:01

1 Answers1

0

@font-face needs to be declared prior to other styles, so the fonts can be rendered correctly. i'm pretty sure that declaring them after pageload isn't going to work, at least if you are looking for a pure css solution. i don't know of a javascript solution off the top of my head, but you could use link elements to cache them after pageload...i realize that doesn't help you if you need them on that certain page, but it's always beneficial when users are jumping from document to document across your site.

albert
  • 8,112
  • 3
  • 47
  • 63