Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular using Google fonts library

Tags:

angular

fonts

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 .

like image 445
Sumchans Avatar asked May 16 '18 03:05

Sumchans


People also ask

How do I import Google Fonts into angular project?

Sometimes, you have the requirement to host fonts in your application, then this is the method you have to implement. In this example, First, choose google font and download the font into the Angular project. It downloads the zip file with the following files. Copy the above files to the assets/fonts folder.


1 Answers

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.

like image 93
Z. Bagley Avatar answered Sep 27 '22 20:09

Z. Bagley