¿Cómo utilizar las fuentes de Google con WordPress?

La web moderna tiene que ver con la experiencia del usuario. Las empresas invierten una gran cantidad de tiempo y dinero para asegurarse de que los visitantes de su sitio web obtengan la mejor experiencia posible mientras navegan por su sitio web.

La representación del texto juega un papel integral en la estética del sitio web. No importa qué tan buena sea la calidad de su contenido; si no es agradable de leer y está demasiado abarrotado para los lectores, entonces todos sus esfuerzos se desperdician.

Aunque hay una serie de opciones tipográficas disponibles para usted, la forma más fácil de acceder a cientos de fuentes profesionales (sin cargo) es utilizando Google Fonts con su sitio web de WordPress.

En esta publicación, le presentaré instrucciones paso a paso para aprender cómo agregar fuentes de WordPress Google con su sitio web de forma manual y utilizando el complemento Easy Google Fonts . También le mostraré las mejores fuentes que puede utilizar para mejorar la legibilidad del contenido de su sitio web.

1- ¿Qué son las fuentes de Google para WordPress y por qué debería utilizarlas?

Antes de comenzar, echemos un vistazo rápido a 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. Puede usar la increíble biblioteca de Google Fonts llamando a la API proporcionada. El hecho interesante es que puede utilizar 877 fuentes optimizadas para la web de forma gratuita. Eso es increíble. Cuenta con un directorio web interactivo que le permite buscar tipos específicos de fuentes y probarlos en su navegador web.

El uso de WordPress Google Fonts tiene una serie de ventajas. Son de uso gratuito (incluso para proyectos comerciales), prehospedados (para que no consuman los recursos de su servidor) y descargables (puede usarlos en forma impresa).

Hay una gran cantidad de sitios web que actualmente utilizan fuentes de Google en WordPress en su beneficio. Todos los temas modernos admiten el uso de fuentes de Google.

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 correctas y utilizarlas con su sitio web de WordPress.

2- Cómo agregar fuentes de Google a WordPress manualmente

Google Fonts elimina la mayor parte del trabajo pesado de incrustar familias de fuentes en su sitio web. Esta es una biblioteca en línea a la que se puede llamar en cualquier proyecto web como cualquier otro script JS o CSS.

En esta sección, le demostraré cómo instalar manualmente Google Fonts en un sitio web de WordPress.

Paso 1: busque la fuente que desea agregar a su sitio web

Para comenzar, navegue por el directorio de fuentes de Google y elija la fuente que desea usar en su sitio web de WordPress. Si ya tiene un tipo de letra específico, simplemente puede buscarlo usando el cuadro de búsqueda en la barra lateral derecha.

También puede filtrar las fuentes por categoría, idiomas, la cantidad de estilos, grosor, inclinación y ancho o ordenarlas por la fecha en que se agregaron, alfabéticamente, por tendencia o por popularidad.

• Se trata de fuentes que tienen pequeñas líneas adjuntas al final de los trazos de letra, 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 letra 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 puede obtener una vista previa rápidamente de las fuentes que le interesan. Todo lo que tiene que hacer es hacer clic en el cuadro de campo de la fuente y escribir el texto en él.

Para el propósito de este tutorial, usaré Open Sans .

Paso 2: agregue las fuentes a su selección

Ahora que sabemos con qué fuente vamos, agreguemosla a nuestra selección. Puede hacer esto haciendo clic en el signo más (+) en la esquina superior derecha del cuadro de familia de fuentes.

Puede agregar tantas familias de fuentes como desee a su selección. Una vez que esté todo listo, haga clic en la barra negra X Familia seleccionada en la parte inferior de la pantalla para ver su selección.

Paso 3: personaliza la fuente

La barra X Familia seleccionada abre una ventana que tiene dos pestañas: Insertar y Personalizar . Antes de integrar la familia de fuentes en nuestro sitio web de WordPress, nos tomaremos un momento para personalizarla un poco.

En la pantalla Personalizar , marque las casillas de los estilos e idiomas que le gustaría poder usar en su sitio web.

Tenga en cuenta que cuantos más estilos de fuente e idiomas seleccione, más tardarán en cargarse las páginas de su sitio. Notará un indicador de tiempo de carga en la misma pantalla que le permite saber si su selección hará que los tiempos de carga sean lentos.

Para evitar que nuestra selección de fuentes afecte los tiempos de carga de la página de nuestro sitio, hemos decidido optar por una selección simple: light 300 y regular 400 .

Paso 4: inserte las fuentes de Google en su sitio web de WordPress

Hay varias formas de agregar una fuente personalizada a WordPress. Le mostraremos cómo hacerlo usando la función wp_enqueue_style () ya que es el enfoque recomendado para los sitios web de WordPress.

Comience regresando a la pestaña Insertar y copie el enlace (URL) de su selección de fuente en su 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 al Editor y abra el archivo functions.php de su tema activo usando un cliente FTP y agregue el siguiente código.

 function add_google_fonts () {

wp_enqueue_style ('add_google_fonts', 'https://fonts.googleapis.com/css?family=Open+Sans:300,400', falso);}

add_action ('wp_enqueue_scripts', 'add_google_fonts');

Nota: Deberá reemplazar la URL por la suya propia.

Puede comenzar a usar la fuente que acaba de agregar usando las opciones de tipografía de su tema (si las admite) o agregando algún código a la hoja de estilo principal de su tema activo. Por ejemplo, si quisiéramos cambiar todos los encabezados H2 a nuestra nueva fuente, nuestro código podría verse así:

 h2 {

familia de fuentes: 'Open Sans', sans-serif;

}

He actualizado correctamente mi WordPress con Google Fonts. Es posible que Google Fonts no funcione debido a algunas razones extrañas y para encontrar eso, tengo que consultar el conjunto de fuentes predeterminado que se puede mostrar como una copia de seguridad. Pero esto sucede muy raramente.

¿Por qué la velocidad es crucial para SEO y UX?

Estos consejos de expertos le mostrarán cómo mejorar la velocidad de sus sitios web de WordPress.

Acepto los Términos de servicio y la Política de privacidad de Cloudways

¡Obtenga el libro electrónico ahora!

Gracias

Su libro electrónico está en camino a su bandeja de entrada.

Para hacerlo, simplemente agregue sus tipos de fuentes alojados localmente por defecto, como Georgia, Cambria o Courier.

3- Cómo agregar fuentes de Google a WordPress usando un complemento

Para algunos, la integración manual de WordPress Google Fonts puede no ser la opción. No te preocupes. Existe otra forma (más sencilla) de agregar fuentes de Google a su sitio web de WordPress. A través de un complemento.

En esta sección, le mostraré cómo puede integrar Google Fonts en WordPress utilizando el complemento Easy Google Fonts .

Paso 1: instalar y activar el complemento

Inicie sesión en su panel de administración de WordPress y vaya a Complementos > Agregar nuevo . Busque Easy Google Fonts e instálelo en su sitio web.

Una vez que el complemento esté instalado, haga clic en el botón Activar para comenzar a usarlo.

Paso 2: comience a usar las fuentes de Google

Una vez que active el complemento en su sitio web, automáticamente pondrá en cola las hojas de estilo para las fuentes de Google que elija usar. Para comenzar, diríjase a Apariencia > Personalizar desde el panel de administración de WordPress.

Notará que se ha agregado un nuevo elemento de menú al Personalizador de WordPress llamado Tipografía .

Le permite controlar la configuración de tipografía de sus párrafos y varios encabezados (H1 a H6).

Supongamos que desea editar la fuente Paragraphs en su sitio web, el complemento Easy Google Fonts le permite personalizar sus estilos, apariencia y posición. Echemos un vistazo a las diferentes opciones de estilo que presenta.

Desde la pestaña Estilos , puede configurar su secuencia de comandos, familia de fuentes, peso de fuente, decoración de texto y transformación de texto. La opción de familia de fuentes le da acceso a cientos de fuentes de Google categorizadas como fuentes web estándar , fuentes Google Serif , fuentes Google Sans Serif , fuentes de visualización de Google , fuentes de escritura a mano de Google y fuentes de 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 fuente en Regular (que es el equivalente a Regular 400 ).

¿Simplemente verifique cómo cambió la fuente en la pantalla de vista previa? Uno de los principales beneficios de usar el complemento Easy Google Fonts es que puede obtener una vista previa en vivo de cómo se ven sus publicaciones y páginas cuando selecciona una fuente para acompañarla.

4- Mejores fuentes para usar

El cielo es el límite cuando se trata de la selección de fuentes con Google Fonts. Usted, como webmaster, tiene la libertad de elegir la fuente que considere adecuada para sus lectores. Sin embargo, hay algunas fuentes que son populares por su legibilidad.

Veamos las mejores fuentes de Google que se utilizan ampliamente y proporcionan la mejor legibilidad.

1. Lora

Lora es una de las familias de fuentes más utilizadas debido a su legibilidad y variantes.

2. Pantalla de Playfair

Esta familia de fuentes ofrece una mejor legibilidad del texto y es adecuada tanto para la web como para la impresión.

3. Archivo

Esta fuente pertenece es grotesque sans serif typeface family. Tiene un aspecto limpio adecuado para el cuerpo del texto.

4. Roboto

Roboto es una de las fuentes más utilizadas en la web moderna. Se ve muy bien con diseños web mínimos y proporciona una excelente legibilidad para los usuarios.

5. Montserrat

Montserrat tiene sus raíces en la tipografía urbana del siglo XX. Otra familia de fuentes muy popular que viene con varias variantes.

6. Rubik

Muy limpio, Rubik es una familia de fuentes san serif que ha estado sirviendo a más de 470,000 sitios web en todo el mundo.

7. Fuente Sans

Debe 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 es también tipo de letra Sans Serif y los webmasters la consideran una fuente 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 se encuentra entre las fuentes de Google más utilizadas. Es adecuado tanto para la web como para documentos impresos.

10. Open Sans

La fuente Open Sans es la más cercana a la escritura humana, lo que facilita la lectura tanto en la web como en el papel. ¡La API de Google Fonts ha servido esta fuente más de 28.5 mil millones de veces en solo una semana!

Hay muchos otros sitios web de Google Fonts para WordPress disponibles. Sea prudente al seleccionar la familia de fuentes, ya que puede tener un impacto tanto positivo como negativo en los lectores de su sitio.

5- Prácticas recomendadas para el uso de fuentes de Google en un sitio web

La integración de WordPress Google Fonts no es una ciencia espacial, pero siempre hay dos formas de realizar cualquier tarea: la buena y la mejor forma.

Veamos las mejores prácticas involucradas en el uso de Google Fonts en WordPress.

- Limitar los pesos de las fuentes: seleccionar el conjunto completo de pesos de las fuentes es tentador, pero tiene sus inconvenientes. Para cada variante, la API se vuelve más pesada y lleva más tiempo cargar el conjunto completo de pesos de fuente.

Por lo general, se carga al inicio de la página web y, si no se optimiza, puede ralentizar el tiempo de carga inicial de su página web.

-Host Fonts localmente: la fuente de Google es una biblioteca en línea alojada en otro lugar. Aunque tiene un impacto mínimo en el rendimiento de su sitio, sin embargo, en el caso de que no esté disponible, aún podrá servidor las fuentes de Google seleccionadas si se alojan localmente.

-La accesibilidad es importante: ya no es una opción optimizar su sitio web para personas con discapacidad visual. Las fuentes de Google le permiten diseñar su fuente de la manera que sea más conveniente para este tipo de visitantes.

Utilice el contraste que es fácilmente legible en la mayoría de los tamaños y tipos de pantalla, y no es pesado para el ojo del lector. Usar colores muy brillantes o colores muy claros no es ideal. Elija el color y el tamaño que mejor se adapte a la mayoría de los lectores.

Conclusión

El uso de Google Fonts en WordPress puede ayudarlo a cambiar rápidamente la apariencia de su sitio web. Ya sea que intente buscar un sitio de aspecto profesional o uno divertido, es probable que Google Fonts tenga la fuente perfecta para usted.

Le mostramos cómo puede agregar Google Fonts a su sitio web manualmente usando la función wp_enqueue_style () y usando el complemento Easy Google Fonts. Con suerte, ahora está en una buena posición para llevar las cosas más lejos.

¿Alguna vez ha utilizado una biblioteca de fuentes en su sitio web de WordPress? ¡Nos encantaría saber de usted, así que háganoslo saber comentando a continuación!