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

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 CSS El siguiente código:

@import url('https://fonts.googleapis.com/css2?family=Tangerine&display=swap');ss?family=Tangerine">

También podríamos 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 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