True Type font(ttf), Open Type Font (otf), Apple Advanced Typography (aat) son los formatos de ficheros más conocidos que almacenan tipografías para los sistemas operativos de escritorio, precursores de de los nuevos formatos Web: Open Font Format (woff), Embedded OpenType (eot) o Scalable Vector Graphics (svg) formatos de los nuevos tipos de letra para usarse en páginas web, con el objetivo es permitir la distribución de tipografías desde un servidor a un equipo cliente.
Si encontrar un buen repositorio de fuentes de letra es importante para el diseño gráfico, poco a poco gracias a las nuevas especificaciones del W3C lo es para el desarrollo y diseño de páginas web. En la actualidad el comando @font-face de CSS3 permite embeber cualquier tipo de letra en una web.
El procedimiento para usar esta técnica es sencilla. Hay que subir al servidor los ficheros con los tipos de letra que queremos usar en la web (en el ejemplo adinek.ttf y brownwoodshadow.otf) y especificar su uso en la hoja de estilos:
@font-face {
font-family: 'adinek';
src: local('adinek'), url('adinek.ttf') format('truetype');
}
@font-face {
font-family: 'brownw';
src: local('brownw'), url('brownwoodshadow.otf') format('opentype');
}
.AK55{ font:55px bold normal 'adinek'; }
.BS42{ font:42px bold normal 'brownw'; }
Ver web de ejemplo. Descargar ejemplo font-face.zip (50 Kb).
En este ejemplo con 2 fuentes de letra distintas (una TTF y otra OTF) la hoja de estilo esta embebido en el html para que sea más sencilla su comprensión, se especifica la llamada a las fuentes de letra en sus respectivos @font-face indicando el nombre de letra (font-family) que se va a usar posteriormente y la fuente del fichero (src), en este caso en la misma carpeta donde esta el documento html y el formato.
Los 2 estilos creados con el nombre AK55 y BS42 sirven para usar las nuevas fuentes de letra, junto con algunas propiedades más y ser usadas desde una clase en el html.
Si todo esto te parece demasiado complicado puedes usar los generadores de fuentes para web, entre mis favoritos están font squirrel y web font generator que subiendo el tipo de letra crean un fichero de ejemplo comprimido para descargar, con todo lo necesario para ver el funcionamiento de @font-face en la web. Solo queda personalizar el contenido y subirlo a tu servidor.
Otra opción es usar la ayuda de Google Fonts que ofrece todo lo necesario, fuentes de letra y código para embeber en tu web usando lass fuentes de letra directamente desde los repositorios de Google. O el plugin para wordpress si como yo eres aficionado a crear webs con este magnifico CMS.
2 COMENTARIOS
Información Bitacoras.com…
Valora en Bitacoras.com: True Type font(ttf), Open Type Font (otf), Apple Advanced Typography (aat) son los formatos de ficheros más conocidos que almacenan tipografías para los sistemas operativos de escritorio, precursores de de los nuevos formatos…
Hola llevo un tiempo usando la web Font squirrel para descargar fuentes y su generador de código css y me estoy dando cuenta de un pequeño error que me gustaría que alguien me confirmara. En este caso Font squirrel cuando se descarga alguna fuente en múltiples formatos, incluido el svg hay algo que no hace bien en algunos caso, os explico: el formato svg necesita de un id para que la fuente funcione, ese id tiene que coincidir con en id que tiene dentro el archivo svg que lo podemos ver abriendo el archivo con el bloc de notas y buscando el id, pues bien. Algunas veces ese id que genera Font squirrel en el css no coincide con el id del archivo. Si se prueba la fuente por ejemplo en crhome que acepta el formato svg veréis que no se ve esa fuente que genero Font squirrel, claro está porque no puso el id correcto del archivo. ¿Alguien se ha percatado de este problema? Y así tener esto presente a la hora de usar esta herramienta. Este id del formato svg de la fuente DejaVuSerif no es correcto (comprobado).
@font-face {
font-family: ‘DejaVuSerif’;
src: url(‘fuentes/DejaVuSerif.eot’);
src: url(‘fuentes/DejaVuSerif.eot?#iefix’) format(’embedded-opentype’),
url(‘fuentes/DejaVuSerif.woff’) format(‘woff’),
url(‘fuentes/DejaVuSerif.ttf’) format(‘truetype’),
url(‘fuentes/DejaVuSerif.svg#DejaVuSerif’) format(‘svg’);