Tema 17 Fuentes y Estilos de Texto
Uno de las mejores estilizaciones que puedes añadirle a una página web es una buena fuente de texto. Es importante que el texto sea legible, tenga un buen tamaño y vaya acorde con la temática de la página; imagina si este texto fuera amarillo y tuviera un tamaño pequeño, ¿crees que sería cómodo tomar el curso de esta forma?
Como desarrollador, tienes que pensar en cómo tus usuarios verán tu
contenido. Existen miles de fuentes disponibles para usar en
nuestras páginas web, pero, no todas son gratuitas. Google
Fonts es una excelente página para obtener fuentes gratuitas
y de uso libre. Haz clic 
en la liga y escoge algunas que te gusten.
Implementar Fuentes
Podemos colocar fuentes en nuestros proyectos web de diferentes maneras. En la página de Google Fonts podemos seleccionar todos los estilos que queramos y para utilizarlos tenemos 3 opciones:
-
1. Descargar la fuente
Podemos descargar la fuente que queremos utilizar. Normalmente, se encuentran en formato .ttf. Después, tenemos que vincular el archivo con nuestro CSS, utilizando una instrucción especial llamada @font-face. Este selector se utiliza de la siguiente manera:
@font-face {
font-family: NombreDeLaFuente;
src: url('NombreDeLaFuente.ttf');
}Una vez importada, podemos utilizar el nombre que asignemos a la propiedad "font-family" para modificar la fuente de nuestros elementos.
-
2. Vincular la Fuente desde HTML
También podemos utilizar el elemento <link> desde nuestro código HTML. Google Fonts nos brinda el código para copiarlo al seleccionar nuestras fuentes:
-
3. Vincular con @import
CSS cuenta con una instrucción @import. Normalmente, se coloca en la etiqueta <style> dentro del head. Google Fonts nos brinda el código para copiarlo al seleccionar nuestras fuentes:
Para cualquier opción tenemos que utilizar la propiedad font-family con el nombre de la fuente a utilizar para poder ver nuestra nueva fuente en el contenido que queramos.