CSS Font

La propiedad “font” en CSS es una propiedad shorthand (atajo) que se utiliza para establecer varios estilos de fuente en un solo lugar. Esta propiedad es muy útil para ahorrar tiempo y simplificar el código al no tener que escribir varias propiedades separadas.

La propiedad “font” se utiliza para establecer la familia de fuentes, el tamaño, el estilo y el peso de la fuente. Los valores pueden ser especificados en una sola línea y en el orden que se desee.

La sintaxis de la propiedad “font” es la siguiente:

font: [font-style] [font-variant] [font-weight] font-size/line-height font-family;
Lenguaje del código: texto plano (plaintext)

La guía definitiva de HTML5 y CSS3: (Spanish Edition)

Ver Ofertas en Amazon

HTML 5, JavaScript y CSS: Crea tu web y apps con el estánd...

Ver Ofertas en Amazon

CSS: Diseño web (Desarrollo web nº 2) (Spanish Edition)

Ver Ofertas en Amazon

Ejemplo de uso

Aquí te dejo un ejemplo de código HTML y CSS que utiliza la propiedad “font” para establecer varios estilos de fuente en un párrafo:

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        font: italic small-caps bold 12px/1.5 Arial, sans-serif;
      }
    </style>
  </head>
  <body>
    <p>Este es un ejemplo de párrafo con estilos de fuente establecidos mediante la propiedad "font" en CSS.</p>
  </body>
</html>
Lenguaje del código: HTML, XML (xml)

En este ejemplo, se establece en el CSS que el elemento “p” tendrá una fuente Arial en negrita, en cursiva, con letras mayúsculas y minúsculas y tamaño 12px, con una línea de alto 1.5. Si Arial no está disponible en el sistema, se usará una fuente “sans-serif” como alternativa.

Es importante mencionar que para que el código anterior funcione, es necesario que la fuente Arial esté instalada en el sistema donde se esté visualizando la página.

Propiedades relacionadas

Existen varias propiedades relacionadas con la propiedad “font” en CSS que te permiten establecer estilos de fuente de manera más específica. Algunas de estas propiedades son:

  • font-style: Especifica el estilo de la fuente. Puede ser “normal”, “italic” o “oblique”.
  • font-variant: Especifica la variante de la fuente. Puede ser “normal” o “small-caps”.
  • font-weight: Especifica el grosor de la fuente. Puede ser “normal”, “bold” o un valor numérico entre 100 y 900.
  • font-size: Especifica el tamaño de la fuente. Puede ser un valor en píxeles o en unidades relativas como “em” o “rem”.
  • line-height: Especifica la altura de línea. Puede ser un valor numérico o una unidad de medida.
  • font-family: Especifica la familia de fuentes a utilizar. Puede ser una o varias familias de fuentes separadas por comas.

Estilo de fuente

La propiedad “font-style” en CSS se utiliza para establecer el estilo de la fuente. Los valores posibles son “normal”, “italic” y “oblique”.

  • El valor normal es el valor predeterminado y especifica una fuente sin cursiva.
  • El valor italic especifica una fuente en cursiva.
  • El valor oblique especifica una fuente inclinada, que se ve similar a una fuente en cursiva, pero no es necesariamente una fuente cursiva.

Aquí te dejo un ejemplo de código HTML y CSS que utiliza la propiedad “font-style” para establecer el estilo de un párrafo:

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        font-style: italic;
      }
    </style>
  </head>
  <body>
    <p>Este es un ejemplo de párrafo con estilo de fuente establecido mediante la propiedad "font-style" en CSS.</p>
  </body>
</html>
Lenguaje del código: HTML, XML (xml)

En este ejemplo, se establece en el CSS que el elemento “p” tendrá una fuente en cursiva, el cual es especificado con font-style: italic.

Además de esto, también se puede utilizar font-style: oblique para inclinar la fuente, pero debes tener en cuenta que no todas las fuentes tienen una versión oblique, por lo que en ese caso, el navegador utilizará una versión simulada de la fuente inclinada.

Es importante mencionar que la propiedad “font-style” puede ser utilizada junto con la propiedad “font” para establecer varios estilos de fuente en un solo lugar.

Variante de fuente

La propiedad “font-variant” en CSS se utiliza para establecer la variante de la fuente. El valor posible es “small-caps” (pequeñas mayúsculas).

  • El valor small-caps especifica que las letras minúsculas de un texto deben ser mostradas en versión reducida de las mayúsculas (pequeñas mayúsculas).

Aquí te dejo un ejemplo de código HTML y CSS que utiliza la propiedad «Font-variant” para establecer la variante de un párrafo:

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        font-variant: small-caps;
      }
    </style>
  </head>
  <body>
    <p>Este es un ejemplo de párrafo con variante de fuente establecida mediante la propiedad "font-variant" en CSS.</p>
  </body>
</html>
Lenguaje del código: HTML, XML (xml)

En este ejemplo, se establece en el CSS que el elemento “p” tendrá las letras minúsculas en versión reducida de las mayúsculas (pequeñas mayúsculas), el cual es especificado con font-variant: small-caps.

Es importante mencionar que no todas las fuentes tienen una versión small-caps, por lo que en ese caso, el navegador utilizará una versión simulada de las pequeñas mayúsculas.

Al igual que en font-style, la propiedad “font-variant” puede ser utilizada junto con la propiedad “font” para establecer varios estilos de fuente en un solo lugar.

Por ejemplo:

p {
  font: italic small-caps 16px Arial, sans-serif;
}
Lenguaje del código: CSS (css)

En este ejemplo se establece la propiedad “font” con valores para el estilo de la fuente (italic), variante de la fuente (small-caps), tamaño de la fuente (16px) y familia de la fuente (Arial, sans-serif)

Es importante mencionar que el uso de font-variant: small-caps es útil para aumentar la legibilidad y dar un aspecto más profesional a tu página web, pero su uso debe ser moderado porque un abuso de small-caps puede ser difícil de leer.

Grosor de la fuente

La propiedad “font-weight” en CSS se utiliza para establecer el grosor de la fuente. Los valores posibles son “normal”, “bold” y un rango de valores numéricos entre 100 y 900.

  • El valor normal es el valor predeterminado y especifica una fuente con grosor normal.
  • El valor bold especifica una fuente con grosor negrita.
  • Los valores numéricos entre 100 y 900 especifican diferentes niveles de grosor de la fuente, donde un valor más alto significa una fuente más gruesa.

Aquí te dejo un ejemplo de código HTML y CSS que utiliza la propiedad “font-weight” para establecer el grosor de un párrafo:

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <p>Este es un ejemplo de párrafo con grosor de fuente establecido mediante la propiedad "font-weight" en CSS.</p>
  </body>
</html>
Lenguaje del código: HTML, XML (xml)

En este ejemplo se establece en el CSS que el elemento “p” tendrá una fuente con grosor negrita, el cual es especificado con font-weight: bold.

También se pueden utilizar valores numéricos para establecer el grosor de la fuente, por ejemplo:

p {
    font-weight: 700;
  }
Lenguaje del código: CSS (css)

En este caso se establece un grosor de 700, que se considera como negrita.

Es importante mencionar que no todas las fuentes tienen una versión con todos los niveles de grosor, por lo que en ese caso, el navegador utilizará una versión simulada del grosor de la fuente.

Al igual que en font-style y font-variant, la propiedad font-weight puede ser utilizada junto con la propiedad “font” para establecer varios estilos de fuente en un solo lugar.

Tamaño de la fuente

La propiedad “font-size” en CSS se utiliza para establecer el tamaño de la fuente en un elemento de HTML. Los valores pueden ser especificados en píxeles (px), puntos (pt), ems (em) o rems (rem).

Aquí te dejo un ejemplo de código HTML y CSS que utiliza la propiedad “font-size” para establecer el tamaño de un párrafo:

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        font-size: 16px;
      }
    </style>
  </head>
  <body>
    <p>Este es un ejemplo de párrafo con tamaño de fuente establecido mediante la propiedad "font-size" en CSS.</p>
  </body>
</html>
Lenguaje del código: HTML, XML (xml)

En este ejemplo se establece en el CSS que el elemento “p” tendrá un tamaño de fuente de 16px, el cual es especificado con font-size: 16px.

Por otro lado, también se pueden utilizar valores absolutos como “xx-small”, “x-small”, “small”, “medium”, “large”, “x-large” y “xx-large”, para establecer el tamaño de la fuente.

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        font-size: xx-large;
      }
    </style>
  </head>
  <body>
    <p>Este es un ejemplo de párrafo con tamaño de fuente establecido mediante la propiedad "font-size" en CSS.</p>
  </body>
</html>
Lenguaje del código: HTML, XML (xml)

En este caso, el tamaño de la fuente del elemento “p” será el tamaño más grande disponible.

También es posible utilizar porcentajes (%), para establecer el tamaño de la fuente en relación al tamaño de la fuente del elemento padre.

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        font-size: 150%;
      }
    </style>
  </head>
  <body>
    <p>Este es un ejemplo de párrafo con tamaño de fuente establecido mediante la propiedad "font-size" en CSS.</p>
  </body>
</html>
Lenguaje del código: HTML, XML (xml)

En este último ejemplo, el tamaño de la fuente del elemento “p” será el 150% del tamaño de la fuente del elemento padre.

Es importante mencionar que el uso de rem es recomendado, ya que es una unidad relativa al elemento raíz, lo que permite una mejor escalabilidad en la página.

Al igual que en font-style, font-variant, font-weight y font-size, la propiedad “font” puede ser utilizada para establecer varios estilos de fuente en un solo lugar.

Altura de la línea

La propiedad “line-height” en CSS se utiliza para establecer la altura de línea de un elemento de texto. Los valores pueden ser especificados en unidades absolutas (como píxeles, puntos), relativas (como ems, rems) o en forma de porcentaje.

Aquí te dejo algunos ejemplos de cómo se puede utilizar la propiedad “line-height” en CSS:

  • Establecer la altura de línea con un valor numérico:
p {
  /* Establece una altura de línea de 1.5 veces la altura de la fuente */
  line-height: 1.5;
}
Lenguaje del código: CSS (css)
  • Establecer la altura de línea con una unidad de medida:
p {
  /* Establece una altura de línea de 20px */
  line-height: 20px;
}
Lenguaje del código: CSS (css)
  • Establecer la altura de línea con un porcentaje:
p {
  /* Establece una altura de línea del 150% de la altura de la fuente */
  line-height: 150%;
}
Lenguaje del código: CSS (css)
  • Establecer la altura de línea con un valor relativo a la altura de la fuente:
p {
  /* Establece una altura de línea de 1.2 veces la altura de la fuente */
  line-height: 1.2em;
}
Lenguaje del código: CSS (css)

Familia tipográfica

La propiedad “font-family” en CSS se utiliza para establecer la familia de fuentes de un elemento de texto. Los valores pueden ser nombres de familias de fuentes específicas (como “Arial” o “Times New Roman”) o nombres genéricos (como “serif” o “sans-serif”).

Aquí te dejo algunos ejemplos de cómo se puede utilizar la propiedad “font-family” en CSS con comentarios dentro del código:

  • Establecer una familia de fuentes específica:
p {
  /* Establece la familia de fuentes "Arial" */
  font-family: Arial;
}
Lenguaje del código: CSS (css)
  • Establecer una familia de fuentes genérica:
p {
  /* Establece una familia de fuentes "sans-serif" */
  font-family: sans-serif;
}
Lenguaje del código: CSS (css)
  • Establecer varias familias de fuentes como una lista de preferencias:
p {
  /* Establece una lista de preferencias de familias de fuentes: "Arial", "Helvetica", "sans-serif" */
  font-family: Arial, Helvetica, sans-serif;
}
Lenguaje del código: CSS (css)
  • Establecer una familia de fuentes personalizada (si está disponible en el sistema del usuario):
<code>p {
  /* Establece una familia de fuentes personalizada "MiFuente" */
  font-family: MiFuente;
}
</code>
Lenguaje del código: CSS (css)

Algunas familias de fuentes

Aquí te dejo una lista de algunas familias de fuentes comunes que se pueden utilizar en la propiedad “font-family” de CSS:

  • Serif: Times New Roman, Georgia, Palatino, Garamond
  • Sans-serif: Arial, Helvetica, Verdana, Tahoma
  • Monospace: Courier New, Lucida Console, Monaco
  • Display: Impact, Arial Black, Copperplate Gothic
  • Script: Brush Script MT, Lucida Handwriting, Freestyle Script
  • Handwriting: Bradley Hand, Lucida Handwriting, Comic Sans MS

Además de estas familias de fuentes comunes, también puedes utilizar familias de fuentes personalizadas si están disponibles en el sistema del usuario.

Ten en cuenta que el sistema del usuario debe tener las fuentes que se van a utilizar instaladas para que se puedan mostrar correctamente, si no es así se utilizará una fuente por defecto.

Fuentes seguras

Existen varias fuentes web seguras de hojas de estilo en cascada (CSS) que puedes utilizar en tus proyectos.

Aquí te dejo una lista de fuentes web seguras e importantes que debes tener en cuenta al momento de utilizarlas en tus proyectos de CSS:

  1. Arial
  2. Times New Roman
  3. Verdana
  4. Helvetica
  5. Georgia
  6. Trebuchet MS
  7. Calibri
  8. Arial Black
  9. Impact
  10. Lucida Sans Unicode

Estas fuentes son ampliamente utilizadas en el diseño web y son soportadas en la mayoría de los dispositivos y navegadores.

Al utilizar estas fuentes, puedes estar seguro de que tu diseño se verá consistente en la mayoría de los dispositivos y plataformas.

Sin embargo, es importante que siempre verifiques la licencia de la fuente antes de utilizarla en un proyecto y también es recomendable considerar utilizar algunas de las fuentes mencionadas en mi respuesta anterior para darle un toque distintivo a tu diseño.

Ejemplos:

  1. Arial:
/* Establece Arial como la fuente principal del sitio */
body {
    font-family: Arial, sans-serif;
}
Lenguaje del código: CSS (css)
  1. Times New Roman:
/* Utiliza Times New Roman para los títulos */
h1, h2, h3 {
    font-family: "Times New Roman", serif;
}
Lenguaje del código: CSS (css)
  1. Verdana:
/* Utiliza Verdana para los textos de menú */
nav a {
    font-family: Verdana, sans-serif;
}
Lenguaje del código: CSS (css)
  1. Helvetica:
/* Utiliza Helvetica para los botones */
.btn {
    font-family: Helvetica, sans-serif;
}Lenguaje del código: CSS (css)
  1. Georgia:
/* Utiliza Georgia para los textos de bloque de citas */
blockquote {
    font-family: Georgia, serif;
}
Lenguaje del código: CSS (css)
  1. Trebuchet MS:
/* Utiliza Trebuchet MS para los textos de párrafo */
p {
    font-family: "Trebuchet MS", sans-serif;
}
Lenguaje del código: CSS (css)
  1. Calibri:
/* Utiliza Calibri para los textos de formulario */
input, textarea {
    font-family: Calibri, sans-serif;
}
Lenguaje del código: CSS (css)
  1. Arial Black:
/* Utiliza Arial Black para los títulos de sección */
section h2 {
    font-family: "Arial Black", sans-serif;
}
Lenguaje del código: CSS (css)
  1. Impact:
/* Utiliza Impact para los títulos de los avisos */
.notice h3 {
    font-family: Impact, sans-serif;
}
Lenguaje del código: CSS (css)
  1. Lucida Sans Unicode:
/* Utiliza Lucida Sans Unicode para los textos de pie de página */
footer {
    font-family: "Lucida Sans Unicode", sans-serif;
}
Lenguaje del código: CSS (css)

Ten en cuenta que al especificar varias fuentes en el valor de font-family, el navegador utilizará la primera fuente disponible en el sistema del usuario, si no está disponible usará la siguiente y así sucesivamente.

Fuentes alternativas

En CSS, puedes especificar fuentes alternativas para que el navegador utilice una fuente diferente si la primera opción no está disponible en el sistema del usuario.

Puedes especificar varias opciones de fuentes alternativas separándolas por comas en el valor de la propiedad font-family.

Por ejemplo, si quieres utilizar la fuente “Open Sans” como la principal, pero quieres especificar “Arial” como una fuente alternativa, podrías escribir lo siguiente:

body {
    font-family: 'Open Sans', Arial, sans-serif;
}
Lenguaje del código: CSS (css)

En este ejemplo, el navegador intentará utilizar “Open Sans” primero, pero si no está disponible en el sistema del usuario, usará “Arial” en su lugar.

Además, al final se especifica “sans-serif” para que en caso de no tener ninguna de las dos primeras opciones, utilice una fuente “sans-serif” genérica.

También puedes especificar múltiples opciones de fuentes alternativas para aumentar las posibilidades de que el texto se vea correctamente en todos los dispositivos. Por ejemplo:

nav a {
    font-family: 'Raleway', 'Arial', 'Helvetica', sans-serif;
}
Lenguaje del código: CSS (css)

En este caso, el navegador intentará utilizar “Raleway” primero, si no está disponible utilizará “Arial” y si tampoco está disponible “Helvetica” y si ninguna de las tres está disponible usará una fuente “sans-serif” genérica.

Fuentes de Google

Google Fonts es una biblioteca gratuita de fuentes web que puedes utilizar en tus proyectos CSS. Para utilizar una fuente de Google Fonts en tu sitio, primero debes seleccionar la fuente que deseas utilizar en la página de Google Fonts (https://fonts.google.com/) y luego seguir estos pasos:

  1. Copia el enlace de la fuente o las fuentes que deseas utilizar, te lo proporciona Google Fonts una vez seleccionadas.
  2. Incorpora el enlace en la sección <head> de tu archivo HTML:
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
Lenguaje del código: HTML, XML (xml)
  1. Utiliza la fuente en tu archivo CSS especificando la propiedad font-family:
body {
    font-family: 'Open Sans', sans-serif;
}
Lenguaje del código: CSS (css)

Es importante mencionar que algunas de las fuentes de Google tienen distintos estilos, para utilizarlos debes especificarlos en el enlace que proporciona Google Fonts, por ejemplo:

<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap" rel="stylesheet">
Lenguaje del código: HTML, XML (xml)

Más ejemplos

Aquí te doy un ejemplo de cómo utilizar una fuente de Google Fonts en tu proyecto web:

<!DOCTYPE html>
<html>
<head>
    <title>Mi sitio web</title>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
    <style>
        /* Utiliza la fuente Open Sans para el cuerpo del texto */
        body {
            font-family: 'Open Sans', sans-serif;
        }
        /* Utiliza la fuente Open Sans para los títulos */
        h1, h2, h3 {
            font-family: 'Open Sans', sans-serif;
        }
    </style>
</head>
<body>
    <h1>Bienvenido a mi sitio web</h1>
    <p>Este es un ejemplo de cómo utilizar una fuente de Google Fonts en tu proyecto.</p>
</body>
</html>
Lenguaje del código: HTML, XML (xml)

En este ejemplo, se utiliza la fuente “Open Sans” para el cuerpo del texto y los títulos. El enlace a la fuente se incluye en la sección <head> del archivo HTML y se especifica la propiedad font-family en la hoja de estilos CSS.

Ten en cuenta que debes seguir las políticas de uso de Google Fonts antes de utilizar las fuentes en un proyecto comercial.