I AM LISTENING TO
|
WAS ICH LIEBE
  • Englisch
  • Deutsch

Options to detect when a @font-face has been loaded

14. Mai 2016




Options to detect when a @font-face has been loaded

OPTION 1

Use the CSS font loading API. Not supported in all browsers yet (MDN, W3C). You can call document.fonts  to get a FontFaceSet object.

  • check(fontSpec) – returns whether all fonts in the given font list have been loaded and are available. The fontSpec uses the CSS shorthand syntax for fonts.
    Example: document.fonts.check('bold 16px Roboto'); // true or false
  • document.fonts.ready – returns a Promise indicating that font loading and layout operations are done.

OPTION 2

Use Font Face Observer – its a small @font-face loader and monitor compatible with any web font service. It will monitor when a web font is applied to the page and notify you. It does not limit you in any way in where, when, or how you load your web fonts. Unlike the Web Font Loader Font Face Observer uses scroll events to detect font loads efficiently and with minimum overhead.

GitHub

OPTION 3

Use jQuery-FontSpy.js, works by checking the change in width of a string.

GitHub

OPTION 4

Use Webfont Loader,  if loading fonts from Typekit , Fonts.com, Google, Fontdeck or custom location.

This introduces the following events:

  • loading – This event is triggered when all fonts have been requested.
  • active – This event is triggered when the fonts have rendered.
  • inactive – This event is triggered when the browser does not support linked fonts or if none of the fonts could be loaded.
  • fontloading – This event is triggered once for each font that’s loaded.
  • fontactive – This event is triggered once for each font that renders.
  • fontinactive – This event is triggered if the font can’t be loaded.

GitHub

Enjoy coding …




Abonnieren
Benachrichtige mich bei
guest
0 Comments
Inline Feedbacks
View all comments



Alexander

Ich bin ein Full-Stack-Entwickler. Meine Expertise umfasst:

  • Server-, Netzwerk- und Hosting-Umgebungen
  • Datenmodellierung / Import / Export
  • Geschäftslogik
  • API Layer / Action Layer / MVC
  • Benutzeroberflächen
  • User Experience
  • Verständnis für Kundenwünsche und Geschäftsbedürfnisse

 

Ich liebe die Entwicklung, das Design und kenne mich auch mit Serverarchitekturen aus.  Ich würde mich nie vollständig fühlen, wenn einer der Bereiche fehlen würde.

Ich habe ein breites Interessengebiet, deshalb tauche ich ständig in neue Technologien ein und erweitere mein Wissen, wo immer es nötig ist. Die Technologien entwickeln sich schnell und ich genieße es, die neuesten Technologien zu nutzen.

Abgesehen davon bin ich ein friedliebender Kerl, der versucht, Leute um sich herum zu haben, die dasselbe denken.  Ich glaube wirklich an das Prinzip: "Wenn man jemandem hilft, wird einem jemand helfen, wenn man es braucht."

Previous Next