THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.
In this post, You will learn Multiple ways of integrating google font into angular applications.
Google font is an popular font library provided by Google, It provides popular fonts which every application used. Other versions available:
Google font provides following popular fonts
- Roboto
- Open Sans
- Source Sans Pro
- Oswald
- Montserrat
This post talks about adding roboto fonts in Angular project, The process for other fonts is same. First, Go to Google fonts website and select font you want to integrate In this example, I selected Roboto font as seen in the below screenshot. 
The Url got for Robot google font after selecting styles as seen in below screen is
https://fonts.google.com/specimen/Roboto?sidebar.open&selection.family=Roboto:wght@300
Google fonts are provided to external application with css files only.
The following approaches with all the angular versions 2,5,6,7,8,9,10,11 and latest
Angular application for google fonts
create Angular Application using Angular cli command.
ng new anglar-google-font
It creates blueprint application with required files
Run the below command at root of the project to run the application
ng serve
Now application started and running at localhost:4200.
link google font api in angular
Like any other css link in Angular application, Include css file with link tag in head section of index.html
<head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
</head>
Next, find out css rules i.e. font-family:Roboto values and add it in css/scss/sass file as given below
font-family: 'Roboto', sans-serif;
Complete example is Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>AngularNumberWords</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet" />
</head>
<body>
<app-root></app-root>
</body>
</html>
In the component html template
<div class="myfonts">Testing google fonts</div>
In the scss file
.myfonts {
font-family: 'Roboto', sans-serif;
font-size: 16px;
}
import google fonts in angular
There are many ways we can import google font css in angular application
First, import in index.html as described below
fonts are included in style tag of head section of index.html
In the styles, css @import is used to include external css files.
This will import google fonts into angular application, and provides faster performance compared to link approach.
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
</style>
Second approach can be done either
- import css global styles - in
style.cssfor css andstyle.scssfor scss files or - angular component css files
style.scss
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
.heading {
font-family: 'Roboto', sans-serif;
font-size: 16px;
}
Above explains about how to add google fonts in stylesheet of angular either globally or components.
you can inspect the output displayed in the browser
Hosting google fonts with font-face declaration
In the above two approaches,google fonts are hosted with google cdn and provided as css files.
Sometimes, you have the requirement to host fonts in your application, then this is the method you have to implement.
In this example, First choose google font and download the font into Angular project.
It downloads the zip file with following files
Roboto-Black.ttf
Roboto-BlackItalic.ttf
Roboto-Bold.ttf
Roboto-BoldItalic.ttf
Roboto-Italic.ttf
Roboto-Light.ttf
Roboto-LightItalic.ttf
Roboto-Medium.ttf
Roboto-MediumItalic.ttf
Roboto-Regular.ttf
Roboto-Thin.ttf
Roboto-ThinItalic.ttf
Copy the above files to assets/fonts folder.
In Angular.json, add fonts path to `assets' attribute as shown below
"assets": [
"src/favicon.ico",
"src/assets"
]
Create a google-fonts.css file and include following things css @font-face enables fonts into your application. Added support for all browsers in css @font-face declaration
@font-face {
font-family: 'Roboto';
src: url('/assets/fonts/roboto.eot'); /* IE9 Compat Modes */
src: url('/assets/fonts/roboto.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/assets/fonts/roboto.woff') format('woff'), /* Modern Browsers */
url('/assets/fonts/roboto.ttf') format('truetype'), /* Safari, Android, iOS */
url('/assets/fonts/roboto.svg#svgFontName') format('svg'); /* Legacy iOS */
}
This is how enable local robot fonts in angular application using @font-face.
This approach is better in performance compared with other two approaches
Conclusion
In this blog post, you learned integration of google fonts in Angular application
- link fonts globally
- import fonts in with global stylesheets
- hosting fonts wit font-face
Finally, 3rd approach is best in terms of performance and maintainability, thus reduce dependency with external services.
