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>