Fuentes personalizadas en CSS

← Diseño Web ⌂ Home

Tipos de fuentes

Los tipos de texto, también conocidos como tipos de letras o fuentes, son el conjunto de diseños tipográficos que representan a cada una de las letras y los caracteres gráficos en el documento. Su nombre correcto es tipografía. Los diferentes tipos de fuente están basados en archivos que existen en cada sistema operativo.

Algunos ejemplos de tipos de texto o fuentes, son:

CSS permite utilizar fuentes diferentes a las disponibles en el sistema operativo del cliente, mediante la importación o el enlace a archivos de fuentes externas. Las más usadas son las que están disponibles a través del sitio web de Google Fonts.

Al definir el tipo de texto asociado a una clase css con la propiedad font-family indicamos al navegador, que debe intentar usar esa fuente en particular para darle la apariencia tipográfica a los textos de ese elemento html.

Agregando fuente a nuestro proyecto

Ahora sí, comencemos a agregar estilos. Abramos el archivo styles.css y borremos el contenido si es que lo tiene y agreguemos la siguiente propiedad:

body {
    font-family: Arial, Helvetica, sans-serif;
}

font-family nos permitirá cambiar la fuente del elemento seleccionado. Observemos que hemos seleccionado una fuente que ya viene en nuestro sistema operativo y el cambio se ha aplicado a todos los hijos que se encuentren dentro de la etiqueta <body>.

Pero ¿cómo agrego otra fuente que no esté en mi sistema operativo?

Existen diferentes formas, algunas de ellas son subir las fuentes directo a nuestro servidor, comprar alguna licencia o fuente directamente en algún sitio web pero una de las más sencillas es usar las fuentes que nos ofrece el servicio de Google Fonts.

Así que busquemos las siguientes fuentes:

Y la forma de agregarlas es darle clic en el botón de más, y desplegar el cuadro que aparece abajo, donde seleccionaremos la pestaña EMBED y copiaremos el link para poner la font en nuestro sitio. Observemos que por default solo nos agrega los tamaños regular 400 de ambas fuentes, así que en la parte de CUSTOMIZE seleccionemos tambien las opciones de bold 700 de ambas fuentes.

<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700|Roboto:400,700" rel="stylesheet">

El código copiado lo tenemos que poner dentro de la sección del head del documento HTML, antes de nuestra hoja de estilos.

<head>
    <meta charset="utf-8"/>
    <title>Playeras Geeks</title>
    <link rel="icon" href="img/tshirt.png" type="img/png">
    <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700|Roboto:400,700" rel="stylesheet">
    <link rel="stylesheet" href="css/styles.css">
</head>

Y para aplicarla al sitio web observemos que dentro del cuadro de Google Fonts hay una opción que dice Specify in CSS, donde nos indica los valores de la propiedad font-family:

font-family: 'Roboto', sans-serif;
font-family: 'Playfair Display', serif;

Así que usaremos una para títulos y otra para cuerpo del texto, de la siguiente manera:

body {
    font-family: 'Roboto', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif;
}

Recursos