W3.CSS Fuentes de Google

Con W3.CSS es extremadamente fácil agregar nuevas fuentes.

  • Muy fácil de usar (solo CSS y HTML)
  • Uso ilimitado de bibliotecas de fuentes externas (como Google Fonts)
  • Funciona en todos los navegadores modernos.

esto es roboto

esta es sofía

Sofía en llamas

¡Haciendo la red!

¡Haciendo la red!

¡Haciendo la red!

¡Haciendo la red!

¡Haciendo la red!


Uso de fuentes de Google

Google Fonts es de uso gratuito y tiene más de 1000 fuentes para elegir.

En el encabezado de su página web, enlace a una fuente de Google:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">

Luego agregue el CSS sobre dónde usarlo:

body,h1,h2,h3,h4,h5,h6 {font-family: Roboto, sans-serif;}

Otro ejemplo

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sophia">
body,h1,h2,h3,h4,h5,h6 {font-family: Sofia, serif;}

Crear una clase de fuente

En el encabezado de su página web, enlace a una fuente de Google:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sophia">

Luego crea una clase de fuente:

Ejemplo

.w3-sofia {
  font-family: Sofia, cursive;
}

En su página web, use la clase de fuente:

Ejemplo

<p class="w3-sofia">Making the Web!</p>
¡Haciendo la red!

Ejemplo

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
.w3-tangerine {
  font-family: 'Tangerine', serif;
}
<p class="w3-tangerine">Making the Web Beautiful!</p>
¡Haciendo la red!

Ejemplo

<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster">
¡Haciendo la red!

Ejemplo

<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster&effect=shadow-multiple">
¡Haciendo la red!

Ejemplo

<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Allerta+Stencil">
¡Haciendo la red!