How to add Google Fonts into Angular application with step by step example

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 applicaiton 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 ie 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 applicaiton

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 applicaiton, 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.css for css and style.scss for 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 delcaration

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 applicaiton. 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 interms of performance and maintainability, thus reduce depedency with external services.

How to add Google Fonts into Angular application with step by step example

Angular application for google fonts

link google font api in angular

import google fonts in angular

Hosting google fonts with font-face delcaration

Conclusion

How to URL pattern validation example in Angular | Typescript

Angular blur event tutorial with examples

Angular - How to add Read more/less button/link with example | Dynamically Shorten long text with show more

6 ways to get input text value in Every Angular/typescript developer should know

How to convert number to words in Angular| Typescript number-to-words example

Angular Button Click Event examples - Binding Event in Angular

Prime Icons list | primeng primeReact,PrimeVue icons list