En el tutorial de diseño web puedes estudiar la importancia de elegir bien las fuentes que se van a utilizar en nuestros sitios web. Además, 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.
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 en nuestra hoja de estilos CSS:
@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. 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.
2.1. Cómo se usa Google Fonts
Google Fonts es un servicio de Google que proporciona una amplia variedad de fuentes tipográficas de calidad para uso gratuito en sitios web. Para usar el repositorio de fuentes de Google Fonts, sigue estos pasos:
- Accede al sitio web de Google Fonts: Abre tu navegador web y visita fonts.google.com
- Explora las fuentes: Puedes navegar por las diferentes fuentes disponibles utilizando las opciones de filtrado, como las categorías de fuentes, el grosor (weight), el estilo, etc. También puedes buscar una fuente específica usando el cuadro de búsqueda.
- Selecciona las fuentes: Haz clic en las fuentes que deseas usar. Una vez seleccionadas, se agregarán al panel de selección, ubicado en la parte inferior derecha de la página.
- Personaliza las opciones: En el panel de selección, puedes personalizar las opciones de las fuentes, como el grosor, el estilo (normal, itálico), el conjunto de caracteres y más.
- Obtén el código de incrustación: Una vez que hayas seleccionado todas las fuentes y ajustado las opciones, haz clic en el botón «Usar en Google Fonts» en la parte inferior del panel de selección.
- Incrusta las fuentes en tu sitio web: En el panel lateral se pueden ver dos tipos de incrustación, mediante
<link>o mediante@import.
Además de proporcionar una amplia selección de fuentes, Google Fonts también te permite integrar iconos en tu sitio web utilizando Google Fonts Icons. Estos iconos son escalables y personalizables, lo que los hace ideales para mejorar la estética y la usabilidad de tu diseño web. Si te interesa aprender cómo insertar y utilizar iconos de Google Fonts Icons en tu sitio, te invito a visitar este artículo detallado: Cómo insertar Iconos de Google Fonts Icons en tu sitio web.
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 que se detallan en la ficha descriptiva, bien mediante <link> o mediante @import.
Mediante @import
En este caso, tendremos que incorporar en nuestro documento CSS El siguiente código:
@import url('https://fonts.googleapis.com/css2?family=Tangerine&display=swap');ss?family=Tangerine">
Y a continuación podemos definir el siguiente estilo: font-family: 'Tangerine', cursive;
Mediante <link>
En este caso tendríamos que incluir el siguiente código en HTML:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
Y a continuación podemos definir el siguiente estilo: font-family: 'Tangerine', cursive;
Ver código y resultado en CodePen:
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.