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.

add Google font roboto angular example

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.

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

Google font roboto in angular testing

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.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.


🧮 Tags

angular css es6 es7 git golang golang-examples hadoop haskell java java-convert java10 java11 java8 java9 javascript javascript-convert linux-unix lodash material maven nodejs nodered primeng primereact react reactjs seo site sweetalert2 typescript vscode vuejs webdev