https://davidwalsh.name/font-loading * Home * Main Content DWB * Home * Tutorials * Features * Demos * Topics * The Blog * Recent Tutorials + Specify Node Versions with .nvmrc + How to Inject a Global with Web Extensions in Manifest V3 + How Plugins Enhance The WYSIWYG Editing Experience + JavaScript Event.defaultPrevented + 7 Ways to Optimize Performance for Your WordPress Site * Recent Features + 39 Shirts - Leaving Mozilla + Tips for Starting with Bitcoin and Cryptocurrencies + Interview with a Pornhub Web Developer + Welcome to My New Office + How to Create a RetroPie on Raspberry Pi - Graphical Guide * Interactive Demos + Chris Coyier's Favorite CodePen Demos IV + prefers-color-scheme: CSS Media Query + CSS Ellipsis Beginning of String + Vertically Centering with Flexbox + Creating Spacers with Flexbox * Popular Topics + HTML5 + CSS Animations + Firefox OS + jQuery + MooTools + PHP + CSS3 + WordPress + Mobile + SEO + JavaScript + Dojo Toolkit * David Walsh Blog + About David Walsh + Contact and Advertise + Developer Deals + Mozilla * * * * * * Search[ ] Popular: * JavaScript Promises * fetch API * React.js * Cache API * ES6 Features * Node.js * JavaScript * jQuery Font Loading Techniques Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS. Font Loading Techniques By David Walsh on April 6, 2015 * 8 * * * * This post is a work in progress and will be updated over time. Some techniques are browser-specific and experimental. Thank you for looking! It seems as though most websites use non-default fonts these days and who can blame them? System fonts are all pretty boring and custom fonts add a bit of flare and freshness to a site's design. The problem with using custom fonts, however, is they can really slow down your site load. Font files are large, can require separate font files for bold and italic, and can block rendering if the developer doesn't work around them. Let me show you a strategy for faster font loading! 1. Put Fonts on CDN One simple solution for improving site speed is using a CDN, and that's no different for fonts. It's important to ensure the CDN has proper CORS settings, as I discussed in Service Fonts from CDN: # Apache config Header set Access-Control-Allow-Origin "*" # nginx config if ($filename ~* ^.*?\.(eot)|(ttf)|(woff)$){ add_header Access-Control-Allow-Origin *; } You'll see AJAX / cross-domain errors in the console if the CDN's CORS settings are not properly configured. 2. Use Non-Blocking CSS Loading My Mozilla colleague Stephanie Hobson shared Loading CSS without blocking render with me, which outlines a strategy for preventing CSS loading from blocking render. It's actually genius: Essentially using media=none let's the browser download the stylesheet without blocking rendering, so when the stylesheet has loaded, setting the media to its desired setting will then render the screen as it should. Nice! Note: I've had a few issues with this technique within Firefox but I've not yet figured out the exact reasoning for it, as sometimes no issue occurs. Read Keith Clark's post for precise details and support. 3. Separate Font Selectors If a font hasn't loaded by the time it's used, the user will see (nothing, kind of) empty space until the font has loaded. This is, of course, not good if the fonts fail to load. At the very least, the user will be burdened with staring at empty space for a few seconds. What's best is keeping custom font declarations protected with a class that is added to the body after the fonts have loaded: h1 { font-family: Arial, serif; } /* basic system font */ .fontsloaded h1 { font-family: 'MySpecialFont', serif; } /* custom system font */ [DEL:By using the font declaration strategy above, a system font is loaded initially and only after the custom font is loaded will it be enabled, thus the screen wont show empty content for any period of time.:DEL] I recommend creating a Stylus/Sass/Less mixin to set the font-family settings so that the custom selector is automatically set. Scott Jehl describes that font load events are much more effective in his post Font Loading Revisited with Font Events. Please read it! 4. Storing Fonts in localStorage Did you know you can store fonts in localStorage?! Crazy, right?! Check out this post which details the process and even provides the code to do it! Speed kills on the web and the strategies provided above will supercharge your custom font loading and CSS speed. The solutions are all easy to implement, you just need to take the time! Website performance monitoring Website performance monitoring Website performance monitoring Website performance monitoring Recent Features * By David WalshJuly 1, 2013 9 Mind-Blowing Canvas Demos The element has been a revelation for the visual experts among our ranks. Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead. Here are nine unbelievable canvas demos that... * By David WalshJuly 15, 2013 9 Mind-Blowing WebGL Demos As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us. Of course we have canvas, an awesome technology, one which I highlighted 9 mind-blowing demos. Another technology available... Incredible Demos * By David WalshJanuary 28, 2019 prefers-color-scheme: CSS Media Query One device and app feature I've come to appreciate is the ability to change between light and dark modes. If you've ever done late night coding or reading, you know how amazing a dark theme can be for preventing eye strain and the headaches that result. * By David WalshMay 13, 2010 Create Twitter-Style Buttons with the Dojo Toolkit I love that JavaScript toolkits make enhancing web pages incredibly easy. Today I'll cover an effect that I've already coded with MooTools: creating a Twitter-style animated "Sign In" button. Check out this five minute tutorial so you can take your static... Discussion 1. Michal Hewelt Thanks for the apache code example. It's a small thing but helps a lot. 2. SerzN1 Thanks ! Very cool! But, it must be one more - put css with font dataUri to locastorage. + Mansi Khurana Will it improve if we put css with font dataUri to locastorage? + SerzN1 Yes. Google page speed up to 100%. All have any disadvantages. 3. Arnaud Very nice article, but I don't really get it, does the "separate font selector" allow some sort of font lazy-loading? + HP Yes, it does. Browsers (i.e. smart browsers) won't load the fonts when they are not used in a font-family property. Even when the font is used in a font-family property and the target elements do not exist, the font is not loaded. 4. Kunal I don't think media=none is a good way to download css as unstyled HTML appears on the webpage for a duration which is visible to naked eye. + JP de Vries > I don't think media=none is a good way to download css as unstyled HTML appears on the webpage for a duration which is visible to naked eye. Understood, but that is why you only use media=none on the font stylesheet (use a separate stylesheet, it's probably worth the extra request). You should style your site to be tolerable with out @fontface anyways, as some browsers like Opera Mini don't load web fonts and never will. Think of it this way. Without deferring the font it will block the rendering of entire page. If I'm a blind user on a screen reader, why are you making me wait for content until something that isn't relevant to me, and is a large file size, downloads? Name:[ ]Email:[ ]Website: [ ] Wrap your code in 
 tags, link to a
GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

[                    ] [ ] Continue this conversation via emailGet
only replies to your comment, the best of the rest, as well as a
daily recap of all comments on this post. No more than a few emails
daily, which you can reply to/unsubscribe from directly from your
inbox.[Post Comment!]Use Code Editor
  *  
  *  
  *  
  *  
  *  
  *  

(c) David Walsh 2007-2022. All code MIT license.Hosting by Media Temple
.