Si tienes una plantilla web en la que te gustaría agregar diferentes tipos de fuentes, probablemente te hayas planteado cómo agregar Google Fonts para mejorar la apariencia y el diseño de tu site.
Sin restricciones, libre de derechos y con la posibilidad de combinar la familia de fuente que más te apetezca. ¿No sabes cómo hacerlo? Sigue estos sencillos pasos para utilizar las diferentes tipografías de Google Fonts en tu sitio web.
Muchas veces nos conformamos con el theme de Wordpress que escogemos, sin indagar mucho más allá, pero lo cierto es que hay que hacer todo lo posible por personalizar la web a nuestro gusto. Una opción es elegir tipografías con estilo y algo distintas.
La idea es que tu página web resulte atractiva de cara al usuario, sea user friendly y esté compuesta por las reglas más básicas de diseño web: no usar más de dos tipos de fuentes, una para los títulos y algunos destacados y otra para el cuerpo de texto. Si usas más de tres tipos de fuentes estarás saltándote las reglas de lo estético y, lo que es más importante, darás a tu web más motivos para que la carga pierda velocidad, restándole puntos en tu posicionamiento online.
Cómo agregar Google Fonts sin usar plugins
Hemos elegido Google Fonts porque la verdad es que tiene muy buena experiencia de navegación y es fácil de utilizar. Cuenta con unas 915 tipografías gratuitas, que es lo justo para que puedas volverte loco buscando la tipo que más se adapte a tu imagen corporativa.
Vayamos al grano. ¿Cómo agregar Google Fonts?
En realidad, basta con ir a su web fonts.google y seleccionar la fuente que más nos guste, personalizarla, copiar su script y agregar el código a las páginas de tu web mediante tu archivo CSS. Podrás incluirlas incluso para personalizar tus CTA.
Te lo explicamos mejor con este paso por paso:
- Accede a Google Fonts y elige la tipografía que más te gusta para tu web
Lo interesante es que puedes afinar tu búsqueda empleando algunos filtros, por estilo, por categorías o idiomas.
Una vez tengas la fuente deseada, selecciona su título. Puedes descargar su familia o seleccionar los diferentes estilos que te interesan, que es lo más recomendable en este caso.
- En la ventana que nos aparece en la parte derecha, selecciona “Embed”.
En esta parte, verás que tienes varias opciones. Puedes elegir <link> para copiar el script que te proporcionan y regresar al administrador de tu CMS.
- Una vez estés en el administrador de diseño de tu web, encuentra la hoja de estilo que se está aplicando a las páginas de tu web y abre el archivo CSS.
Es ahí cuando podrás pegar el código que seleccionaste. Debes hacerlo en la primera línea. Así es como nos lo indica el propio Google a modo de guía:
Como ves, puedes añadir la regla CSS Font-family para especificar los elementos en los que quieres aplicar la fuente. Esta parte iría añadiendo el código de “CSS rules” entre las etiquetas <style> y </style>.
¡Insertar Google Fonts en tu web es muy sencillo!
¿Te hemos resuelto la duda? Cuéntanos tu experiencia.
Deja tu comentario