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

Issue

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?

Solution

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">

Answered By - Maciej Treder