Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google Web Font is not being used in Angular?

I have an Angular project setup with the angular-cli. I'd like to bundle Roboto font with my website so the way I do it is I declare it in my styles.scss

/* You can add global styles to this file, and also import other style files */
@import url('https://fonts.googleapis.com/css?family=Roboto');

// Set Global Font
body {
  font-family: 'Roboto', sans-serif;
  margin: 0;
}

However, it seems like the font anyway defaults to sans-serif instead of Roboto. I tried adding a link inside index.html, the same effect.

P.S. not sure if related, but I also add Material Icons

// Import Material Icons
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url('../node_modules/material-design-icons/iconfont/MaterialIcons-Regular.woff2') format('woff2'),
       url('../node_modules/material-design-icons/iconfont/MaterialIcons-Regular.woff') format('woff'),
       url('../node_modules/material-design-icons/iconfont/MaterialIcons-Regular.ttf') format('truetype');
}

in the very same file, could this somehow have an effect on the project?

like image 540
Nikki Kononov Avatar asked Feb 24 '17 10:02

Nikki Kononov


People also ask

How do I use Google Fonts in Angular app?

import google fonts in angularfonts include in the style tag of the head section of index. html . In the styles, CSS @import is used to include external CSS files. It imports google fonts into the angular application and provides faster performance compared to the link approach.

How do I use Google Fonts in Angular 6?

Once you completed the installation of an Angular project, now you need to select the font from Google Fonts which you required to use in website or web application. Now we going to use Google Font in two methods, one using CDN and another with @import in your Angular project.


1 Answers

Since you're working on the @angular/cli project, I doubt that links in the .scss file works.

Install roboto-fontface through npm and link it in the styles array of angular-cli.json

npm install roboto-fontface --save

In the angular-cli.json styles array 'apps[0].styles' add the following

    "styles": [
      ...
      "../node_modules/roboto-fontface/css/roboto/roboto-fontface.css"
      ...
    ]

And, npm start and try out the styles

like image 126
Saiyaff Farouk Avatar answered Oct 12 '22 00:10

Saiyaff Farouk