Google Webfont è in conflitto con il font locale

Question

Ho un conflitto davvero brutto con l'utilizzo di google-webfonts. OK ecco il codice:

Questo è in testa:

<link href='http://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'> 

e questo è nel css-file:

body { 
font-family: 'Oswald', sans-serif; 
font-weight: 700; } 

"Oswald" è un font-family di 3 tipi di carattere:

• libro (300)
• normale (400)
• grassetto (700)

Come si può vedere .. ho caricato solo il grassetto (700). (Si può vedere nella query) e funziona fino a qui, ma ...

IL PROBLEMA È:

Ho un desktop versione dei 3 tipi di carattere (300,400,700) installato sul mio computer e finché questi tipi di carattere sono attivati ​​... il browser mi mostra il font weight (400) errato nel mio documento html.

OK. Il problema è che nel mio css 'Oswald' prende il localfont e non il webfont. Ma il carattere locale "Oswald" è "Oswald normale". Non so perché Google lo chiama "Oswald" invece di "Oswald Bold". Quindi non so come risolvere questo problema.

Non voglio che il css indichi il carattere locale .. voglio che mostri sempre il webfont ... a causa del giusto font-weight!

Avete qualche idea? Per favore?

È possibile rinominare la chiamata webfont?

Answer 1

È possibile modificare la regola CSS @font-face in base alle proprie esigenze anziché caricare solo quella generata automaticamente da Google. Fondamentalmente il problema è che la loro regola preferisce le versioni locali (src: local('Oswald Bold'), local('Oswald-Bold'), ...). Il verison corretto sarebbe simile:

@font-face { 
    font-family: 'WebOswald'; 
    font-style: normal; 
    font-weight: 700; 
    src: url(https://themes.googleusercontent.com/static/fonts/oswald/v5/bH7276GfdCjMjApa_dkG6T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'); 
} 

solo aggiungere che per il CSS manualmente, e utilizzare font-family: 'WebOswald'; quando si desidera utilizzare la versione web di Google del font.

Spero che abbia aiutato!