Seleccionar página


Las fuentes web CSS permiten a los diseñadores web usar fuentes que no están instaladas en el ordenador del usuario.

Cuando haya encontrado/comprado la fuente que desea usar, simplemente incluya el archivo de fuente en su servidor web y se cargará automáticamente cuando lo necesite.

Sus fuentes «propias» se definen dentro de la @font-face regla CSS.

Diferentes formatos de fuente

Fuentes TrueType (TTF)

TrueType es un estándar de fuente desarrollado a fines de la década de 1980 por Apple y Microsoft. TrueType es el formato de fuente más común para los sistemas operativos Mac OS y Microsoft Windows.

Fuentes OpenType (OTF)

OpenType es un formato para fuentes de computadora escalables. Fue construido en TrueType y es una marca registrada de Microsoft. Las fuentes OpenType se usan comúnmente hoy en día en las principales plataformas informáticas.

El formato de fuente abierta web (WOFF)

WOFF es un formato de fuente para usar en páginas web. Fue desarrollado en 2009 y ahora es una recomendación del W3C. WOFF es esencialmente OpenType o TrueType con compresión y metadatos adicionales. El objetivo es admitir la distribución de fuentes desde un servidor a un cliente a través de una red con restricciones de ancho de banda.

El formato de fuente abierta web (WOFF 2.0)

Fuente TrueType/OpenType que proporciona una mejor compresión que WOFF 1.0.

Fuentes SVG/Formas

Las fuentes SVG permiten usar SVG como glifos al mostrar texto. La especificación SVG 1.1 define un módulo de fuente que permite la creación de fuentes dentro de un documento SVG. También puede aplicar CSS a documentos SVG y la regla @font-face se puede aplicar al texto en documentos SVG.

Fuentes OpenType incrustadas (EOT)

Las fuentes EOT son una forma compacta de fuentes OpenType diseñadas por Microsoft para su uso como fuentes incrustadas en páginas web.

USAR UNA FUENTE DE TEXTO

En la @font-face regla; primero defina un nombre para la fuente (por ejemplo, myFirstFont) y luego apunte al archivo de fuente.

Sugerencia: utilice siempre letras minúsculas para la URL de la fuente. Las letras mayúsculas pueden dar resultados inesperados en IE.

Para usar la fuente para un elemento HTML, consulte el nombre de la fuente (myFirstFont) a través de la font-family propiedad:

Ejemplo:

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

div {
  font-family: myFirstFont;
}

El archivo «sansation_bold.woff» es otro archivo de fuente que contiene los caracteres en negrita para la fuente Sansation.

Los navegadores usarán esto siempre que un fragmento de texto con la familia de fuentes «myFirstFont» deba mostrarse en negrita.

De esta manera puedes tener muchas @font-face reglas para la misma fuente.

USO DE FUENTE HTML WEB

Vamos a ver a continuación el código HTML, y el resultado de aplicarlo en la web con un ejemplo.

EL CÓDIGO HTML Y CSS

<!DOCTYPE html>
<html>
<head>
<style> 
@font-face {
   font-family: myFirstFont;
   src: url(sansation_light.woff);
}

* {
   font-family: myFirstFont;
}
</style>
</head>
<body>

<h1> La Regla @font-face </h1>

<div>
Con CSS, los sitios web pueden usar fuentes distintas a las fuentes "seguras para la web" "web-safe" preselecionadas.
</div>

</body>
</html>

EJEMPLO DE APLICACIÓN DE FUENTE DE TEXTO

La Regla @font-face

Con CSS, los sitios web pueden usar fuentes distintas a las fuentes «seguras para la web» «web-safe» preselecionadas.

Descriptores de fuentes CSS

La siguiente tabla enumera todos los descriptores de fuentes que se pueden definir dentro de la @font-face regla:

DESCRIPTORVALUESDESCRIPTION
font-familynameRequired. Defines a name for the font
srcURLRequired. Defines the URL of the font file
font-strechnormal
condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded
Optional. Defines how the font should be stretched. Default is «normal»
font-stylenormal
italic
oblique
Optional. Defines how the font should be styled. Default is «normal»
font-weightnormal
bold
100
200
300
400
500
600
700
800
900
Optional. Defines the boldness of the font. Default is «normal»
TABLA DE DESCRIPTORES DE FUENTES CSS