Cómo agregar fuentes de Google a su tema de WordPress

Uno de los cambios más fáciles que puede realizar en su blog es cambiar las fuentes predeterminadas que vienen con su diseño.

Elegir la combinación correcta de fuentes puede hacer que tu blog luzca de aburrido y aburrido a fabuloso en minutos, y todo lo que tienes que hacer es cambiar las fuentes.

Desde hace varios años, Google ha sido una excelente fuente de fuentes gratuitas que son fáciles de implementar en su propio sitio web.

Además de eso, Google incluso le da instrucciones sobre cómo incrustar las fuentes que desea en el sitio web. Sin embargo, las instrucciones de Google no están realmente diseñadas para funcionar con WordPress.

Hoy vamos a ver cómo puede agregar fácilmente Google Fonts a su blog de WordPress.

Agregar fuentes de Google con un complemento

Una de las formas más fáciles de agregar Google Fonts a su blog es usar un complemento. Hay varias opciones disponibles, pero no todos los complementos son iguales.

Al elegir un complemento; Preste atención a la calificación general y la fecha de la última actualización. Desea un complemento actualizado recientemente que indique que el complemento se mantiene activamente; así como el que tenga al menos 4 estrellas.

Fuentes de google simples

Easy Google Fonts es mi primera opción en este caso. Tiene una calificación de 5 estrellas y se mantiene activamente. Con este pequeño complemento, puede elegir una de las fuentes enumeradas en el directorio de fuentes de Google.

Lo que es aún mejor es que se integra con el personalizador nativo de WordPress para que pueda obtener una vista previa en vivo de las fuentes que elija.

Estilos de personalización en vivo

Puede personalizar cualquier aspecto de la fuente y crear controles de fuente personalizados en su panel de control. Incluso existe la opción de ingresar su clave API de Google, que puede usar para actualizar su diseño cada vez que Google Fonts se actualiza con nuevas fuentes.

Cuando personaliza las fuentes, tiene un control total sobre el estilo, la apariencia e incluso la posición de las fuentes.

Puede cambiar el color y el tamaño de la fuente y elegir entre diferentes pesos de fuente. Puede elegir una fuente diferente para sus párrafos y cada uno de los 6 títulos.

Agregar fuentes de Google sin un complemento

Finalmente, puede agregar Google Fonts a su blog sin el uso de un complemento agregando manualmente algunas líneas de código a su archivo functions.php y agregando los selectores correctos a su archivo style.css.

Como siempre, se recomienda que realice todos los cambios de código a través de temas secundarios para no perder los cambios cuando se publique la actualización del tema. También debe hacer una copia de seguridad de todos los archivos antes de realizar cualquier cambio, y si no se siente cómodo al hacer cambios con el código, considere usar una de las opciones de complementos anteriores.

Lo primero que debe hacer es ir al directorio de fuentes de Google y seleccionar las fuentes que desee. Se recomienda que limite su selección a no más de 2 a 3 fuentes, ya que agregar más fuentes aumentará el tiempo de carga de la página.

Afortunadamente, Google le muestra exactamente cómo las fuentes seleccionadas afectan el tiempo de carga de su página. Así que elija en consecuencia y elija solo los estilos que sabe que usará.

Una vez que haya elegido las fuentes, copie y pegue el pequeño fragmento de código que le brinda Google y péguelo en un editor de texto como el Bloc de notas. El código se verá así:

<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300" rel="stylesheet" type="text/css">

Copie todo en href = up to pero no rel = ‘stylesheet’. Abra su archivo functions.php y agregue este código:

function load_fonts() {
            wp_register_style('et-googleFonts', 'http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300');
            wp_enqueue_style( 'et-googleFonts');
        }
    add_action('wp_print_styles', 'load_fonts');

Este método utiliza la función wp_enqueue_style, que es la forma correcta de agregar estilos y scripts a WordPress.

Lo último que debe hacer es agregar los selectores correctos a su archivo de hoja de estilo. Abra este archivo y busque la selección del cuerpo. Reemplace la fuente proporcionada allí con la fuente deseada. El código final se ve así:

body {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    color: #000000;
}

Puede hacer lo mismo con sus títulos. Asegúrese de utilizar un tema secundario o una opción CSS personalizada como se mencionó anteriormente. De lo contrario, sus cambios se perderán cuando se actualice el tema.

Conclusión

Como puede ver, existen varios métodos para agregar fuentes de Google a su tema de WordPress.

La forma más fácil es con complementos, pero agregar algunas líneas de código tampoco es tan difícil, y es mi método preferido en lugar de instalar un complemento para cambios simples.

Por supuesto, elija el método que le resulte más fácil y siga los métodos y consejos descritos en esta publicación.

Deja un comentario

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con tus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, aceptas el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad