Menu
Newb to Angular 2 .
How to include Google font in my app. App Structure is
client
|--app.ts
|--main.ts
|--index.html
IndexFile.html
<head></head>
<body style="font-family: 'Montserrat', sans-serif;">
<div class="container-fluid">
<app-start>Loading...</app-start>
</div>
</body>
Included link in head tag
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
but no effect has occurred, also created a JS file in client folder (font.js) and inserted code
Meteor.startup(function() {
WebFontConfig = {
google: { families: [ 'Montserrat::latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
})
But no effect.
Right way to include this font in my Angular 2 + Meteor Application
348
import google fonts in angular fonts include in the style tag of the head section of index. html . In the styles, CSS @import is used to include external CSS files. It imports google fonts into the angular application and provides faster performance compared to the link approach.
To add google fonts, search for the google fonts, select the font category and family, then select the font style of your choice. Once you select the font, “copy the font link”, from the “selected families windows” and paste it in the head section of the HTML file.
Found solution using @import
Inserted this code in common_style.css file which I placed in public folder
client
|--app.ts
|--main.ts
|--index.html
public
|--styles
|--common_style.css
@import url(https://fonts.googleapis.com/css?family=Montserrat);
And then on app.ts - main loader typescript file I have included the style
@Component({
selector:'app-start',
template:`
<div style=" font-family: 'Montserrat', sans-serif;">
<navbar></navbar>
<router-outlet></router-outlet>
<footer></footer>
</div>
`,
directives : [ NavbarComponent,FooterComponent, ROUTER_DIRECTIVES ],
providers : [ ROUTER_PROVIDERS ]
})
and got style on all the pages
160
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