Home » Development » Optimizing Typekit font loading
When loading web-fonts, we often see a brief un-styled moment before the browser applies the actual font. Gladly Typekit and also Google Web Fonts provide an option around that.
Both are using WebFont Loaders to help handle those brief moments.
TypeKit Webfont Loader Example
This adds a class name to the <html> element during loading
This is removed when loading is done. This allows us to hide content until all fonts are loaded.
Webfonts Loading
This also adds classes once the webfonts have been loaded, which allows us to add some transitions to reveal the content again.
Webfonts Loaded
One last thing. You should add the webfont loader early in your content, so that it can do its magic before anything else is being loaded.
Alexander Gräf
Portfolio
Book Me
Get in touch
Live Chat
Ich bin ein Full-Stack-Entwickler. Meine Expertise umfasst:
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."