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

user_8168719 0
Viewed 55219

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?

angular fonts css html
2 Answers

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;
}
user_96060370
Related