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 .
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With