How to import a new font into a project – Angular 5

by

You need to put the font files in assets folder (may be a fonts sub-folder within assets) and refer to it in the styles:

@font-face {
  font-family: lato;
  src: url(assets/font/Lato.otf) format("opentype");
}

Once done, you can apply this font any where like:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'lato', 'arial', sans-serif;
}

You can put the @font-face definition in your global styles.css or styles.scss and you would be able to refer to the font anywhere – even in your component specific CSS/SCSS. styles.css or styles.scss is already defined in angular-cli.json. Or, if you want you can create a separate CSS/SCSS file and declare it in angular-cli.json along with the styles.css or styles.scss like:

"styles": [
  "styles.css",
  "fonts.css"
],

More Related Contents:

  1. Angular 2.0 router not working on reloading the browser
  2. Angular – Use pipes in services and components
  3. How do I create a singleton service in Angular 2?
  4. OrderBy pipe issue
  5. Remove/replace a component’s selector tag from HTML [duplicate]
  6. Apply a directive conditionally
  7. How can I unit test a component that uses the Router in Angular?
  8. Angular 2, DomSanitizer, bypassSecurityTrustHtml, SVG
  9. Expandable table rows in angular 4 with angular material
  10. Angular 2 cache observable http result data [duplicate]
  11. localStorage is not defined (Angular Universal)
  12. Application becomes unresponsive after encountering an exception
  13. ctorParameters.map is not a function in angular2-mdl
  14. How to set environment via `ng serve` in Angular 6
  15. How can I communicate between two child components in angular? [duplicate]
  16. Deep copying objects in Angular
  17. When to use Interface and Model in TypeScript / Angular
  18. Angular show spinner for every HTTP request with very less code changes
  19. HttpClient POST request using x-www-form-urlencoded
  20. How to pass data to dialog of angular material 2
  21. How do I inject a parent component into a child component?
  22. Angular 4/5 HttpClient: Argument of type string is not assignable to ‘body’
  23. Angular2 equivalent of $document.ready()
  24. Angular start ngFor index from 1
  25. Dynamically load a component inside a Material MatDialog
  26. What are the parameters for the number Pipe – Angular 2
  27. Angular2 ngModel inside ngFor (Data not binding on input)
  28. How to use reportProgress in HttpClient in Angular? [duplicate]
  29. How to generate components in a specific folder with Angular CLI?
  30. What are all the index.ts used for?

Leave a Comment