Best way to use Google Fonts in your Angular project

Google Fonts is one of the most popular collections of fonts, that you can use in your website or web applications. Most popular of the fonts are providing free by Google Fonts like Roboto, Poppins, Open Sans, etc., this will increase website speed and performance. In this article, we going to see the best way to use Google Fonts in your Angular project. Here they are two methods to use Google Fonts in your project one is using CDN and another with CSS import.

Install the Angular project

First, you need to install the Angular CLI project. With the simple commands, you can install the new Angular project. To know more about the installation process, here you have an article.

Google Fonts in your Angular project

Once you completed the installation of an Angular project, now you need to select the font from Google Fonts which you required to use in website or web application. Now we going to use Google Font in two methods, one using CDN and another with @import in your Angular project. The following methods will help you to import in your Angular project.

Method 1 – CDN

Using Google Font CDN you can use in your project, this also one of the methods for using Google Fonts. Copy the below CDN and past into index.html file between the head section.

index.html

Method 2 – @import (Recommended)

With the @import method, you can import the Google Font which you like. This gives a high performance so that your customer will have fonts in his cache. The following code will import the font in your website or application which you selected from Google Fonts.

styles.css

Add a Google Font in your style sheet.

Once you imported in any of above these two methods, now add the font-family in your Global styles.css like the below code.

styles.css

Output:

Google-fonts-in-Angular

Conclusion:

I hope in this article, you learned the best way to use Google Fonts in your Angular project and how to use it to do all the work. If you have any doubts please ask in the comment section and If you like this article, please share it with your friends. Thanks a lot.

Was this article helpful?

Yes No
×

How can we improve it?

×

We appreciate your helpul feedback!

Your answer will be used to improve our content. The more feedback you give us, the better our pages can be.

Follow us on social media:

Facebook Pinterest

Mraj

Creative Designer & Developer specialist by the spirit and a loving blogger by thoughts.

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top

DON’T MISS ANY UPDATE

Get notified about the next update

Pin It on Pinterest