2 formas de agregar fuentes de Google a su sitio de WordPress - Calendae | Informática, Electrónica, CMS, Ciberseguridad

2 formas de agregar fuentes de Google a su sitio de WordPress

Hola de nuevo. En el teclado Samuel López y esta vez te voy a contar sobre 2 formas de agregar fuentes de Google a su sitio de WordPress

Gracias a la biblioteca Google Fonts, incluso los desarrolladores web independientes y las grandes agencias web tienen acceso a un repositorio web de más de 900 fuentes de calidad listas para usar sin costo.

Tipografía Google Fonts es uno de los plugins de WordPress que integra Google Fonts con su sitio de WordPress. En este tutorial, aprenderá a instalar y configurar este plugin.

También aprenderá cómo integrar Google Fonts directamente con su sitio de WordPress agregando un par de líneas de código en el archivo. functions.php expediente.

¡Vamos a empezar!


Método No. 1. Utilice un plugin de WordPress

Este primer método no requiere escribir ningún código. Usaremos un plugin llamado «Tipografía de fuentes de Google».

  • Hacer clic Plugins> Agregar nuevo
  • Ingrese su frase de búsqueda «Fuentes de Google«En el cuadro de búsqueda
  • Seleccione el primer resultado y haga clic Instalar ahora
  • Hacer clic Activar

  • En la página Plugins, busque Tipografía Google Fonts y haga clic en ajustes

haga clic en Configuración

Aterrizará en la pantalla Personalizar para su tema actual.

  • Haga clic en el Fuentes de Google tarjeta vertical

Haga clic en la pestaña vertical Google Fonts

Prestaremos atención a las dos primeras opciones: «Configuración básica» y «Configuración avanzada».

Puede configurar fuentes relacionadas con el contenido de su sitio aquí. Hay 3 opciones:

  • Tipografía básica – todos los elementos de texto dentro de la etiqueta, excepto las etiquetas de encabezado, botones y elementos de entrada
  • Tipografía de encabezados
  • Tipografía de botón y entrada

Tres opciones para configurar fuentes

  • Seleccione una fuente diferente de cada menú desplegable y vea cómo cambia la vista previa
  • Juega un rato hasta que encuentres la combinación correcta de personajes.

Juega un rato hasta que encuentres la combinación correcta de personajes.

  • Haga clic en el atrás flecha y seleccione el archivo Ajustes avanzados

Estas opciones de configuración se refieren a otras secciones de su sitio.

Darse cuenta: Puede anular en Satisfacer Pestaña de encabezados y tipografía básica (ya establecida en la configuración básica) + puede orientar cada nivel de encabezado por separado

Puede anular la tipografía básica y los encabezados en la pestaña Contenido

  • Seleccione Navegación y cambie la familia de fuentes para este elemento de página

Seleccione Navegación y cambie la familia de fuentes

  • Siga editando hasta que esté satisfecho
  • Hacer clic Publicar

Método No. 2. Agrega Google Fonts a tu sitio

Este enfoque no depende de un plugin. En su lugar, agregará código directamente a su tema.

Selecciona los personajes

  • Ir Fuentes de Google sitio en su navegador
  • Busque o busque los caracteres que desee y haga clic en el símbolo «+» para agregarlos

Busque o busque los caracteres deseados y haga clic en el símbolo +

  • Copie el hipervínculo para insertarlo en su sitio

Copie el hipervínculo para insertarlo en su sitio

Agregar función PHP

  • Vaya al directorio de temas activos de su sitio
  • Abre el functions.php expediente

Abra el archivo functions.php

  • Copia y pega este codigo:
<?php
function wpb_add_google_fonts() 
   wp_enqueue_style( 'wpb-google-fonts', 'https://fonts.googleapis.com/css?family=Playfair+Display
   
   add_action( 'wp_enqueue_scripts', 'wpb_add_google_fonts' );
?>

Asegúrese de reemplazar el enlace por el suyo.

El estilo CSS

  • Abre el style.css tu archivo de tema
  • Copia y pega este codigo:
body 
   font-family: 'Stint Ultra Expanded', cursive;


h1,
h2,
h3 
   font-family: 'Playfair Display', serif;


button,
input 
   font-family: 'Space Mono', monospace;

copia y pega este codigo



No te olvides compartir en tus redes sociales para que tus colegas lo sepan

👇👇👇 😘 💪 👇👇👇

Comparte