Angular using Google fonts library

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"> -->

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.

Tags:

Fonts

Angular

Recent Posts