Best practice/Style for importing font into angular 4 cli web application

Question

I have been working on an Angular 4 personal project, and wanted to add the Ubuntu font family to my Angular application. What is the best practice or style for adding a number of custom fonts to a project? I currently have saved the ubuntu font family into /assets/fonts/ubuntu-font-family-0.83 and added it to the outer most component CSS file, app.component.css with font face.

@font-face {    font-family: 'Ubuntu';    src: url('/assets/fonts/ubuntu-font-family-0.83/Ubuntu-R.ttf'); } 

By putting this in the original component I don't have to redefine the font in nested components i just treat it like a default font-family.

Is there a clearer/better way to do this and still cut out duplicate code?

Answer 1

There is better way to include fonts to the website, not only to angular app.

Checkout https://fonts.google.com

Why it is better?

• higher performance
• higher chance, that your customer will have font in his cache
• you don't have to worry about attaching files, and use yours origin bandwidth

In your case you would import following in your css file:

@import url('https://fonts.googleapis.com/css?family=Ubuntu'); 

You can place it in the main .css file, included by index.html. Or you can use <link> tag and include fonts in your headers (also in index.html)

<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet"> 

Answer 2

This is best way to use google font locally with angular 2,4,5,6,7 and more, First Download Google Font and add this inside the assets folder and use it is as per your requirement.

In angular.json call this in src/assets

"assets": [     "src/assets"  ], 

In css file add this font-face in top

@font-face {   font-family: 'Montserrat';   src: url(/assets/Montserrat/Montserrat-Light.ttf) format("truetype");   font-weight:300; } 

At Last use it as per your requirement like

body{  font-family: 'Montserrat', sans-serif; }