Using A CDN for Fonts (Web Optimization Tips)
Every front-end dev wants to create the most beautiful but lightweight web interface that works across devices regardless of their processing power or internet speed. This can be achieved in many ways and one of them is reducing the number of resources that are hosted on your servers. Instead of, say, downloading and self-hosting font-awesome or Google web fonts, you can use a CDN link.
Why You Should Not Download Web Fonts
Most beginners find it easier to download and refer to a local copy of font packages (CSS) like font awesome or some premium font families that they purchased online. Also, some older websites may be using the same method to load their fonts, mostly downloaded as part of a font package from a designer’s website.
This is not ideal, as it usually means that the webserver has to make requests every time a visitor loads a website on your server. You could see a slight or significant drop in page speeds if you are using locally stored web fonts. With a majority of devices accessing the internet being low-power mobile devices, even the slightest gain in website performance could make a big difference in user experience and even affect your rankings on popular search engines that use page speeds as a ranking factor.
What Is A CDN And How Do You Use It for Fonts?
A CDN can be described as a specialized hosting service that provides an extra layer of availability for web content. Instead of loading your web resources from a single web server, a CDN will mirror it across a robust network of geographically dispersed servers for faster delivery and fewer downtimes. It’s the same setup that allows CDN providers to give website owners protection against distributed denial of service attacks.
How to Use a CDN With Fonts
There are two ways you can use a content delivery network to load any additional web fonts or web packages you might be using on your interfaces. The first one involves pointing to a CDN-hosted version of the web font you are using in your HTML while the other one involves putting your entire website behind a CDN so that the fonts plus other resources can be optimized for faster delivery.
Method 1- Using CDN-Hosted Fonts
Chances are that you are either using Google fonts or an external font package such as font awesome on your website. Both of them can be referenced in your HTML header using the specific URL provided in their respective CDN. Here are some examples of how you would link to CDN-hosted web fonts in your project:
Google Fonts ExamplePut this code in the header section of your HTML file
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Font+Name">
and then refer to the font in your CSS as you would normally do with other fonts as shown in the code snippet below.
.css-selector {
font-family: 'Font Name', serif;
}
By using the above method, you are avoiding having to download the web font that is already hosted on Google’s servers and available for free to use. Don’t worry, the font will always be available for use long after you have taken your website live. At the same time, you will benefit immensely from web caching as a result of using the google link as opposed to self-hosting the font.
Font Awesome CDN-hosted fonts example
Font Awesome is a popular web library that provides tons of free fancy fonts and icons. It’s available as a download or through a CDN. You can use Font Awesome CDN-hosted fonts as shown in the code snippet below:
<script src="https://use.fontawesome.com/526e68a831.js"></script>
Put the above at the top of your HTML page. Note that the above URL may be different from what you get. To get your Font Awesome CDN URL, head over to their website and provide your email address so they can mail a custom Font Awesome CDN address.
With the above present in your HTML header, you can proceed to use any Font Awesome element in your CSS as required.
Method 2- Website CDN
You can also choose to register your website with a content delivery network like Beluga so that the entire website including the locally hosted fonts is handled by the CDN. The website CDN will mirror all the resources that are needed to load your website and make them available to your visitors using the nearest servers.
There are many more benefits to using a CDN to deliver your websites such as security, redundancy, web caching, and scalability. Having additional packages such as Font Awesome and Google fonts loaded through a CDN is a great way to optimize your website’s performance.
Power-up your Content Delivery
30 Day Free Trial Cancel Anytime