CODEWITHSUNDEEP
cssangularsassangular-cli
Nikki Kononov
Nikki Kononov

Reputation: 549

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?

Upvotes: 7

Views: 12268

Answers (3)

Nafeez Quraishi
Nafeez Quraishi

Reputation: 6168

Faced the issue of google fonts not being applied. Following way worked without npm install of the fonts by placing fonts link with style within head of index.html

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Markazi+Text:wght@450" />

<style>
  * {
    font-family: 'Markazi Text';
    font-weight: 400;
  }
</style>

Ref: https://developers.google.com/fonts/docs/css2

Upvotes: 0

Saiyaff Farouk
Saiyaff Farouk

Reputation: 5633

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

Upvotes: 11

Jakob E
Jakob E

Reputation: 4926

This works for me:

Note! Material Icons are also hosted on Google fonts (no need for a local version)

@import url('//fonts.googleapis.com/css?family=Roboto|Material+Icons');

body {
  font-family: 'Roboto', sans-serif;
}
body:after {
  font-family: 'Material Icons';
  content: 'star';
}

Upvotes: 0

Related Questions