Google Webfont Konflikt mit lokaler Schriftart

Question

Ich habe einen wirklich schlechten Konflikt mit der Verwendung von Google-Webfonts. OK hier ist der Code:

Dieser Kopf ist:

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

Und das ist in der CSS-Datei:

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

"Oswald" ist eine font-Familie 3 Schriftarten:

• Buch (300)
• normale (400)
• bold (700)

Wie Sie .. ich nur die fett-Fläche (700) geladen haben sehen können. (Sie können es in der Abfrage sehen) Und es funktioniert, bis hier ABER ...

Das Problem ist:

Ich habe eine Desktop-Version der 3-Schriften (300.400.700) auf meinem Computer installiert und so lange diese fonts sind aktiviert ... der browser zeigt mir das falsche gewicht (400) in meinem html-dokument an.

OK. Das Problem ist, dass in meiner Schule "Oswald" den lokalen Fund und nicht den Webfont übernimmt. Aber die lokale Schrift "Oswald" ist "Oswald normal". Ich weiß nicht, warum Google es "Oswald" anstatt "Oswald Bold" nennt. Ich weiß also nicht, wie ich dieses Problem beheben kann.

Ich möchte nicht das CSS auf den lokalen Font zeigen .. ich will es immer den Webfont zeigen ... wegen des richtigen Font-Gewichtes!

Haben Sie irgendwelche Ideen? Bitte?

Kann der Webfont-Anruf umbenannt werden?

Answer 1

Sie können die CSS-Regel @font-face Ihren Anforderungen entsprechend bearbeiten, anstatt nur die automatisch generierte Regel von Google zu laden. Grundsätzlich ist das Problem, dass ihre Regel lokale Versionen bevorzugt (src: local('Oswald Bold'), local('Oswald-Bold'), ...). Die korrigierte verison würde wie folgt aussehen:

@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'); 
} 

Nur, dass manuell auf Ihre CSS hinzufügen und font-family: 'WebOswald'; verwenden, wenn Sie die Google-Web-Version der Schriftart verwendet werden soll.

Ich hoffe, dass das geholfen hat!