Regla CSS @font-face

La regla CSS @font-face es una regla que permite a los diseñadores web definir fuentes en línea para mostrar texto en su sitio web. Así, los diseñadores web ya no necesitarán usar "fuentes seguras para la web".

Primero debemos definir un nombre para la fuente (como myFirstFont) en la nueva regla @font-face y luego indicar el archivo de la fuente.

Cada navegador tiene su propio formato. Usamos los formatos ttf, otf, eot, svg, svgz, woff, woff2.

OTF / TTF

WOFF se creó para ofrecer una alternativa comprimida y optimizada para la web a las fuentes OpenType y TrueType, reduciendo el tamaño del archivo y el tiempo de carga. Sin embargo, las capacidades de OpenType pueden interesar a muchos diseñadores (como las ligaduras).

EOT

El formato Embedded Open Type, creado por Microsoft (los innovadores originales de @font-face) hace más de 15 años, es el único formato que IE8 y versiones anteriores reconocerán al usar @font-face.

SVG/SVGZ

Scalable Vector Graphics (Font) es un formato de fuente vectorial. Sin embargo, las fuentes SVG han quedado obsoletas y se han eliminado de todos los navegadores modernos. Ya no se recomienda su uso en nuevos proyectos. SVGZ es la versión comprimida de SVG.

WOFF/WOFF2

Web Open Font Format, creado para su uso en la web y desarrollado por Mozilla junto con otras organizaciones, las fuentes WOFF suelen cargarse más rápido que otros formatos porque usan una versión comprimida de la estructura utilizada por las fuentes OpenType (OTF) y TrueType (TTF). WOFF2 es la nueva generación de WOFF y tiene una mejor compresión.

Al usar fuentes personalizadas, debemos tener en cuenta las siguientes consideraciones:

El tamaño del archivo. Se recomienda usar opciones que tengan versiones más ligeras.
Las limitaciones del conjunto de caracteres. Puedes limitar los conjuntos de fuentes para cargar solo las fuentes que se usan.
Fuentes del sistema para pantallas pequeñas. Una de las soluciones es apuntar a pantallas más grandes cuando la fuente personalizada se carga con @media.

Syntax

Sintaxis de la regla CSS @font-face

css

@font-face {
  font-properties
}

Ejemplo de la regla @font-face:

Ejemplo de la regla CSS @font-face con formatos EOT, TTF, SVG, WOFF y WOFF2

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      @font-face {
        font-family: 'myFont';
        src: url('webfont.woff2') format('woff2'),
             url('webfont.woff') format('woff'),
             url('webfont.ttf') format('truetype'),
             url('webfont.eot') format('embedded-opentype');
        font-display: swap;
      }
      div {
        font-family: myFont, sans-serif;
      }
    </style>
  </head>
  <body>
    <h2>@font-face example</h2>
    <div>
      The @font-face CSS at-rule specifies a custom font with which to display text; the font can be loaded from either a remote server or a locally-installed font on the user's computer. If the local() function is provided, specifying a font name to look for on the user's computer, and the user agent finds a match, that local font is used. Otherwise, the font resource specified using the url() function is downloaded and used.
    </div>
    <p>
      The @font-face at-rule may be used not only at the top level of a CSS, but also inside any CSS conditional-group at-rule.
    </p>
  </body>
</html>

Try it Yourself »

Compatibilidad con navegadores

Compatibilidad más amplia posible con navegadores

Este es el método con la compatibilidad más amplia. Antes de cualquier estilo, debemos añadir la regla @font-face a la hoja de estilos.

Regla @font-face

css

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.woff2') format('woff2'),
       url('webfont.woff') format('woff'),
       url('webfont.ttf') format('truetype'),
       url('webfont.eot') format('embedded-opentype');
  font-display: swap;
}

Luego, se usa para dar estilo a los elementos de la siguiente manera:

Regla CSS @font-face

css

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

Compatibilidad práctica con navegadores

Dado que WOFF y WOFF2 se usan comúnmente, podemos usar lo siguiente:

Regla CSS @font-face

css

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff');
  font-display: swap;
}

Compatibilidad progresiva máxima con navegadores

Si estamos trabajando con WOFF, se puede esperar que WOFF2 pueda usarse en algún momento:

Regla CSS @font-face

css

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap;
}

Técnicas alternativas

En algunas situaciones, puede ser mejor usar una fuente alojada. Esto lo ofrece Google Fonts como una forma de usar sus fuentes. En el siguiente código, se usa @import para cargar una fuente desde Google Fonts:

Regla CSS @font-face

css

@import url(//fonts.googleapis.com/css?family=Open+Sans);

Luego se puede usar para dar estilo a los elementos:

Regla CSS @font-face

css

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

Un servicio alojado puede tener una ventaja. Probablemente incluirá todas las variaciones del archivo de fuente, proporcionando una amplia compatibilidad entre navegadores, y no habrá necesidad de alojar los archivos por nuestra cuenta.

Regla CSS @font-face

css

@import url(//fonts.googleapis.com/css?family=Open+Sans);
body {
  background: #efefef;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 24px;
  padding: 50px;
}

Del mismo modo, se puede enlazar una hoja de estilos al mismo recurso en el <head> del documento HTML y no en el CSS.

HTML

html

<link href='//fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

Luego, los elementos se pueden estilizar como con los otros métodos:

CSS

css

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

De nuevo, las reglas @font-face se importan, pero se añaden al <head> de HTML:

CSS

css

body {
  background: #efefef;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 24px;
  padding: 50px;
}

h1 {
  font-size: 30px;
  line-height: 45px;
  font-family: 'Open Sans', sans-serif;
}

Ejemplo de la regla @font-face usando Google Fonts:

HTML

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <link href="https://fonts.googleapis.com/css?family=Courier+Prime:400,700&display=swap" rel="stylesheet" />
    <style> 
      h2{
      font-family: 'Courier Prime', monospace;
      font-weight:700;
      }
      div {
      font-family: 'Courier Prime', monospace;
      }
      p{
      font-family: 'Courier Prime', monospace;
      }
    </style>
  </head>
  <body>
    <h2>@font-face example</h2>
    <div>
      The @font-face CSS at-rule specifies a custom font with which to display text; the font can be loaded from either a remote server or a locally-installed font on the user's computer. If the local() function is provided, specifying a font name to look for on the user's computer, and the user agent finds a match, that local font is used. Otherwise, the font resource specified using the url() function is downloaded and used.
    </div>
    <p>
      The @font-face at-rule may be used not only at the top level of a CSS, but also inside any CSS conditional-group at-rule.
    </p>
  </body>
</html>

Try it Yourself »

Valores

Descriptor de fuente	Valores	Descripción
font-family	name	Define el nombre de la fuente y es un requisito.
src	URL	Define la URL desde la que se descargará la fuente y es un requisito.
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	Define cómo se estirará la fuente. Su valor predeterminado es normal y es opcional.
font-style	normal italic oblique	Define cómo se estilizará la fuente. Su valor predeterminado es normal y es opcional.
font-weight	normal bold 100 200 300 400 500 600 700 800 900	Define el grosor de la fuente. Su valor predeterminado es normal y es opcional.
unicode-range	unicode-range	Define el rango de caracteres Unicode que admite la fuente. Su valor predeterminado es U+0-10FFFF y es opcional.

Practice

What is the purpose of the @font-face rule in CSS?

To specify a custom font in your web pageTo change the background color of a websiteTo add an external style sheet to a HTML documentTo embed a font into a web pageTo control the layout of a web page

Regla CSS @font-face ​

OTF / TTF ​

EOT ​

SVG/SVGZ ​

WOFF/WOFF2 ​

Syntax ​

Ejemplo de la regla @font-face: ​

Compatibilidad con navegadores ​

Compatibilidad más amplia posible con navegadores ​

Compatibilidad práctica con navegadores ​

Compatibilidad progresiva máxima con navegadores ​

Técnicas alternativas ​

Ejemplo de la regla @font-face usando Google Fonts: ​

Valores ​

Practice ​

Regla CSS @font-face

OTF / TTF

EOT

SVG/SVGZ

WOFF/WOFF2

Syntax

Ejemplo de la regla @font-face:

Compatibilidad con navegadores

Compatibilidad más amplia posible con navegadores

Compatibilidad práctica con navegadores

Compatibilidad progresiva máxima con navegadores

Técnicas alternativas

Ejemplo de la regla @font-face usando Google Fonts:

Valores

Practice