No me carga las fuentes

[Bernat 0]

Hola, estoy haciendo un proyecto (sin ánimo de lucro) y he cogido una plantilla free que cumple en el 99% mis expectativas pero... Los menus al parecer usan una fuente específica. No estoy muy ducho, pero entiendo que el problema viene aquí:

 

/* Fonts */
@font-face {font-family:'Roboto';font-style:normal;font-weight:300;
src: local('Roboto Light'), local('Roboto-Light'), url(http://themes.googleusercontent.com/static/fonts/roboto/v11/Hgo13k-tfSpn0qi1SFdUfT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');}

@font-face {font-family:'Viga';font-style:normal;font-weight:400;
src: local('Viga-Regular'), url(http://fonts.gstatic.com/s/viga/v5/qSCTLa3-E_u5bzqg7fivWw.woff2) format('woff2');
 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;}

 

Entiendo que tiene que cargar una fuente llamada «Roboto» y una llamada «Viga», con Firefox me las carga pero Safari no por ejemplo. Que está mal?

 

Gracias.

[uhf 4]

Hola Bernat ¿Cómo estás? :)

 

Efectivamente en Safari no carga la tipografía Viga y sí la Roboto y es porque éste no soporta el tipo woff2.

 

Con este código en tu css te funcionará:

 

@font-face {
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 300;
   src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUfbO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}

@font-face {
   font-family: 'Viga';
   font-style: normal;
   font-weight: 400;
   src: local('Viga-Regular'), url(https://fonts.gstatic.com/s/viga/v5/hRYG5a73hsnE-Hek-8TjTfesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}

 

Pero yo lo haría usando las Google Fonts directamente.

 

Este código en la 1ª línea del head

 

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

 

Y el uso en el css sería así:

 

.clase1 {
font-family: 'Roboto', sans-serif;
}

.clase2 {
font-family: 'Viga', sans-serif;
}

 

En Google Fonts te explican muy sencillamente su uso.

 

Me alegro de leerte y espero que esto te sirva.

 

Un saludo!

 

mon

[Bernat 0]

La primera solución funciona perfecta!!!!

 

Muchas gracias