Menu
I have written html code for an login page in (app.component.html) and it's css in (app.component.css),I want to import/use Open sans,font-family. I am bit confused by seeing different answers in various websites.Can u provide step-wise procedure to use Open sans font-family in angular 4?
413
Adding local fonts 1 Open the angular app in your favorite code editor. 2 Create a new folder called fonts inside the assets folder. 3 Download the fonts locally and place them in the fonts folder. 4 Open your style.css file and include the font by referencing a path. More ...
Open the angular app in your favorite code editor. Create a new folder called fonts inside the assets folder. Download the fonts locally and place them in the fonts folder. Open your style.css file and include the font by referencing a path. Here I added a Oxygen font. Now, you can use this font inside the components css files like this.
In my case src > assets > fonts > fontname > font-files (.woff). Then create a CSS file, src > assets > fonts > fonts-fontname.css. And on the CSS, add the font-face referring to our new font-flies, an example is given below.
Google font provides the following popular fonts. This post talks about adding Roboto fonts in the Angular project, The process for other fonts is the same. First, Go to Google fonts website and select the font you want to integrate In this example, I selected Roboto font as seen in the below screenshot.
Step - 1 : Insert the link in your index.html page
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
Step - 2 : Use it In your css file (Component.css)
* {
font-family: 'Open Sans', sans-serif;
}
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
