En esta guía, se explica cómo usar la API de Google Fonts para agregar fuentes a tus páginas web. No necesitas programar. Solo debes agregar un vínculo especial de hoja de estilo a tu documento HTML y, luego, consultar la fuente en un estilo CSS.
Ejemplo rápido:
Este es un ejemplo. Copia y pega el siguiente HTML en un archivo:
<html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine"> <style> body { font-family: 'Tangerine', serif; font-size: 48px; } </style> </head> <body> <div>Making the Web Beautiful!</div> </body> </html>
Luego, abre el archivo en un navegador web moderno. Deberías ver una página que muestre lo siguiente, en la fuente llamada Tangerine:
Esa oración es texto común, por lo que puedes cambiar su apariencia con CSS. Intenta agregar una sombra al diseño del ejemplo anterior de la siguiente manera:
body { font-family: 'Tangerine', serif; font-size: 48px; text-shadow: 4px 4px 4px #aaa; }
Ahora deberías ver una sombra paralela debajo del texto:
Eso es solo el comienzo de lo que puedes hacer con la API de Fonts y CSS.
Descripción general
Puedes comenzar a usar la API de Google Fonts en solo dos pasos:
Agrega un vínculo de hoja de estilo para solicitar las fuentes web deseadas:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Font+Name">
Aplica diseño a un elemento con la fuente web solicitada, ya sea en una hoja de estilo:
.css-selector { font-family: 'Font Name', serif; }
o con un estilo intercalado en el propio elemento:
<div style="font-family: 'Font Name', serif;">Your text</div>
Para obtener una lista de las fuentes que puedes usar, consulta Google Fonts.
Cómo especificar familias de fuentes y estilos en una URL de hoja de estilo
Para determinar qué URL usar en el vínculo de tu hoja de estilo, comienza con la URL base de la API de Google Fonts:
https://fonts.googleapis.com/css
Luego, agrega el parámetro de URL family=
, con uno o más nombres y estilos de familia de fuentes.
Por ejemplo, para solicitar la fuente Inconsolata, haz lo siguiente:
https://fonts.googleapis.com/css?family=Inconsolata
Para solicitar varias familias de fuentes, separa los nombres con un carácter de barra vertical (|
).
Por ejemplo, para solicitar las fuentes Tangerine, Inconsolata y Droid Sans:
https://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans
La solicitud de varias fuentes te permite usar todas esas fuentes en tu página. (Sin embargo, no te excedas, la mayoría de las páginas no necesitan muchas fuentes, y solicitar muchas puede hacer que la carga sea lenta).
La API de Google Fonts proporciona la versión normal de las fuentes solicitadas de forma predeterminada. Para solicitar otros estilos o grosores, agrega dos puntos (:
) al nombre de la fuente, seguido de una lista de estilos o grosores separados por comas (,
).
Por ejemplo:
https://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans
Si quieres saber qué estilos y grosores están disponibles para una fuente determinada, consulta la ficha de la fuente en Google Fonts.
Para cada diseño que solicites, puedes proporcionar el nombre completo o una abreviatura. En el caso de los pesos, también puedes especificar un peso numérico:
Estilo | Especificadores |
---|---|
cursiva | italic o i |
negrita | bold o b , o un peso numérico, como 700 |
negrita y cursiva | bolditalic o bi |
Por ejemplo, para solicitar cursiva de Cantarell y negrita de Droid Serif, puedes usar cualquiera de las siguientes URLs:
https://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:b https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:700
Usar font-display
font-display te permite controlar lo que sucede cuando la fuente no está disponible. Por lo general, es adecuado especificar un valor distinto del auto
predeterminado.
Pasa el valor deseado en el parámetro display
de la cadena de consulta:
https://fonts.googleapis.com/css?family=Roboto&display=swap
Especifica subconjuntos de secuencias de comandos
Algunas de las fuentes del directorio de fuentes de Google admiten varias secuencias de comandos (como el latín, el cirílico y el griego). Para especificar qué subconjuntos se deben descargar, el parámetro del subconjunto se debe adjuntar a la URL.
Por ejemplo, para solicitar el subconjunto cirílico de la fuente Roboto Mono, la URL sería la siguiente:
https://fonts.googleapis.com/css?family=Roboto+Mono&subset=cyrillic
Para solicitar el subconjunto griego de la fuente Roboto Mono, la URL debería ser la siguiente:
https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek
Para solicitar los subconjuntos griego y cirílico de la fuente Roboto Mono, la URL sería la siguiente:
https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek,cyrillic
El subconjunto latino siempre se incluye si está disponible y no es necesario especificarlo. Ten en cuenta que si el navegador de un cliente admite el intervalo Unicode (http://caniuse.com/#feat=font-unicode-range), se ignora el parámetro del subconjunto y el navegador seleccionará entre los subconjuntos compatibles con la fuente a fin de obtener lo que necesita para renderizar el texto.
Para obtener una lista completa de las fuentes y los subconjuntos de fuentes disponibles, consulta Google Fonts.
Cómo optimizar tus solicitudes de fuentes
A menudo, cuando quieras usar una fuente web en tu sitio web o aplicación, sabrás de antemano qué letras necesitarás. Esto suele ocurrir cuando usas una fuente web en un logotipo o encabezado.
En estos casos, debes considerar especificar un valor text=
en la URL de solicitud de fuente. Esto permite que Google muestre un archivo de fuente optimizado para tu solicitud. En algunos casos, esto puede reducir el tamaño del archivo de fuente hasta un 90%.
Para usar esta función, simplemente agrega text=
a tus solicitudes a la API de Google Fonts. Por ejemplo, si solo usas "Inconsolata" para el título de tu blog, puedes colocarlo como valor de text=
. Así se vería la solicitud:
https://fonts.googleapis.com/css?family=Inconsolata&text=Hello
Al igual que con todas las cadenas de consulta, debes codificar como URL el valor:
https://fonts.googleapis.com/css?family=Inconsolata&text=Hello%20World
Esta función también funciona para fuentes internacionales, lo que te permite especificar caracteres UTF-8. Por ejemplo, ¡Hola! se representa de la siguiente manera:
https://fonts.googleapis.com/css?family=Inconsolata&text=%c2%a1Hola!
Cómo habilitar efectos de fuente (beta)
Cuando creas encabezados o textos visibles en tu sitio web, a menudo querrás estilizar el texto de forma decorativa. Para simplificar tu trabajo, Google proporcionó una colección de efectos de fuente que puedes usar con un esfuerzo mínimo para producir un texto visible atractivo. Por ejemplo:
Para usar esta función beta, simplemente agrega effect=
a tu solicitud a la API de Google Fonts y el nombre de clase correspondiente a los elementos HTML que quieres afectar. En nuestro ejemplo anterior, usamos el efecto de fuente shadow-multiple
, por lo que la solicitud se vería de la siguiente manera:
https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple
Para usar el efecto, agrega el nombre de la clase correspondiente a tus elementos HTML. El nombre de clase correspondiente siempre es el nombre del efecto con el prefijo font-effect-
, por lo que el nombre de la clase de shadow-multiple
sería font-effect-shadow-multiple
:
<div class="font-effect-shadow-multiple">This is a font effect!</div>
Puedes solicitar varios efectos si separas los nombres de efectos con un carácter de barra vertical (|
).
https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple|3d-float
A continuación, se incluye una lista completa de todos los efectos de fuente que ofrecemos:
Efecto | Nombre de la API | Nombre de clase | Asistencia |
---|---|---|---|
Anaglifo | anaglyph |
font-effect-anaglyph |
Chrome, Firefox, Opera y Safari |
Señal de ladrillo | brick-sign |
font-effect-brick-sign |
Chrome y Safari |
Lienzo impreso | canvas-print |
font-effect-canvas-print |
Chrome y Safari |
Grafito | crackle |
font-effect-crackle |
Chrome y Safari |
decaying |
font-effect-decaying |
Chrome y Safari | |
Destrucción | destruction |
font-effect-destruction |
Chrome y Safari |
Angustiado | distressed |
font-effect-distressed |
Chrome y Safari |
Madera desgastada | distressed-wood |
font-effect-distressed-wood |
Chrome y Safari |
Emboses | emboss |
font-effect-emboss |
Chrome, Firefox, Opera y Safari |
Departamento de bomberos | fire |
font-effect-fire |
Chrome, Firefox, Opera y Safari |
Animación de fuego | fire-animation |
font-effect-fire-animation |
Chrome, Firefox, Opera y Safari |
Frágil | fragile |
font-effect-fragile |
Chrome y Safari |
Pasto | grass |
font-effect-grass |
Chrome y Safari |
Hielo | ice |
font-effect-ice |
Chrome y Safari |
Mitosis | mitosis |
font-effect-mitosis |
Chrome y Safari |
Neón | neon |
font-effect-neon |
Chrome, Firefox, Opera y Safari |
Contorno | outline |
font-effect-outline |
Chrome, Firefox, Opera y Safari |
Putting | putting-green |
font-effect-putting-green |
Chrome y Safari |
Acero con brazalete | scuffed-steel |
font-effect-scuffed-steel |
Chrome y Safari |
Sombra múltiple | shadow-multiple |
font-effect-shadow-multiple |
Chrome, Firefox, Opera y Safari |
Astillas | splintered |
font-effect-splintered |
Chrome y Safari |
Estática | static |
font-effect-static |
Chrome y Safari |
Lavado de piedra | stonewash |
font-effect-stonewash |
Chrome y Safari |
Tres dimensiones | 3d |
font-effect-3d |
Chrome, Firefox, Opera y Safari |
Flotador tridimensional | 3d-float |
font-effect-3d-float |
Chrome, Firefox, Opera y Safari |
Vintage | vintage |
font-effect-vintage |
Chrome y Safari |
Fondo de pantalla | wallpaper |
font-effect-wallpaper |
Chrome y Safari |
Hay muchas más formas de modificar el estilo de tus fuentes, y CSS permite muchas cosas. Solo te estamos proporcionando algunas ideas para comenzar. Para obtener más ideas, prueba la búsqueda de Google "efectos de texto CSS" y explora muchas de las ideas que ya están en la Web.
Lecturas adicionales
- Consulta una lista completa de las familias de fuentes que proporciona la API de Google Fonts en Google Fonts.
- Obtén información sobre cómo usar el Web Font Loader para tener más control sobre la carga de fuentes.
- Obtén más información sobre el funcionamiento de la API de Google Fonts en la página Consideraciones técnicas.