2016-06-07 63 views
6

Newb to Angular 2.Includi il carattere Google in Angular 2 + Meteor Application

Come includere il carattere di Google nella mia app. App Struttura è

cliente
      | --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> 

link incluso nel tag head

<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'> 

, ma si è verificato alcun effetto, anche creato un file JS nella cartella del client (font.js) e codice introdotto

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); 
    })(); 

}) 

ma nessun effetto.

modo diritto di includere questo tipo di carattere nel mio angolare 2 + Meteor Applicazione

+0

hanno si include la famiglia di caratteri nel css? – Rudy

+0

Ho incluso CSS in linea all'interno del tag body –

+0

Strano, il collegamento in testa dovrebbe funzionare. Perché sto usando in questo modo, sta funzionando correttamente. –

risposta

12

soluzione trovata utilizzando @import
Inserita questo codice nel file di common_style.css che ho messo nella cartella pubblica

cliente
          | --app.ts
          | --main.ts
          | --index.html
pubblico
          | --styles
                    | - common_style.css

@import url(https://fonts.googleapis.com/css?family=Montserrat); 

E poi app.ts - file del caricatore dattiloscritto principale ho incluso lo stile

@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 ] 
}) 

e stile ottenuto in tutte le pagine