CODEWITHSUNDEEP
angularfonts
Sumchans
Sumchans

Reputation: 3784

Angular using Google fonts library

I have added the link to import Google fonts in the styles.css file of my Angular project. Here is it:

@import url('https://fonts.googleapis.com/css?family=Muli:400,700');

Noe how do I apply the font globally in my project and also how do i add it just to html element, For e.g for .

Upvotes: 36

Views: 69486

Answers (2)

NaN
NaN

Reputation: 9104

Another good thing to do it is to download the fonts to your server. This way, intranet applications you create won't need to get external sources to function properly. In the voting institution of my country we cut connection to servers in the election day to avoid hacker attacks, so the applications must have all assets they need locally:

 $ npm install --save typeface-muli

Add in angular.json:

 "styles": [
   "src/styles.scss",
   "node_modules/typeface-muli/index.css" <-- add this line
 ],

Remove from index.html:

 <!-- <link href="https://fonts.googleapis.com/css?family=Muli:300,400,600,700" rel="stylesheet"> -->

Upvotes: 13

Z. Bagley
Z. Bagley

Reputation: 9270

The best method for using google fonts is to include the script include in your index.html file's <head>...</head> section. You will find as you dive deeper into coding with Google as your friend that one of the best parts is their cdn is built to be supported in this fashion!

The equivalent script include is: <link href="https://fonts.googleapis.com/css?family=Muli:400,700" rel="stylesheet">

Which is similar to how Google's Material - Icons work too!

To use this in your style sheets, include this in your base styles.css file:

html, body {
    font-family: 'Muli';
}

note: you will find the css tag "font-family" actually has TONS of options. This is the most basic, but if you'd like more information I'm happy to update the answer to be more specific. I want to try to do the best to understand your problem, solve it, and we can make a solid understanding of the problem together.

Upvotes: 55

Related Questions