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.
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 |
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'); }
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:
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
Nombre | URL |
Font Squirrel | fontsquirrel.com |
Da Font | dafont.com |
Google Fonts | google.com/fonts |
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 |
Nombre | URL |
Flaticon | falticon.es |
Linecons | designmodo.com/linecons-free/ |
Flaticons.co | flaticons.co |
Flaticons.net | flaticons.net |
Iconshock | iconshock.com/flat-icons/ |
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