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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Angular</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> <!-- Roboto CDN --> <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet"> </head> <body> <app-root></app-root> </body> </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
|
1 2 |
/* You can add global styles to this file, and also import other style files */ @import url('https://fonts.googleapis.com/css?family=Roboto&display=swap'); |
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
|
1 2 3 4 5 6 |
/* You can add global styles to this file, and also import other style files */ @import url('https://fonts.googleapis.com/css?family=Roboto&display=swap'); /* Font Family */ html, body { font-family: 'Roboto', sans-serif; } |
Output:
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.
