How to use Fonts locally in Angular

Before we jump into the topic, there is another way for using the font, but not locally.

1.0 Importing fonts using CDN (not locally)

Click this link, we are using Roboto font family as example. Follow this, and focus on the red circled part, which is the key content.

Here we could obtain 2 ways for importing this font.

1.1 Into the .html file

<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">

1.2 Into the .css/.scss file or with

<style>
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
</style>

This method has a number of advantages over the latter as the CDN includes (most of the time) all variations of the font — Bold, Italics, Regular, Semibold, etc and that too with cross-browser compatibility.[2]

Advantages: [2]

It doesn’t cost you or the end-users much, if not negligible.
Negligible to none licensing issues.

But it also has several Dis:

Dis: [2]

High latency issues and security loopholes
A request to get the CSS to another domain which is treated as a low priority task
Some of the browsers might not be well versed.

Therefore, we have the following method.

2.0 Self-hosting web fonts

2.1 Download the font

Look back to the above pic, notice the top-right corner there is a blue-cirlced download icon, press it. Then a zip file will be downloaded.

Remember here to choose regular 400 as the style before the downloading.

2.2 Transform the data type

From the above zip file we obtain the .ttf file, then using any online Transfonter to generate .woff file.

There are more files than we chose, from the zip file we would obtain all types, we could chose the ones we need for the projects.

1 .ttf file generates 1 .woff file and 1 .woff2 file.

Notice there are all the files and plus one stylesheet.css file

And meanwhile we need to create the empty folders based on the font weight (which we need to use in the projects) inside the assets - fonts folder in the Angular application.

Then we need to create a scss folder within the assets in order to declare the @font-face values.

2.3 Inside the empty folders

Move the .woff and .woff2 files to their corresponding folders under assets/fonts.

Copy the code from stylesheet.css and paste it into _font.scss.Provide the correct path of the font from the assets/font folder for each font.

@font-face {
  font-family: 'Lato';
  src: url('assets/fonts/Thin/Black/Lato-Black.woff2') format('woff2'),
    url('assets/fonts/Thin/Black/Lato-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
}

The last step is to import the _font.scss file in the main stylesheet of your angular application - style.scss.

3.0 Use inside the local component.css

//----------------------------------*\
// Fonts
//----------------------------------*/
@import 'assets/scss/modules/_fonts.scss';
// primary font
$primary_font: 'Lato';
// font-weight
$thin:100;
$light:300;
$regular:400;
$bold:700;
$black:900;
// Font size
$font-xs:12px;
$font-sm: 14px;
$primary-fs: 16px;
$font-md: 18px;
$font-lg: 20px;
body {
    font-family: $primary_font;
    font-size: $primary-fs;
    font-weight: $regular;
}

Reference

[1] https://answers.themler.io/articles/9064/how-to-use-google-fonts-locally [2] https://medium.com/@aditya_tyagi/import-fonts-in-an-angular-app-the-easy-right-way-ae9e99cab551 [3] 如何优雅的选择字体(font-family) https://segmentfault.com/a/1190000006110417 [4] Defining Custom Fonts in CSS With @font-face and font-display https://alligator.io/css/font-face/

puddlejumper26 / blogs