¿Cómo utilizar fuentes de Google con WordPress? La web moderna se centra en la experiencia del usuario. Las empresas invierten una gran cantidad de tiempo y dinero para garantizar que los visitantes de su sitio web tengan la mejor experiencia posible al navegar por él.
La representación del texto es fundamental en la estética del sitio web. No importa la calidad de tu contenido; si no es agradable de leer y resulta demasiado recargado para los lectores, todos tus esfuerzos serán en vano.
Si bien hay varias opciones tipográficas disponibles, la forma más sencilla de obtener acceso a cientos de fuentes profesionales (sin cargo) es usar Google Fonts con su sitio web de WordPress.
En esta publicación, te mostraré instrucciones paso a paso para aprender a añadir fuentes de Google de WordPress a tu sitio web, tanto manualmente como con el plugin Easy Google Fonts . También te mostraré las mejores fuentes que puedes usar para mejorar la legibilidad del contenido de tu sitio web.
1- ¿Qué son las fuentes de Google para WordPress y por qué deberías usarlas?
Antes de comenzar, echemos un vistazo rápido a qué son las fuentes de Google junto con las ventajas clave de usarlas en su sitio web de WordPress.
Google Fonts es una biblioteca de fuentes con licencia libre lanzada en 2010. Puedes usar esta increíble biblioteca llamando a la API proporcionada. Lo interesante es que puedes usar 877 fuentes optimizadas para web, ¡gratis! ¡Increíble! Cuenta con un directorio web interactivo que te permite buscar tipos específicos de fuentes y probarlas en tu navegador.
Usar las fuentes de Google de WordPress tiene varias ventajas. Son gratuitas (incluso para proyectos comerciales), están prealojadas (por lo que no consumen recursos del servidor) y son descargables (puedes usarlas en formato impreso).
Actualmente, muchos sitios web utilizan Google Fonts en WordPress para su beneficio. Todos los temas modernos son compatibles con Google Fonts.
Si está listo para renovar la tipografía de su sitio con fuentes web fáciles de usar, todo lo que debe hacer es encontrar las fuentes adecuadas y usarlas con su sitio web de WordPress.
Recuerda, ¡las fuentes por sí solas no son suficientes! Debes tener un tema atractivo para tu sitio web para que los usuarios se queden enganchados. ¡Y WordPress ofrece algunos de los mejores temas para mejorar la experiencia del usuario!
2- Cómo agregar fuentes de Google a WordPress manualmente
Google Fonts simplifica la mayor parte del trabajo de incrustar familias de fuentes en tu sitio web. Se trata de una biblioteca en línea que se puede ejecutar en cualquier proyecto web como cualquier otro script JS o CSS.
En esta sección, te demostraré cómo instalar manualmente Google Fonts en un sitio web de WordPress.
Paso 1: Encuentra la fuente que deseas agregar a tu sitio web
Para empezar, explora el directorio de fuentes de Google y elige la fuente que quieres usar en tu sitio web de WordPress. Si ya tienes una fuente específica, puedes buscarla usando el buscador de la barra lateral derecha.
También puede filtrar fuentes por categoría, idiomas, número de estilos, grosor, inclinación y ancho u ordenarlas por fecha de adición, alfabéticamente, por tendencia o por popularidad.
- Se trata de fuentes que tienen pequeñas líneas unidas al final de los trazos de las letras, por ejemplo, Times New Roman y Courier .
- Sans-Serif. Las fuentes que no tienen las pequeñas líneas al final de los trazos de las letras son fuentes sans-serif, por ejemplo, Helvetica y Roboto .
- Las fuentes de visualización se utilizan principalmente para textos grandes, por ejemplo, títulos.
- Fuentes que tienen un aspecto escrito a mano, por ejemplo, Pacifico .
- Fuentes que tienen exactamente el mismo espaciado para todos los caracteres, por ejemplo, Source Code Pro .
Una de las mejores ventajas de utilizar la función de directorio interactivo de Google Fonts es que puedes obtener una vista previa rápida de las fuentes que te interesan. Todo lo que tienes que hacer es hacer clic en el cuadro del campo de la fuente y escribir texto en él.
Para el propósito de este tutorial, utilizaré Open Sans .
Paso 2: Agrega las fuentes a tu selección
Ahora que sabemos qué fuente usaremos, añádala a nuestra selección. Para ello, haga clic en el signo más (+) en la esquina superior derecha del cuadro de la familia de fuentes.
Puedes añadir tantas familias tipográficas como quieras a tu selección. Una vez que estés listo, haz clic en la barra negra «X Familia Seleccionada» en la parte inferior de la pantalla para ver tu selección.
Paso 3: Personaliza la fuente
La barra de selección de la familia X abre una ventana con dos pestañas: Incrustar y Personalizar . Antes de incrustar la familia de fuentes en nuestro sitio web de WordPress, nos tomaremos un momento para personalizarla un poco.
Desde la pantalla Personalizar , marque las casillas de los estilos e idiomas que desea poder utilizar en su sitio web.
Ten en cuenta que cuantos más estilos de fuente e idiomas selecciones, más tardarán en cargarse las páginas de tu sitio. Verás un indicador de tiempo de carga en la misma pantalla que te indica si tu selección ralentizará los tiempos de carga.
Para evitar que nuestra selección de fuentes afecte los tiempos de carga de las páginas de nuestro sitio, hemos decidido optar por una selección simple: light 300 y regular 400 .
Paso 4: Incorpore las fuentes de Google en su sitio web de WordPress
Hay varias maneras de añadir una fuente personalizada a WordPress. Te mostraremos cómo hacerlo usando la función wp_enqueue_style(), ya que es la recomendada para sitios web de WordPress.
Para empezar, vuelve a la pestaña «Incrustar» y copia el enlace (URL) de tu selección de fuentes al portapapeles. En nuestro caso, la URL completa es: https://fonts.googleapis.com/css?family=Open+Sans:300,400 .
A continuación, inicie sesión en su panel de WordPress y, dentro de Apariencia , vaya a Editor y abra el archivo functions.php de su tema activo usando un cliente FTP y agregue el siguiente código.
- función add_google_fonts ( ) {
- wp_enqueue_style ( ‘add_google_fonts’ , ‘https://fonts.googleapis.com/css?family=Open+Sans:300,400’ , falso ) ; }
- agregar_acción ( ‘wp_enqueue_scripts’ , ‘agregar_fuentes_google’ ) ;
Nota: Deberás reemplazar la URL con la tuya.
Puedes empezar a usar la fuente que acabas de añadir usando las opciones de tipografía de tu tema (si las admite) o añadiendo código a la hoja de estilos principal del tema activo. Por ejemplo, si quisiéramos cambiar todos los encabezados H2 a nuestra nueva fuente, nuestro código podría ser similar a esto:
- h2 {
- familia de fuentes: ‘Open Sans’ , sans-serif;
- }
He actualizado correctamente mi WordPress con Google Fonts. Es posible que Google Fonts no funcione por alguna razón y, para ello, tenga que recurrir al conjunto de fuentes predeterminado, que puede mostrarse como copia de seguridad. Sin embargo, esto ocurre con poca frecuencia.
Para ello, simplemente agregue sus tipos de fuentes alojados localmente predeterminados, como Georgia, Cambria o Courier.
3- Cómo añadir fuentes de Google a WordPress usando un complemento
Para algunos, la integración manual de las fuentes de Google en WordPress podría no ser una opción. No se preocupen. Existe otra forma (más sencilla) de añadir fuentes de Google a su sitio web de WordPress: mediante un plugin.
En esta sección, te mostraré cómo puedes integrar Google Fonts en WordPress usando el complemento Easy Google Fonts .
Paso 1: Instalar y activar el complemento
Inicia sesión en tu panel de administración de WordPress y ve a Plugins > Añadir nuevo . Busca Easy Google Fonts e instálalo en tu sitio web.
Una vez instalado el complemento, haga clic en el botón Activar para comenzar a usarlo.
Paso 2: Comienza a usar las fuentes de Google
Una vez que actives el plugin en tu sitio web, se añadirán automáticamente las hojas de estilo de las fuentes de Google que elijas. Para empezar, ve a Apariencia > Personalizar en el panel de administración de WordPress.
Notarás que se ha agregado un nuevo elemento de menú al Personalizador de WordPress llamado Tipografía .
Le permite controlar la configuración tipográfica de sus párrafos y varios encabezados (H1 a H6).
Supongamos que quieres editar la fuente » Párrafos » en tu sitio web. El plugin Easy Google Fonts te permite personalizar sus estilos, apariencia y posición. Veamos las diferentes opciones de estilo que ofrece.
En la pestaña Estilos , puedes configurar la escritura, la familia de fuentes, el grosor de la fuente, la decoración del texto y la transformación del texto. La opción de familia de fuentes te da acceso a cientos de fuentes de Google categorizadas como fuentes web estándar , fuentes Google Serif , fuentes Google Sans Serif , fuentes Google Display , fuentes Google Handwriting y fuentes Google Monospace .
Entonces, si quisiéramos usar Open Sans , estableceríamos la opción de script en Latin , la opción de familia de fuentes en Open Sans y el peso de la fuente en Regular (que es el equivalente a Regular 400 ).
¿Quieres ver cómo cambió la fuente en la vista previa? Una gran ventaja de usar el plugin Easy Google Fonts es que puedes previsualizar en tiempo real el aspecto de tus publicaciones y páginas al seleccionar una fuente.
4- Las mejores fuentes para usar
La selección de fuentes con Google Fonts es ilimitada. Como webmaster, tienes la libertad de elegir la que consideres adecuada para tus lectores. Sin embargo, algunas fuentes son populares por su legibilidad.
Veamos las mejores fuentes de Google que se utilizan ampliamente y brindan la mejor legibilidad.
1. Lora
Lora es una de las familias tipográficas más utilizadas debido a su legibilidad y variantes.
2. Exhibición de Playfair
Esta familia de fuentes proporciona una mejor legibilidad del texto y es adecuada tanto para la web como para la impresión.
3. Archivo
Esta fuente pertenece a la familia de las sans serif grotescas. Tiene un aspecto limpio, ideal para textos de cuerpo.
4. Roboto
Roboto es una de las fuentes más utilizadas en la web moderna. Luce genial en diseños web minimalistas y ofrece una excelente legibilidad.
5. Montserrat
Montserrat tiene sus raíces en la tipografía urbana del siglo XX. Es otra familia tipográfica muy popular que ofrece diversas variantes.
6. Rubik
Muy limpia, Rubik es una familia de fuentes san serif que ha estado presente en más de 470.000 sitios web en todo el mundo.
7. Fuente Sans
Debes haber utilizado la familia de fuentes Source Sans, ya que tiene más de 4,18 mil millones de iteraciones a través de la API de Google Fonts.
8. Lato
Lato también es una fuente sans serif y los webmasters la consideran profesional y clara. Se utiliza en casi todas las posiciones del contenido.
9. PT Serif
Con más de un millón de sitios web que utilizan esta fuente, PT Serif es una de las fuentes de Google más utilizadas. Es adecuada tanto para la web como para documentos impresos.
10. Open Sans
La fuente Open Sans se asemeja más a la escritura humana, lo que facilita su lectura tanto en la web como en papel. ¡La API de Google Fonts la ha utilizado más de 28 500 millones de veces en tan solo una semana!
Hay muchas otras fuentes de Google para sitios web de WordPress disponibles. Elija la familia tipográfica con cuidado, ya que puede tener un impacto tanto positivo como negativo en los lectores de su sitio.
5- Mejores prácticas para usar fuentes de Google en un sitio web
Integrar las fuentes de Google en WordPress no es ninguna ciencia, pero siempre hay dos formas de realizar cualquier tarea: la buena manera y la mejor manera.
Veamos las mejores prácticas involucradas en el uso de fuentes de Google en WordPress.
Limitar pesos de fuente: Seleccionar el conjunto completo de pesos de fuente es tentador, pero tiene sus inconvenientes. Con cada variante, la API se vuelve más pesada y tarda más en cargar el conjunto completo de pesos de fuente.
Generalmente esto se carga al inicio de la página web y, si no está optimizado, puede ralentizar el tiempo de carga inicial de la página web.
Alojar fuentes localmente: Google Fonts es una biblioteca en línea alojada en otro lugar. Si bien tiene un impacto mínimo en el rendimiento de su sitio, en caso de indisponibilidad, aún podrá servir las fuentes de Google seleccionadas si se alojan localmente.
La accesibilidad es importante: Optimizar tu sitio web para personas con discapacidad visual ya no es una opción. Las fuentes de Google te permiten diseñar tu fuente de la forma más conveniente para este tipo de visitantes.
Utilice un contraste legible en la mayoría de los tamaños y tipos de pantalla, que no sea pesado para la vista del lector. Usar colores muy brillantes o muy claros no es ideal. Elija el color y el tamaño que mejor se adapten a la mayoría de los lectores.
Conclusión
Usar Google Fonts en WordPress puede ayudarte a cambiar rápidamente la apariencia de tu sitio web. Ya sea que busques un sitio web con un aspecto profesional o uno divertido, seguramente Google Fonts tiene la fuente perfecta para ti.
Te mostramos cómo añadir fuentes de Google a tu sitio web manualmente con la función wp_enqueue_style() y el plugin Easy Google Fonts . Esperamos que ahora estés en condiciones de seguir avanzando.
¿Has usado alguna vez una biblioteca de fuentes en tu sitio web de WordPress? ¡Nos encantaría saber tu opinión, así que cuéntanosla en los comentarios!
P. ¿Cómo uso las fuentes de Google en WordPress?
La forma más sencilla de utilizar fuentes de Google en sitios web de WordPress es instalar y activar el complemento Google Fonts.
P. ¿Puedo agregar fuentes a WordPress?
Puede utilizar el complemento Google Fonts para importar las fuentes o crear una carpeta de fuentes dedicada y editar la hoja de estilos del tema para llamar a las fuentes.
P. ¿Qué fuentes están disponibles en WordPress?
WordPress admite todas las fuentes que se pueden importar mediante plugins o configurar manualmente en la carpeta de fuentes. WordPress incluye una fuente predeterminada que puedes reemplazar con otra personalizada.
P. ¿Cuál es la mejor fuente para sitios web?
No existe una única fuente ideal para un sitio web. Si bien existen buenas prácticas para seleccionar fuentes para sitios web, siempre es recomendable probar varias familias tipográficas para encontrar la que mejor se adapte a la tipografía de tu sitio web.
