Search code examples
cssangularfontswebfonts

Importing Fonts into an Angular App

I'm trying to import the Font "Montserrat" into my Angular4 project but it simply resets to standard.

Here's my style.css

@import url("https://fonts.googleapis.com/css?family=Montserrat:500,700");

.fancyFont {
  font-family: 'Montserrat';
}

And my friend.component.html

<p class="fancyFont">Look at my Fanciness</p>
Solution

  • I figured it out.

    I imported the from google fonts like this:

    @import url("https://fonts.googleapis.com/css?family=Montserrat:500,700");

    Which includes two different weights, 500 and 700. By telling the CSS which font-weight I wanted to use it began to work.

    .fancyFont {
  font-family: 'Montserrat';
  font-weight: 500;
}