Tabla de contenidos
En la unidad 1 vimos la importancia de elegir bien las fuentes que se van a utilizar en nuestros sitios web. Además, en este mismo tema también hemos repasado las propiedades CSS para las fuentes que nos permiten controlar el tamaño, el tipo, el grosor o el estilo de las letras entre otras cosas. Veamos ahora los diferentes formatos de las fuentes y qué métodos tenemos para incorporarlos en nuestros proyectos web.
15. Formatos de las fuentes CSS
Actualmente no hay un formato de fuente único para todos los navegadores. Por este motivo, es necesario incluir las fuentes en todos los formatos para que sean visibles en el mayor número de navegadores. Los formatos más destacados son los siguientes:
| Formato | Descripción |
| EOT | Embedded OpenType, Explorer |
| TTF | TrueType Font, IOS |
| WOFF | Web Open Font Format, Chrome |
| WOFF2 | Mejora de WOFF |
| SVG | Scalar Vector Graphics |
1. La regla @font-face en CSS
La regla @font-face nos permite descargar una fuente o tipografía, cargarla en el navegador y utilizarla en nuestras páginas. Así pues, tendríamos el siguiente código para incluir la fuente Open Sans:
@font-face {
font-family: 'Open Sans';
src: local('Open Sans'),
url(opensans.woff2) format('woff2'),
url(opensans.woff) format('woff'),
url(opensans.ttf) format('truetype'),
url(opensans.otf) format('opentype'),
url(opensans.eot) format('embedded-opentype');
}
2. Repositorios de fuentes
Hoy en día es muy común utilizar un repositorio de fuentes que nos provea de los archivos necesarios para tener las fuentes disponibles en nuestra web.
Uno de los repositorios proveedores de tipografías más utilizados es Google Fonts (fonts.google.com). Los motivos de su uso son los siguientes:
- Gratuito: dispone de un amplio catálogo de fuentes gratuitas.
- Cómodo: su interfaz es de fácil uso.
- Rápido: utiliza un CDN que proporciona ventajas en cuanto a la velocidad.
Ejercicio propuesto
Añade la fuente Tangerine del repositorio de Google Fonts a un nuevo proyecto web. Para ello, busca la fuente deseada en la página de Google Fonts y agrega los códigos HTML y CSS que se detallan en la ficha descriptiva.
En este caso, tendremos que incorporar en nuestro documento HTML el siguiente código:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
Y a continuación tendremos que definir el siguiente estilo CSS:
p{ font-family: 'Tangerine', cursive;}
Ver código y resultado en CodePen:
0
3. Herramientas
3.1. Fuentes web online
| Nombre | URL |
| Font Squirrel | fontsquirrel.com |
| Da Font | dafont.com |
| Google Fonts | google.com/fonts |
3.2. Convertidores de fuentes online
| Nombre | URL |
| Font Squirrel converter | fontsquirrel.com/tools/webfont-generator |
| Online Font Converter | onlinefontconverter.com |
| Files conversion | files-conversion.com/font-converter.php |
| Font converter | fontconverter.org |
3.3. Repositorios de iconos
| Nombre | URL |
| Flaticon | falticon.es |
| Linecons | designmodo.com/linecons-free/ |
| Flaticons.co | flaticons.co |
| Flaticons.net | flaticons.net |
| Iconshock | iconshock.com/flat-icons/ |
Ejercicio propuesto
Al igual que con las fuentes, podemos utilizar repositorios de iconos para representar cualquier parte de nuestra interfaz. Busca un icono en el repositorio de Font Awesome (fontawesome.com) e inclúyelo en un nuevo proyecto web.
0