angular

Angular - Add Custom Font

A short article about how to add custom font files to your Angular projects.

Abhith Rajan
Abhith RajanNovember 12, 2019 ยท 2 min read ยท Last Updated:

To add custom fonts to your Angular project, put the font files under src.

Here I am following the folder pattern which I found on ABP Zero boilerplate.

In my case src > assets > fonts > fontname > font-files (.woff).

Then create a CSS file, src > assets > fonts > fonts-fontname.css.

And on the CSS, add the font-face referring to our new font-flies, an example is given below.

1@font-face {
2 font-family: "fontname";
3 src: url("./fontname/fontname.woff");
4}
5
6@font-face {
7 font-family: "fontname-Medium";
8 src: url("./fontname/fontname-medium.woff");
9}
10
11@font-face {
12 font-family: "fontname-Light";
13 src: url("./fontname/fontname-light.woff");
14}

Once the CSS file is ready, now we have to include that too in the angular build. To do that, update the angular.json to have references to our new CSS file like in below example,

1{
2 ...
3 "projects": {
4 "project-name": {
5 ...
6 "architect": {
7 "build": {
8 ...
9 "options": {
10 ...
11 "styles": [
12 ...
13 "src/assets/fonts/fonts-fontname.css",
14 ...
15 ],
16 ...
17 },
18 ...
19 },
20 ...,
21 "test": {
22 ...
23 "options": {
24 ...
25 "styles": [
26 ...
27 "src/assets/fonts/fonts-fontname.css",
28 ...
29 ],
30 ...
31 }
32 },
33 ...
34 }
35 },
36}

Note: the above code is tried and tested on Angular 8

Once we updated the angular.json, start a new build and see the new font applied in the places where it is used.

Abhith Rajan

Written by Abhith Rajan
Abhith Rajan is an aspiring software engineer with more than nine years of experience and has a proven successful track record of delivering technology-based products and services.
Connect

Webmentions

This page is open source. Noticed a typo? Or something unclear?
Improve this page on GitHub

Related StoriesView All