Como propietario de un sitio web de WordPress, probablemente se haya topado con una serie de temas que dudaba en utilizar debido a sus opciones de fuentes integradas.
Fuentes de Google ofrece una gran colección de fuentes web de código abierto diseñadas para hacer que la web sea más hermosa, rápida y abierta mediante una excelente tipografía. Y si está buscando una forma sencilla de darle personalidad a su contenido manteniendo la legibilidad, integrar Google Fonts en su sitio web es una excelente manera de hacerlo.
Con esto en mente, en esta publicación le mostraremos cómo puede comenzar a usar Google Fonts en WordPress utilizando una solución de complemento y agregando código manualmente. Pero antes de comenzar, echemos un vistazo a qué son las fuentes de Google y por qué es posible que desee utilizarlas en su sitio web.
¿Qué son las fuentes de Google?
Introducido en 2010, Fuentes de Google son fuentes de diseño gratuitas que están optimizadas para la web. Al momento de escribir este artículo, el directorio contiene 832 familias de fuentes categorizadas en cinco secciones diferentes: serif, sans serif, display, handwriting y monospace.
Aparte de la gran cantidad de opciones de tipografía a tu disposición, aquí hay algunas razones más por las que quizás quieras considerar el uso de Google Fonts en tu sitio web de WordPress:
- Disponible de forma gratuita para su uso. Todas las familias de fuentes del directorio están disponibles para su uso bajo una licencia gratuita, lo que significa que cualquiera puede usarlas para cualquier proyecto, sin importar si es personal o comercial.
- No se requiere autohospedaje. Google Fonts se encarga del alojamiento, lo que significa que no tendrás que alojar la fuente en el servidor de tu sitio web para empezar a utilizarla. En cambio, el navegador web del usuario obtendrá la fuente directamente del directorio de fuentes de Google.
Una vez que haya elegido una fuente que vaya bien con la marca de su sitio, todo lo que queda por hacer es agregarla a su sitio web de WordPress.
Cómo utilizar las fuentes de Google en su sitio web de WordPress
Aunque hay varias formas diferentes de empezar a utilizar Google Fonts en su sitio web de WordPress, le recomendamos optar por una solución optimizada para el rendimiento que garantice que su sitio no se ralentice ni se vuelva inaccesible.
En esta sección, lo guiaremos a través de dos métodos diferentes para agregar Google Fonts a su sitio web de WordPress (usando un complemento y agregando fragmentos de código manualmente) teniendo en cuenta la optimización del rendimiento.
Método 1: usar un complemento
Sin duda, la forma más sencilla de agregar Google Fonts a su sitio web de WordPress es mediante un complemento. Aunque hay varios complementos diferentes en el Directorio de complementos de WordPress que puedes usar, hemos seleccionado dos de las mejores soluciones de complementos y te recomendamos que elijas una de ellas.
Fuentes fáciles de Google
El Fuentes fáciles de Google El complemento ofrece una forma sencilla de agregar Google Fonts al tema de su sitio web de WordPress sin tener que codificar. Una vez que haya instalado y activado el complemento, podrá personalizar la configuración de tipografía de su contenido directamente desde el Personalizador de WordPress y obtener una vista previa de los cambios en tiempo real.
Y si desea llevar las cosas al siguiente nivel, puede dirigirse a la página de configuración del complemento desde el back-end de WordPress para controlar los selectores de CSS y crear configuraciones de fuentes específicas del tema.
Características clave:
- Se integra con el Personalizador de WordPress.
- Le permite crear controles y reglas de fuentes específicas del tema.
- Pone en cola automáticamente las hojas de estilo para las fuentes de Google que seleccione.
Fuentes de Google WP
Fuentes de Google WP Agrega automáticamente todos los fragmentos de código necesarios del directorio de Google Fonts directamente al HTML y CSS de su sitio web de WordPress. Además de esto, le brinda un control más preciso sobre la tipografía de su sitio web al permitirle asignar fuentes de Google a selectores CSS específicos.
Y si tiene las más mínimas inclinaciones técnicas, puede aprovechar el complemento WP Google Fonts en todo su potencial apuntando a las fuentes de Google seleccionadas desde las hojas de estilo de su tema existente.
Características clave:
- Interfaz intuitiva y fácil de usar.
- Agrega automáticamente los fragmentos de código de Google Fonts a su sitio web.
- Permite a los propietarios de sitios web asignar fuentes de Google a selectores de CSS específicos.
Método 2: agregar código manualmente
Si no te importa jugar con el código, siempre puedes adoptar el enfoque de bricolaje. El beneficio clave aquí es que no tendrá que instalar otro complemento en su sitio web.
Para comenzar, dirígete al sitio web de Google Fonts y busca en el directorio una fuente que quieras agregar a tu sitio web de WordPress. Para los fines de este tutorial, lo demostraré agregando el lato fuente a un sitio web de WordPress.
Una vez que haya decidido una fuente, haga clic en el Seleccione esta fuente en la esquina superior derecha de la pantalla. Esto debería agregar la fuente al Familia seleccionada cajón en la parte inferior de la pantalla.
A continuación, inicie el Familia seleccionada cajón y navegue hasta el Personalizar pestaña para seleccionar los estilos que le gustaría incluir en la fuente. He decidido incluir Delgado 100 y Regular 400 en mi selección.
Una vez hecho esto, navega de regreso a la Empotrar pestaña en el Familia seleccionada cajón y copie la URL que apunta a su selección de fuente. Siguiendo nuestro ejemplo, la URL es https://fonts.googleapis.com/css?family=Lato:100,400.
Ahora usaremos el wp_enqueue_style() Función para agregar nuestra fuente seleccionada a nuestro sitio web de WordPress. Agregue las siguientes líneas de código a su tema existente funciones.php archivo y reemplace la URL con la suya propia:
función add_google_fonts() { wp_enqueue_style(' add_google_fonts ', ' https://fonts.googleapis.com/css?family=Lato:100,400', false ); } add_action( 'wp_enqueue_scripts', 'adding_google_fonts' );
Guarde y cierre el funciones.php archivo para continuar. En este punto, la fuente de Google que seleccionó debería estar integrada en su sitio web de WordPress. Para comenzar a usar la fuente recién agregada en su sitio web, simplemente agregue la siguiente declaración de familia de fuentes (o una similar) a la hoja de estilo principal de su tema:
cuerpo {familia de fuentes: 'Lato', sans-serif; peso de fuente: normal; tamaño de fuente: 12px; }
¡Eso es todo al respecto! La fuente que integró en su sitio web de WordPress ahora debería aplicarse a los selectores de CSS que especificó en la hoja de estilo de su tema.
Conclusión
Usar Google Fonts en su sitio web de WordPress es una excelente manera de aumentar su atractivo visual y mejorar la legibilidad de su contenido. Le recomendamos que pruebe diferentes fuentes en su sitio web y las aplique a los títulos, subtítulos y párrafos como mejor le parezca.
Recapitulemos rápidamente las principales formas en que puede comenzar a usar Google Fonts en su sitio web de WordPress:
- Utilice un complemento como Fuentes fáciles de Google o Fuentes de Google WP para comenzar con Google Fonts en WordPress sin tener que perder el tiempo con el código.
- Utilizar el wp_enqueue_style() función para integrar la fuente de Google seleccionada en su tema existente y luego aplicarla a diferentes selectores de CSS a través de la hoja de estilo de su tema.
¿Tiene alguna pregunta sobre el uso de Google Fonts en su sitio web de WordPress? ¡Háganos saber comentando a continuación!
