Import fonts in an Angular App — THE EASY / RIGHT WAY!

One of the hot debates/discussions that I have with fellow developers is about the right and the most effective way of importing FONTS in an Angular application.

See, there are a number of blogs out there which outline the pros and cons and probably better explain what I am doing here in a much more extensive way. But I also understand that you probably don’t want to spend a shit load of time to read extensive articles on — FONTS.

So this is my attempt to provide you with my findings and probably the GO-TO steps for importing fonts.

There are two ways that we can import the fonts in our Angular application. Either we can use the CDN wherein the fonts are hosted on remote servers or we can deploy the fonts on our own servers and then import in the application.

Importing fonts using CDN

Some are in favor of importing the Google Fonts using CDN. The ease with which the CDN works is noteworthy. Not only it is lightning fast but also it decreases the bundle size of the overall application.

This method has a number of advantages over the latter as the CDN includes (most of the time) all variations of the font — Bold, Italics, Regular, Semibold, etc and that too with cross-browser compatibility.

To import the font using CDN, just insert the following piece of code in your style.scss or style.css file in your Angular project.

Font from Google Fonts
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

Advantages

1. It doesn’t cost you or the end-users much, if not negligible.
2. Negligible to none licensing issues.

Problem:

1. There are a number of issues with using the fonts hosted on CDNs like high latency issues and security loopholes.
2. When you use CDN fonts, the Angular application sends a request to get the CSS to another domain which is treated as a low priority task.