Cómo utilizar las fuentes de Google

Soy un gran defensor del usoFuentes del sistema, que son rápidos, livianos y funcionan muy bien, pero a veces necesitas ser un poco sofisticado.

Necesita una fuente específica que haga que sus diseños se vean bien.

Quizás una bonita fuente como Slabo, Lato o Raleway.

Google proporciona, como parte de sus numerosos servicios, una herramienta llamada Google Fonts, que (mientras escribo esto) admite 992 familias de fuentes:

La interfaz es un poco abrumadora y, como persona no experta en fuentes, definitivamente estoy confundido sobre qué fuente debo elegir.

Normalmente busco "las mejores fuentes de Google" en Google y miro los artículos que recibo para tener una idea de cómo podría verse una fuente. Mirar docenas de fuentes en Google Fonts no es ideal para eso, y algunos sitios lo facilitan con colores, comoen esta publicación:

Tomemos una de las fuentes que usé en uno de mis sitios web:Presione Iniciar 2P.

Es una gran fuente para un sitio web retro. Lo usé en miCurso de plataforma webpágina de inicio, a la que quería darle un aspecto informático.

En la página de fuentes, puede ver cómo se representa cada carácter:

Desplazándose hacia abajo puede ver quién es el diseñador y una parte importante: la licencia. En este caso la página dice

Puede utilizarlos libremente en sus productos y proyectos: impresos o digitales, comerciales o de otro tipo. Sin embargo, no puede vender las fuentes por sí solas.

lo que nos otorga muchos permisos.

Podemos usar la fuente como queramos, incluso en un proyecto comercial, pero no podemos revenderla.

En la parte inferior tenemos una sección interesante que enumera las fuentes que a menudo se combinan con esta.

Con las fuentes trato de ser lo más conservador posible porque la mayoría de las veces no sé lo que estoy haciendo y ver lo que hacen otras personas y copiar la opción más razonable es una buena estrategia.

Ahora puede presionar el enlace "Descargar familia" en la parte superior derecha de la página para descargar el archivo TTF de fuente, que puede instalar en su computadora y usarlo como fuente en sus programas de escritorio.

Pero no es necesario que lo haga para utilizar la fuente en un sitio web.

Lo que puede hacer es hacer clic en "Seleccionar este estilo" junto a cada estilo que desee, en la sección Estilos.

Esto lo agregará a la barra lateral de Familias seleccionadas:

Una vez que haya terminado, haga clic en la pestaña Insertar y allí podrá encontrar el código que necesita para ingresar en su proyecto: alinkelemento para incluir la fuente en el HTML y la regla CSS para aplicar la familia de fuentes a elementos específicos:

Entonces, en este caso, lo que debe hacer es agregar este HTML:

<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">

y luego este CSS:

body { /* use your favorite selector here */
  font-family: 'Press Start 2P', cursive;
}

Tenemos una fuente alternativa en caso de que la fuente no se pueda cargar o tarde demasiado en cargarse.

Otra forma de incluir la fuente es usando el@importdirectiva en el CSS, por lo que no es necesario utilizar lalinkatributo en el HTML - todo está en el archivo CSS:

@import url(https://fonts.googleapis.com/css?family=Press+Start+2P);

Pero este enfoque tiene una limitación: es más lento. Si la fuente está vinculada en el HTML, el navegador hará una solicitud a la URL de la fuente tan pronto como lea el HTML.

Si la fuente está vinculada en el CSS, el navegador primero tiene que realizar una solicitud para cargar el CSS, luego puede realizar una solicitud para cargar la URL de la fuente.

Y unos pocos milisegundos perdidos aquí pueden marcar la diferencia entre una página que se carga instantáneamente con la fuente correcta y una página que primero se carga con la fuente alternativa y luego carga la fuente correcta cuando está disponible.


Más tutoriales de navegador: