How to add a Custom Font in your Angular application
In this article, we going to see how to add Custom Font in your Angular application. In this section, I step through how to add custom font into an Angular 8 application and how to use this throughout the application components. Now we going to see the Pacifico Font installation in the Angular application, using custom fonts are the best way to deliver the fonts to the website or application. They are various kind of browser according to that the fonts need to work on the DOM. So here are the clean steps to integrate the Pacifico Font on your website.
Install Angular Application.
Before going to integration steps first you need to install the Angular project. With the simple steps, you can install the Angular application. To know more about the installation, here you have an article.
Add a Custom Font in your Angular project.
Once everything is done with the new Angular installation process, now you required to download the font which would you like. Here I already downloaded Pacifico Font now it’s time to use in the project. Based on the browser compatibility I used the fonts inside the app.component.css below you can see.
app.component.css
|
1 2 3 4 5 6 7 8 9 10 11 12 |
@font-face { font-family: 'Pacifico'; font-style: normal; font-weight: 400; src: url('../assets/fonts/pacifico-regular.eot'); /* IE9 Compat Modes */ src: local('Pacifico Regular'), local('Pacifico-Regular'), url('../assets/fonts/pacifico-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../assets/fonts/pacifico-latin-regular.woff') format('woff'), /* Modern Browsers */ url('../assets/fonts/pacifico-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('../assets/fonts/pacifico-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('../assets/fonts/pacifico-latin-regular.svg#Pacifico') format('svg'); /* Legacy iOS */ } |
Now you need to add the font-family in styles.css this will work globally in your Angular project.
styles.css
|
1 2 3 4 5 6 |
/* You can add global styles to this file, and also import other style files */ * { box-sizing: border-box; font-size: 44px; font-family: 'Pacifico', cursive; } |
Output:
Conclusion:
I hope this article will help you to install the custom font in your Angular project. This is the way to use a custom font and it will perform well with your Angular project. 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.
