El primer paso es seleccionar la fuente que queremos implementar en formato OpenType (.otf) o bien, en formato Truetype (.ttf), en este caso “helsinki“.
- *Fuentes TrueType (.ttf) o OpenType (.otf) para Firefox 3.5 +, Opera 10 +, Safari 3.1 +, Chrome 4.0.249.4 +
- *Fuentes EOT para Internet Explorer 4 +
Para generar la fuente con la extensión EOT (para Internet Explorer), podemos usar @font-face Generator
Una vez listos los formatos los subimos al directorio de nuestro theme.
Luego declaramos la fuente en el archivo CSS de nuestro theme, en este caso “helsinki” agregando el siguiente código:
@font-face {
font-family: 'Helsinki';
src: url('helsinki.eot');
src: local('Helsinki Regular'), local('Helsinki'), url('helsinki.ttf') format('truetype');
}
Y por ultimo llamamos normalmente la fuente desde el CSS, como muetro en los ejemplos:
h1,h2,h3,h4,h5,h6 {
font-family:Helsinki, arial, helvetica;
letter-spacing: -0.03em;
font-weight:normal;
}
#menus {
font-size:14px;
padding-right:0px;
text-transform: uppercase;
font-family:Helsinki, arial, helvetica;
}
Generador: @font-face Generator
Hola, tengo una pregunta, esto es solo para WordPress o se puede en cuanquier pagina web.
Hola Juan Pablo, se puede para cualquier pagina que necesite de un estilo CSS.
Saludos.
estoy trabajand en un sitio interno para cambiarme a wordpreess pero fijate que hice lo de tu post, y no me funciono, ya estoy loco con eso de las letras. no las puedo cambiar
Hola. te comento que a mi en todas las implementaciones me funciono perfecto. Fíjate bien en el nombre de la tipografía, por que muchas veces al generar extensiones los conversores cambian los nombres de la misma, también fíjate que la extensión sea la correcta: otf , ttf, eot, (en el link que coloque en el post hay un conversor muy bueno que te facilita este trabajo).
Espero te funcione. Saludos.
Hola Luis, te comento mi problemilla. Estoy construyendo una revista en wordpress a partir de una plantilla que compré. Por defecto esta plantilla me venía con Cufón y no conseguía desactivarlo, la única manera que encontré fue borrando unas líneas de código en el header.php.
Quiero mantener esa tipografía que me venía puesta pero con Cufón me hace una transición muy lenta y se notaba el cambio de la tipo, así que quería probar a ver si había mucho cambio con fontface. He seguido todas tus instrucciones, pero no me pilla la tipografía, no se si quizás el problema que tengo es que no he subido los archivos a la carpeta que debería, ¿a cuál hay que subirla? según la llamada que tu haces a la fuente?
Muchisimas gracias de antemano!
Hola Esther, fíjate si borraste y desactivaste todo lo relacionado a Cufón, es para descartar posibilidades, otra es generar las extenciones de fuentes correspondientes como lo mencione en el post y una muy común es fijarte si el nombre de la fuente esta bien puesto en el CSS, muchas veces es diferente el nombre de la fuente al de los archivos.
los archivos se guardan en la carpeta de tu theme junto con heder.php, sidebar.php, index.php, etc…
y la fuente se llama desde el css así:
@font-face {
font-family: ‘Helsinki’;
src: url(‘helsinki.eot’);
src: local(‘Helsinki Regular’), local(‘Helsinki’), url(‘helsinki.ttf’) format(‘truetype’);
}
y en cada lugar que la quieras colocar así:
font-family:Helsinki, arial, helvetica;
Le cambias el Helsinki por el nombre de tu fuente.
Espero lo puedas solucionar y perdon por la demora.
o_O cuernos! yo hago eso mismito que se dice aquí y no hay caso, uso firefox 9 y el último wordpress 3.1 …he repasado 100 veces lo mismo y nada, ya no se que puede ser, buscaré otro método, gracias igual