¿Cómo usar Google Fonts?
En la infinidad de recursos que Google ofrece encontramos uno de los más preponderados entre desarrolladores y diseñadores, Google Fonts, un directorio interactivo de uso libre y gratuito con gran cantidad de fuentes de código abierto. Esta plataforma permite que cualquier tipo de letra alojada en la misma sea accesible para utilizar libremente en productos y proyectos impresos o digitales, comerciales o de cualquier otro tipo. Bajo esta linea, el usuario no puede vender las fuentes por su cuenta y debe respetar la licencia de las mismas. Ver licencia.
Google Fuentes fue lanzado en 2010, y renovado en 2011. Las fuentes son subidas a la plataforma, entre otros, por SkyFonts de Monotipia (Monotype’s SkyFonts), Fuentes Web de Adobe (Adobe’s Edge Web Fonts and Typekit services) y servicios de Typekit (Typekit services).
¿Donde encuentro las fuentes y cómo las utilizo?
Puedes encontrarlas en la dirección de la plataforma web: fonts.google.com y descargarlas para utilizarlas con un programa de edición (para descargar una fuente debes seleccionar la que desees, pulsar el botón + Select this style y finalmente Download family).
Si deseas utilizarlas en un blog o web debes agregar un enlace de hoja de estilo en la estructura de códigos de tu sitio para solicitar a Google las fuentes web deseadas. Esto consiste en agregar la siguiente linea de códigos dentro del <head> de tu sitio:
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Font+Name"/>
Seguidamente debes reemplazar el texto en rojo (Font+Name) por el nombre de la fuente que hayas seleccionado. Si la fuente elegida, por ejemplo, es Noto Sans, la estructura de la linea de códigos quedaría conformada de la siguiente manera:
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans" rel="stylesheet"/>
Los espacios en el nombre de la familia de la fuente se reemplazan con signos más ( + ).
Si deseas utilizar varias fuentes debes agregar al final del nombre de la primera fuente esto:
&family=
Seguidamente se debe agregar el nombre de la segunda fuente, quedando una estructura, por ejemplo, si la fuente elegida es Open Sans Condensed, de la siguiente característica:
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans&family=Open+Sans+Condensed" rel="stylesheet"/>
También puedes agregar a esta estructura el descriptor font-display, que determina cómo se muestra una fuente basándose en cuándo está descargada y lista para usarse. Este descriptor cuenta en su aval con la siguiente sintaxis disponibles:
[ auto | block | swap | fallback | optional ]
El descriptor se integra en la estructura de códigos como &display= más el valor elegido. Por ejemplo:
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans&family=Open+Sans+Condensed&display=swap" rel="stylesheet"/>
El siguiente paso es agregar la CSS correspondiente a la llamada del elemento que se quiera estilizar con la fuente que elegimos. Siguiendo con el ejemplo de la fuente Noto Sans, la CSS es:
font-family: 'Noto Sans'
En esta pequeña estructura, cuando se especifica una fuente web, siempre es recomendable enumerar al menos una fuente segura alternativa para evitar comportamientos inesperados. Puedes agregar una fuente genérica CSS como serif o sans-serif al final de la lista, así el navegador podrá volver a sus fuentes predeterminadas si surge algún inconveniente con la carga de la fuente principal.
font-family: 'Noto Sans', sans-serif;
Así, la estructura final quedaría de la siguiente manera:
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans&family=Open+Sans+Condensed&display=swap" rel="stylesheet"/>
<style>
body {
font-family: 'Noto Sans', sans-serif;
font-size: 48px;
}
</style>
</head>
<body>
<div>¡Hola mundo!</div>
</body>
</html>
Para su utilizacion en elementos individuales, la estructura seria la siguiente:
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans&family=Open+Sans+Condensed&display=swap" rel="stylesheet"/>
<style>
.a {
font-family: 'Noto Sans', sans-serif;
font-size: 48px;
}
.b {
font-family: 'Open Sans Condensed', sans-serif;
font-size: 48px;
}
</style>
</head>
<body>
<div class="a">¡Hola mundo!</div>
<div class="b">¡Hola mundo!</div>
</body>
</html>
Adicionalmente existen parámetros que hacen al tamaño de las fuentes (ejemplo: font-size: 48px;), sombreado del texto (ejemplo: text-shadow: 4px 4px 4px #aaa;), etcétera, los cuales puedes implementar a gusto y modificarlos según conveniencia.
Comentarios
Publicar un comentario