Now that we have gone over the advantage of local fonts, there are also some disadvantages to be aware of. By hosting your fonts locally, or on your CDN, you can take advantage of a single HTTP/2 connection for better parallelism and multiplexing. If you haven’t read about the advantages of HTTP/2 yet, we urge you to do so. When you host locally all the requests are from the same domain, and most likely you will not need another CSS file as it will be inside of your WordPress theme’s CSS file. You then have additional requests to to download the font files. With Google Fonts you also have one extra DNS request to lookup to grab the CSS file. If you aren’t familiar with fonts you no longer need to serve all the font formats, you only need WOFF and WOFF2 (if you are going for extra compression). You do however have more control over this with your WordPress host, or you should! Adobe Fonts, for example, adds 2 external HTTP requests and it also base64 encodes all the font formats. You never know how fast their servers are operating at the given moment. Specify a cache validator 5. Fewer Requests Can Equal Faster Load Timesĭue to the fact that web fonts have to be downloaded from the 3rd party, this could, in turn, have an impact on your site’s load speed. These are fixed at the server level, and when they are on a 3rd party server you have no control over fixing them. If you are using Google fonts or another 3rd party service you might see errors or warnings that the resources are missing a cache validator or that they require expires headers. When is down the web stops working #customfontssuck #3rdpartyjsīy using local fonts you have full control over the caching of your font files. Having fewer dependencies on your WordPress site is always better. Services such as Adobe Fonts (previously Typekit) have been known to go down, which then, in turn, makes you look bad. When you host fonts locally, you don’t have to rely on 3rd party services or their servers. This all depends on your design needs and preferences. Could Integrate Betterĭue to the wider selection of fonts, hosting them locally might allow you to choose a font that integrates better with your branding to maintain consistency throughout the site. We actually will be using a premium font in our tutorial below which you can’t get from any 3rd party service. Wider Selection of FontsĪ huge advantage of using local fonts is that you have a much wider selection of fonts! While 3rd party services such as Google Fonts and Adobe Fonts have large libraries, they no way compare to premium font shops in which you can purchase any premium web font you want and host it on your site. Whereas if you use a 3rd party such as Google Fonts or Adobe Fonts, you are simply including the fonts by linking to an external asset. Hosting fonts locally means that you actually have the font files on your own server (and or copied to your CDN which you also use for all of your other assets). Google font statsīefore we dive into the tutorial it is important to understand a few of the advantages and disadvantages between hosting local fonts and simply using a 3rd party service. We have a post about the best Google fonts, make sure you take a look: 15 Best Google Fonts by the Numbers. That is a lot! Open Sans and Roboto are their two most widely used font families, with Roboto seeing a whopping 77% growth in the past year. And if we look at the Google Fonts analytics, we can see that they have had over 17 quadrillion views. According to BuiltWith, over 45% of the top 10,000 websites are utilizing Google Fonts on their websites. Google Fonts is an open source font directory which has become widely used over the past couple years. Some examples of web fonts include Google’s Open Sans and Roboto font, as well as the popular Proxima Nova font from Adobe Fonts.
0 Comments
Leave a Reply. |