Adding new font to an Angular project

Question

I bought a new font type I would like to implement in my project.

The font file is in a .otf format.

I added the font file to my assets folder and did the following in my styles.css:

@font-face {
   font-family: p22-mackinac-pro !important;
   src: url('assets/fonts/P22Mackinac-Book.otf') format('otf');
   font-style: normal;
 }

When I add the font family in the body tag, nothing happens.

Now comes the most confusing part for me:

If a use the global selector and add the font family, it changes the font to another font, but not the font that I am using.

* {font-family: 'p22-mackinac-pro', serif;
 font-style: normal;
 font-weight: 400;
}

Lastly, part of the my sites font does not change at all unless I add "!important" to my global selector above, but this causes my angular icons to stop working!

This is the font I wish to have global in my project:

This is the font I get when I add the font family to my global selector in styles.css:

This is the font type on part of my project (when I don't add the !important" to font-family in styles.css to my global selector)

The css in my developer toolbar on chrome when I inspect the html that doesn't change:

Looks like youre using Angular Material. Check this link to see how to customize it: material.angular.io/guide/typography#customization — William Martins
– William Martins, Commented May 12, 2020 at 15:52
Since I'm using css and not scss I can't use the guide you are linking to — Gustav Vingtoft
– Gustav Vingtoft, Commented May 12, 2020 at 16:14

Akhil Chandran · Accepted Answer · 2020-05-12 16:26:21Z

1

You are using material css which already have the font Roboto by default. So, eventually, your global font is overriden.

You'll need to override material's font by something like below.

h1 { font-family: 'p22-mackinac-pro', serif !important; }

answered May 12, 2020 at 16:26

Akhil Chandran

4811 gold badge4 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Gustav Vingtoft Over a year ago

This partly worked. I could add all the html tags in my styles.css and give the the font-family, but it doesn't seem right that I have to do it that way.

Akhil Chandran Over a year ago

Also refer this link, in case you would like to override font with sass material.angular.io/guide/typography

Collectives™ on Stack Overflow

Adding new font to an Angular project

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related