Cómo usar cualquier tipografía en WordPress con @font-face

CSS Publicado por Claudia en octubre 26, 2012

font-face
La  regla @font-face CSS3 se convirtió en mi forma preferida para incrustar nuevas tipografías en WordPress sin plugin, sin depender de Google (Google Web Fonts) y sin depender de que el usuario tenga la fuente en su equipo.

Su utilización es realmente sencilla, mucho más fácil de lo que parece.

Lo primero, es elegir una fuente que nos guste, y que podamos usar con @font-face. En Font Squirrel, por ejemplo, podemos encontrar muchas fuentes gratuitas y que ya están en todos los formatos necesarios para que podamos usar la regla sin tener problemas de compatibilidad con ningún navegador web o dispositivo.

Una vez descargado el paquete con la fuente en todos los formatos (eot, woff, ttf, svg), lo descomprimimos. Luego iremos a wp-content/themes/mitema, y dentro de la carpeta de nuestro tema creamos otra carpeta, a la que nombraremos “fonts“. Allí pondremos todos los archivos de nuestra fuente.

Hecho esto, en nuestra hoja de estilos style.css, incluimos la regla de acuerdo al siguiente ejemplo:

1
2
3
4
5
6
7
8
@font-face {
font-family: 'Deftone';
src: url('fonts/Deftone.eot'); /* IE9 Compat Modes */
src: url('fonts/Deftone.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/Deftone.woff') format('woff'), /* Modern Browsers */
url('fonts/Deftone.ttf')  format('truetype'), /* Safari, Android, iOS */
url('fonts/Deftone.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Reemplazamos Deftone por el nombre de nuestra fuente, tal y como aparece en los archivos.

Finalmente, usamos la propiedad font-family como lo haríamos habitualmente. Por ejemplo:

1
2
3
h2 {
font-family: 'Deftone', Helvetica, Arial, sans-serif;
}

Vía

Compártelo!
3 Comentarios en Cómo usar cualquier tipografía en WordPress con @font-face
  1. Información Bitacoras.com…

    Valora en Bitacoras.com: La  regla @font-face CSS3 se convirtió en mi forma preferida para incrustar nuevas tipografías en WordPress sin plugin, sin depender de Google (Google Web Fonts) y sin depender de que el usuario tenga la fuente en su equip……

  2. cali dice:

    hola, gracias por la nota, estaba necesitando esto para probar en el sitio que estoy haciendo.
    De paso te pregunto …estoy interesado en poner handwriting…pero los que consigo se ve no son latin extend…porque no me salen bien los acentos…si sabes de alguno que funcione bien, te agradezco el dato. gracias nuevamente, saludos

  3. alex dice:

    osea,
    al siguiente codigo lo tengo que poner en el style.css? o va en otro lado?

    h2 {
    font-family: ‘Deftone’, Helvetica, Arial, sans-serif;
    }

Deja tu comentario
Tu Comentario