Google fonts

kasuno1 #1 Jul '13

Hola!

Si otra vez yo, el pesado de las preguntas xD (prefiero hacer preguntas en hilos separados)

La pregunta es: google fonts en que navegadores va?

En google chrome va lógicamente, en safari también. Pero en Internet explorer por ejemplo? Luego en el dolphin (la app de android tampoco va).

Me jode porque a la web la mayoria de gente que va a entrar son mujeres de 30-50 años y me da que la mayoría usan Internet Explorer si o si. xD

Que puedo hacer para arreglar esto?

La fuente que uso es la Quicksand y la que aparece en Ie es la Verdana creo o la Helvetica, con lo que cambia totalmente el estilo tipográfico.

Hay alguna manera de que se vea en el Ie?

Gracias warrillas!

txandy #2 Jul '13 :psyduck:

#1 Para estas cosas te recomiendo la web de: http://caniuse.com/#search=font

Saludos

Merkury #3 Jul '13

#1 Sube la font al FTP he incluyela con CSS sin más...

Te dejo un ejemplo:

@font-face {
    font-family: 'Cumulus';
    src: url('cumulus.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

1

Tunnecino #4 Jul '13

Y si lo haces con fuentes en todos sus formatos, los puedes sacar en http://www.fontsquirrel.com/tools/webfont-generator acuérdate siempre del orden del embebido de la fuente, por que eso dictamina si en Windows se verá tu fuente guay, o mega pixelada, el orden debería de ser este:

@font-face {
    font-family: 'Fuente';
    src: url('fonts/Fuente-webfont.eot');
    src: url('fonts/Fuente-webfont.eot?#iefix') format('embedded-opentype'),
    	 url('fonts/Fuente-webfont.svg#fuente') format('svg'),
         url('fonts/Fuente-webfont.woff') format('woff'),
         url('fonts/Fuente-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

El svg siempre antes del ttf.

1 1 respuesta

JoSuK #5 Jul '13

Thread equivocado borrar post ty

speciaL #6 Jul '13

Typekit funciona en casi todos.

Lo único que ahora va incluido en el paquete de Creative Cloud, así que no se como estara el tema de hacerte una cuenta gratuita en typekit.

kasuno1 #7 Jul '13

#4 Lo estoy haciendo con lo que me has pasado. Ahora tengo generado una carpeta que pone webfont kit.

Donde meto la carpeta o los archivos? Podrian explicarlo en la misma web pa los noobs.

Tunnecino #8 Jul '13

Pues, por ej, si tienes los estilos css en la carpeta css, creas una carpeta fonts dentro de esta, metes los archivos de fuente, y añades a tu .css lo que te puse arriba.

Más que nada tienes que dar una ruta relativa al css para embebir la fuente.

1 respuesta

kasuno1 #9 Jul '13

#8

Esto es lo que me ha generado el font squirrel.

@font-face {
    font-family: 'quicksandbold';
    src: url('quicksand-bold-webfont.eot');
    src: url('quicksand-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('quicksand-bold-webfont.woff') format('woff'),
         url('quicksand-bold-webfont.ttf') format('truetype'),
         url('quicksand-bold-webfont.svg#quicksandbold') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'quicksandlight';
    src: url('quicksand-light-webfont.eot');
    src: url('quicksand-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('quicksand-light-webfont.woff') format('woff'),
         url('quicksand-light-webfont.ttf') format('truetype'),
         url('quicksand-light-webfont.svg#quicksandlight') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'quicksandregular';
    src: url('quicksand-regular-webfont.eot');
    src: url('quicksand-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('quicksand-regular-webfont.woff') format('woff'),
         url('quicksand-regular-webfont.ttf') format('truetype'),
         url('quicksand-regular-webfont.svg#quicksandregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

Voy a la carpeta del theme, hago una carpeta fonts y luego en la hoja de estilo del tema meto eso de arriba? Como sabe en que carpeta esta la fuente?

Gracias buen muchacho.

Tunnecino #10 Jul '13

Si, por ejemplo, y recuerda editar las rutas de las fuentes en los src, y lo que te dije antes, subir el svg antes del TTF por que si no seguramente tendrás problemas de renderizado en Windows.

Google fonts

Usuarios habituales

Tags