Jump to content
Sign in to follow this  
Bernat

No me carga las fuentes

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

La primera solución funciona perfecta!!!!

 

Muchas gracias

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.