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!