Sobre fuentes

css fuente tipografía

4 Minutos

16 may 2024

23 may 2024

Cuando queremos cambiar el aspecto de nuestro sitio web, una de las formas más fáciles es modificando la fuente o tipografía.

Por ejemplo, este sitio está usando la fuente por defecto:

Visualización

Mientas que este, está usando la regla:

body {
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}

Visualización

De esta manera, con una sola regla de CSS, podemos mejorar su apariencia considerablemente.

Cómo usar font-family

Cuando usamos la propiedad font-family tenemos que usar múltiples nombres de fuente separados por comas. Esto se debe a que algunos sistemas pueden no tener la tipografía necesaria y deben de tener configurado un respaldo.

Esto se debe a que el navegador tratará de utilizar la primera fuente en la lista. Si no está disponible tratará de usar la siguiente, y así sucesivamente.

Es decir que en font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif, la prioridad va en cascada:

Franklin Gothic Medium
Arial Narrow
Arial
sans-serif

Cuando el nombre de la tipografía es más de una palabra, tenemos que usar dobles comillas para encerrarlo.

Si es una sola palabra, o el nombre no tiene espacios, puede ser escrito sin comillas.

Fuentes por defecto

Es recomendable poner una tipografía genérica como último respaldo.

Los nombres que podemos usar son:

serif
sans-serif
monospace
cursive
fantasy
system-ui
ui-serif
ui-sans-serif
ui-monospace
ui-rounded
math
fangsong

Fuentes de internet

Una de las maneras más comunes de usar tipografías distintas a las por defecto es por medio de servicios web. El más popular es Google Fonts.

Para usar una fuente de este sitio, debemos seleccionarla:

Dar clic en Obtener fuente (Get font)

Obtener código

En la pestaña de web, nos dará el código necesario para agregar y usar dicha fuente.

Existen dos métodos

<link>

Podemos agregar el código de etiquetas <link> en la cabeza de nuestro documento.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mi primera página</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <h1>Mi primera página</h1>
    <p>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Adipisci quos
      quasi facilis itaque eligendi fugit nesciunt explicabo quas alias
      excepturi nulla vero possimus veniam pariatur laborum qui, quaerat
      laboriosam tenetur!
    </p>
  </body>
</html>

Y agregar la regla de CSS en los elementos donde la vayamos a utilizar.

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

@import

Podemos dar clic en el método @import y copiar el código generado:

Debemos pegarlo en la cabeza de nuestro documento y agregar la regla de CSS en los elementos donde la vayamos a utilizar.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mi primera página</title>
    <style>
      @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");

      body {
        font-family: "Roboto", sans-serif;
      }
    </style>
  </head>
  <body>
    <h1>Mi primera página</h1>
    <p>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Adipisci quos
      quasi facilis itaque eligendi fugit nesciunt explicabo quas alias
      excepturi nulla vero possimus veniam pariatur laborum qui, quaerat
      laboriosam tenetur!
    </p>
  </body>
</html>

Alternativamente, podemos deshacernos de las etiquetas <style> y pegar el @import en nuestro propio archivo .css.

Así se vería nuestro ejemplo usando cualquiera de los dos métodos:

Visualización

Comentarios

Esta artículo aparece en estas rutas de aprendizaje

Lo vamos a neCSSitar

Aprenderemos desde los conceptos básicos de CSS hasta los conceptos más avanzados

DEV

Web Dev (Frontend)

Aprendamos HTML, CSS y JS para navegador

En construcción

Sobre fuentes

Cómo usar font-family

Fuentes por defecto

Fuentes de internet

<link>

@import

Comentarios

Compartir

Esta artículo aparece en estas rutas de aprendizaje