Google Webfont conflicto con la fuente local

Question

Tengo un conflicto realmente grave con el uso de google-webfonts. bien aquí es el código:

Esto está en la cabeza:

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

Y esto está en el css-archivo:

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

"Oswald" es una fuente de la familia de 3 fuentes:

• libro (300)
• normal (400)
• negrita (700)

Como se puede ver .. He cargado únicamente la negrita (700). (Se puede ver en la consulta) y funciona hasta aquí, pero ...

EL PROBLEMA ES:

Tengo un escritorio-versión de los 3 tipos de letra (300,400,700) instalados en mi equipo y siempre y cuando estas fuentes están activadas ... el navegador me muestra el font-weight incorrecto (400) en mi documento html.

OK. El problema es que en mi css 'Oswald' toma la fuente local y no la fuente web. Pero la fuente local "Oswald" es "Oswald normal". No sé por qué Google lo llama 'Oswald' en lugar de 'Oswald Bold'. Entonces no sé cómo solucionar este problema.

No quiero que el css apunte a la fuente local .. quiero que muestre siempre la fuente web ... ¡debido a la fuente de peso correcta!

¿Tiene alguna idea? por favor?

Posible cambiar el nombre de la llamada webfont?

Answer 1

Puede editar la regla CSS @font-face para que se ajuste a sus necesidades en lugar de simplemente cargar la generada automáticamente desde Google. Básicamente, el problema es que su regla prefiere versiones locales (src: local('Oswald Bold'), local('Oswald-Bold'), ...). El verison corregido se vería así:

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

Sólo añadir que a su CSS de forma manual, y el uso font-family: 'WebOswald'; cuando se quiere utilizar la versión web de Google de la fuente.

¡Espero que haya sido útil!