Unas de las características que una página web debe tener es un estilo de fuente que sea agradable a la vista del usuario. Si estás comenzando a trabajar con CSS, te suena Google Fonts o quizás otras tipografías libres. No es para menos, ya que esta herramienta se ha convertido en un elemento bastante útil para los desarrolladores web.
En este post te mostraremos la importancia de usar la tipografía correcta en tu diseño de marca y la opción de Google Font. Aprenderás a instalar cualquier fuente disponible en tu web y algunos consejos para parecer más profesional.
¿Qué es Google Fonts?
En esta ocasión vamos a hablar específicamente sobre Google Fonts. Que básicamente es una enciclopedia de tipografías de código libre desarrollada por Google. Hay que destacar que no es la única de su tipo y podrás encontrar bastantes proyectos colaborativos de código abierto como donde diseñadores comparten y crean distintos estilos tipográficos para uso público de la comunidad.
¿Cómo usar Google Fonts con CSS para tu página web?
Hay que tener en cuenta que es un recurso externo, lo que implica aumentar el tiempo de carga de nuestra página web, siempre que queramos usarlas sin hospedarlas en nuestro servidor web. No se recomienda usar más de 3 fuentes diferentes de Google fonts mediante este método de carga.
Al momento de implementar Google Fonts en tu página web, ten en cuenta que debes poseer conocimientos básicos tanto de HTML como de CSS y que hay principalmente dos formas de añadir la fuente a tu página. En el primer caso, para poder añadir la tipografía que quieras debes seguir estos pasos:
- Dirígete al sitio de Google Fonts, busca la fuente que deseas y selecciona el estilo que quieras.
- Con la tipografía seleccionada, haz click en «Quick Use».
- Copia el código de HTML estándar proporcionado por Google Fonts en la cabecera de tu página web, entre las etiquetas header.
- Integra la fuente en tu código CSS en la hoja de estilo: aplica la propiedad CSS font-family, tal y como ha salido de Google Fonts.
Además, también podras añadir la tipografía mediante la etiqueta @import, para ello debes hacer lo siguiente:
Inserta el código que proporciona Google Fonts al principio de tu hoja de estilos CSS. Recuerda debes utilizar el @import.
- Luego aplica la propiedad CSS font-family tal y como ha sido dada por Google Fonts.
Lo que hace que Google Fonts sea tan bueno:
- Fáciles de usar.
- Compatibles con casi todo lo que use Internet: tipos de pantallas, versiones y lenguajes.
- Puedes agregar tus Google Fonts favoritas a una colección.
- Ofrece estadísticas del impacto de la fuerza en la velocidad de carga de tu página web.
- Permite escoger los paquetes de caracteres disponibles y alfabetos.
Ahora que sabes cómo usar Google Fonts con CSS para añadir tus fuentes te invitamos que vayas probando poco a poco cuál es la tipografía que se adapta mejor a tu estilo. Además puedes seguir aprendiendo con nuestro Curso de programación desde cero de MGPanel, ahí Podrás dominar este y otros temas en programación web. Además de pertenecer a la gran comunidad de MGPanel.