Fuentes CSS de Google
Fuentes de Google
Si no desea utilizar ninguna de las fuentes estándar en HTML, puede utilizar Google Fonts.
Google Fonts es de uso gratuito y tiene más de 1000 fuentes para elegir.
Cómo usar las fuentes de Google
Simplemente agregue un enlace de hoja de estilo especial en la sección <head> y luego consulte la fuente en el CSS.
Ejemplo
Aquí, queremos usar una fuente llamada "Sofia" de Google Fonts:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
}
</style>
</head>
Resultado:
Sofia Font
Lorem ipsum dolor sit amet.
123456790
Ejemplo
Aquí, queremos usar una fuente llamada "Trirong" de Google Fonts:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Trirong">
<style>
body {
font-family: "Trirong", serif;
}
</style>
</head>
Resultado:
Trirong Font
Lorem ipsum dolor sit amet.
123456790
Ejemplo
Aquí, queremos usar una fuente llamada "Audiowide" de Google Fonts:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Audiowide">
<style>
body {
font-family: "Audiowide", sans-serif;
}
</style>
</head>
Resultado:
Audiowide Font
Lorem ipsum dolor sit amet.
123456790
Nota: Al especificar una fuente en CSS, incluya siempre como mínimo una fuente alternativa (para evitar comportamientos inesperados). Entonces, también aquí debe agregar una familia de fuentes genérica (como serif o sans-serif) al final de la lista.
Para obtener una lista de todas las fuentes de Google disponibles, visite nuestro Tutorial de fuentes de Google .
Usar múltiples fuentes de Google
Para usar varias fuentes de Google, simplemente separe los nombres de las fuentes con un carácter de barra vertical ( |), así:
Ejemplo
Solicite varias fuentes:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong">
<style>
h1.a {font-family: "Audiowide", sans-serif;}
h1.b {font-family: "Sofia",
sans-serif;}
h1.c {font-family: "Trirong", serif;}
</style>
</head>
Resultado:
Audiowide Font
Sofia Font
Trirong Font
Nota: ¡Solicitar múltiples fuentes puede ralentizar sus páginas web! Así que ten cuidado con eso.
Aplicar estilo a las fuentes de Google
¡Por supuesto que puedes diseñar Google Fonts como quieras, con CSS!
Ejemplo
Dale estilo a la fuente "Sofia":
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
text-shadow: 3px 3px 3px #ababab;
}
</style>
</head>
Resultado:
Sofia Font
Lorem ipsum dolor sit amet.
123456790
Habilitación de efectos de fuente
Google también ha habilitado diferentes efectos de fuente que puede usar.
Primero agregue a la API de Google, luego agregue un nombre de clase especial al elemento que utilizará el efecto especial. El nombre de la clase siempre comienza
y termina con .effect=effectnamefont-effect-effectname
Ejemplo
Agregue el efecto de fuego a la fuente "Sofia":
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia&effect=fire">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
}
</style>
</head>
<body>
<h1 class="font-effect-fire">Sofia on
Fire</h1>
</body>
Resultado:
Sofia on Fire
Para solicitar varios efectos de fuente, simplemente separe los nombres de los efectos con un carácter de barra vertical ( |), así:
Ejemplo
Agregue múltiples efectos a la fuente "Sofia":
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia&effect=neon|outline|emboss|shadow-multiple">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
}
</style>
</head>
<body>
<h1 class="font-effect-neon">Neon Effect</h1>
<h1 class="font-effect-outline">Outline
Effect</h1>
<h1 class="font-effect-emboss">Emboss
Effect</h1>
<h1 class="font-effect-shadow-multiple">Multiple
Shadow Effect</h1>
</body>
Resultado:
Neon Effect
Outline Effect
Emboss Effect
Multiple Shadow Effect