Include Google Font in Angular 2 + Meteor Application
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
Answer
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