Google Webfont konflikt z lokalną czcionką

Question

Mam naprawdę zły konflikt z korzystaniem z google-webfonts. OK Oto kod:

to w głowie:

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

I to w CSS-file:

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

"Oswald" to font-family of 3 czcionki:

• książka (300)
• normalny (400)
• pogrubienie (700)

Jak widać .. I już załadowany tylko odważne twarzy (700). (Widać to w zapytaniu) I to działa aż tutaj, ale ...

PROBLEM JEST:

mam desktop wersję 3 czcionki (300,400,700) zainstalowanych na komputerze i jak długo te czcionki są włączone ... przeglądarka pokazuje mi nieprawidłową grubość czcionki (400) w moim dokumencie HTML.

OK. Problem polega na tym, że w moim css "Oswald" bierze localfont, a nie webfont. Ale lokalna czcionka "Oswald" to "Oswald normal". Nie wiem, dlaczego Google nazywa to "Oswald" zamiast "Oswald Bold". Tak więc nie wiem, jak rozwiązać ten problem.

Nie chcę, aby css wskazywało na lokalną czcionkę ... chcę, żeby zawsze wyświetlało się w Internecie ... z powodu właściwej grubości czcionki!

Czy masz jakieś pomysły? Proszę?

Możliwa zmiana nazwy połączenia internetowego?

Answer 1

Możesz edytować regułę CSS @font-face, dopasowując ją do swoich potrzeb, zamiast tylko ładować automatycznie wygenerowany z Google. Zasadniczo chodzi o to, że ich reguła preferuje wersje lokalne (src: local('Oswald Bold'), local('Oswald-Bold'), ...). Skorygowany Verison wyglądałby następująco:

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

Wystarczy dodać, że do swojego CSS ręcznie i używać font-family: 'WebOswald'; gdy chcesz korzystać z wersji internetowej Google czcionki.

Mam nadzieję, że pomogło!