Si no deseas utilizar ninguna de las fuentes estándar en HTML, puedes utilizar Google Fonts. Google Fonts es de uso gratuito y tiene más de 1000 fuentes para elegir.
Como usar Google Fonts
Simplemente agrega un enlace de hoja de estilo especial en la sección <head> y luego consulta la fuente en el CSS.
Ejm
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>Ejm 2
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>Usar múltiples fuentes de Google Fonts
Para usar varias fuentes de Google, simplemente separealos nombres de las fuentes con un carácter (|), así.
Ejm
<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>Nota: ¡Solicitar múltiples fuentes puede ralentizar tus 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!.
Ejm
<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>Habilitación de efectos de fuente
Google también ha habilitado diferentes efectos de fuente que puedes usar. Primero agrega effect=effectname a la API de Google, luego agrega un nombre de clase especial al elemento que va a usar el efecto especial. El nombre de la clase siempre comienza con font-effect- y termina con el nombre del efecto.
Ejm
<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>Para solicitar múltiples efectos de fuente, simplemente separa los nombres de los efectos con un carácter de barra vertical (|).
Ejm
<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>