css - ejemplo - @font-face google fonts
Google Font no funciona en Safari (6)
Estoy trabajando para que mi sitio se vea igual en Safari y Chrome. En Chrome, se ve exactamente como lo quiero. El principal problema es que Google Font no parece cargarse en Safari. Debido a que estoy usando el código exacto que figura en el sitio de Google Font, no puedo entender por qué Safari no lo va a buscar. ¿Es solo incompatible con Safari y tengo que depender de una fuente alternativa?
Mi caso fue que utilicé el nombre de la fuente sin comillas. Así que solo cambia
body{
font-family: roboto, Arial, sans-serif;
}
a
body{
font-family: ''roboto'', Arial, sans-serif;
}
Chrome funciona perfectamente sin comillas, pero Safari no.
Por alguna extraña razón, tengo experiencia en algunas fuentes web de Google ... cuando esto sucede, generalmente las obtengo en mi servidor y / o las convierto en fontsquirrel ... Safari debería poder tomar archivos TTF sin importar qué ver:
Tuve un caso en el que un Google Webfont (Londrina) no apareció en Safari (para Windows), porque utilicé text-rendering: optimizeLegibility; . Después de eliminar eso, estuvo bien.
Ejemplo: http://codepen.io/julia-r/pen/gagbdy
Su CSS no solo debe contener
font-family: ''Source Sans Pro'', sans-serif;
también debería tener valores para FONT-STYLE y FONT-WEIGHT:
font-family: ''Source Sans Pro'', sans-serif; font-weight:900; font-style:italic;
en caso de que utilice una fuente que contenga esos valores, como por ejemplo: https://fonts.googleapis.com/css?family=Source+Sans+Pro:900italic
Aunque esta es una vieja pregunta, pensé que agregaría mi solución (que encontré en otra parte) para ayudar a otros.
Cuando declare sus fuentes en su CSS, agregue un "! Important" al final. Aclaró mi problema.
body { font: {
family: $arvo, sans-serif !important;
size: 18px;
}