Formatos de las fuentes en CSS y utilización de repositorios

En el tutorial de diseño web vimos 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.

5. 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

5.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'); 
}

5.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.

5.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:

1. Accede al sitio web de Google Fonts: Abre tu navegador web y visita fonts.google.com
2. 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.
3. 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.
4. 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.
5. 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.
6. Incrusta las fuentes en tu sitio web: En el panel lateral se pueden ver dos tipos de incrustación, mediante <link> o mediante @import.

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:

0

5.3. Herramientas

5.3.1. Fuentes web online

Nombre	URL
Font Squirrel	fontsquirrel.com
Da Font	dafont.com
Google Fonts	google.com/fonts

5.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

5.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