Es fácil utilizar Google Fonts en WordPress. Es un directorio gratuito de más de 800 fuentes web que puedes utilizar en tu sitio web. El servicio Google Fonts es un servicio gratuito de primera categoría utilizado por millones de sitios web de WordPress para mejorar la apariencia y usabilidad de su sitio web. Aquí se explica cómo utilizar las fuentes de Google en WordPress sin comprometer el rendimiento del sitio y mejorar sus de PageSpeed .
Método 1: Aloje Google Fonts en su servidor de WordPress
Paso 1: elige una fuente de Google
Usar menos fuentes de Google reducirá las solicitudes (menos fuentes = menos solicitudes).
Seleccione los pesos de fuente con cuidado: la cantidad de pesos de fuente que utilice también afectará la velocidad a la que se carga su página. Para asegurarse de que Google Fonts solo cargue los pesos que necesita, desmarque los demás para que solo se empaqueten las consecuencias que necesita.
Paso 2: descarga la fuente
Descargar la fuente es el segundo paso del proceso. Es importante tener en cuenta que Google descargará automáticamente todos los pesos de fuente, por lo que no es necesario seleccionarlos en esta etapa. En cambio, la selección de los pesos de fuente es necesaria para el paso tres.
Paso 3: convertir fuentes en fuentes web
Haga clic en el botón Agregar fuentes en su sitio, seleccione solo las fuentes que usará en su sitio web y cárguelas. Es un archivo roboto-regular.ttf y un archivo roboto-bold.ttf, por lo que se incluyen ambos pesos. Como WOFF y WOFF2 cubren todos los navegadores importantes, deje la configuración como está. Haga clic en el botón Convertir para comenzar el proceso de conversión.
Paso 4: descargue los archivos de fuentes convertidos
Tan pronto como se hayan convertido las fuentes, podrá descargarlas. Dado que se descargaron dos fuentes a nuestra computadora, tendremos un total de 4 archivos de fuentes en el archivo zip (dado que descargamos dos fuentes, tendremos cuatro archivos de fuentes en el archivo zip).
Paso 5: cargue archivos de fuentes en archivos de WordPress
Asegúrese de que los archivos de fuentes web se carguen a través de FTP o cPanel , idealmente en la carpeta wp-content/uploads, para evitar que se sobrescriban con actualizaciones principales y de temas. Subimos las fuentes a una carpeta de "fuentes" (para que estuvieran separadas de otros archivos). Debería poder descargar las fuentes después de abrir los enlaces en su navegador, para poder confirmar que se cargaron correctamente.
Paso 6: agregue una fuente personalizada a CSS
Después de descargar el archivo zip, agregaremos el CSS stylesheet.css en el archivo. El código CSS siguiente conecta sus fuentes con su CSS existente y las pone a disposición.
Puede colocar el código CSS en funciones.php o iniciar su archivo style.css. Se puede utilizar un archivo CSS externo o la función wp_enqueue_style de WordPress en el código CSS. En el archivo style.css predeterminado del tema, lo pegaremos. Reemplace las URL relativas con URL absolutas copiando/pegando el código en la hoja de estilo.
URL predeterminadas del tema en stylesheet.css:
src: url('Roboto-Bold.woff2') formato('woff2'),
url('Roboto-Bold.woff') formato('woff');
Cambiar a:
src: url('https://demo.com/wp-content/uploads/fonts/Roboto-Regular.woff2') formato('woff2'),
url('https://demo.com/wp-content/uploads/fonts/Roboto-Regular.woff') formato('woff');
Para utilizar fácilmente la fuente en el HTML actual, cree una clase personalizada. Clases CSS roboto_font y roboto_bold_font .
.roboto_font {
familia de fuentes: “Roboto”, “Arial”, sans-serif; }
.roboto_bold_font {
familia de fuentes: “Roboto”, “Arial”, sans-serif;
peso de fuente: negrita;
}
Paso 7: establezca la fuente predeterminada
Para que esta fuente sea la fuente predeterminada en su sitio web, debe incluir el código CSS en su archivo style.css.
Es posible que tengas que depurar o editar la fuente para reemplazar las propiedades de la familia de fuentes existentes.
El siguiente paso es cargar el archivo stylesheet.css que obtuvo dentro de su archivo llamado stylesheet.css y agregar el CSS. El código CSS a continuación hará que sus fuentes funcionen con su CSS existente y estén listas para usarse tan pronto como las ingrese. Puede utilizar una hoja de estilo externa o la función de WordPress wp_enqueue_style para poner en cola las hojas de estilo.
Método 2: Precargar fuentes web: optimización en la mitad superior de la página
Si está utilizando Google Fonts, es posible que deba consultar la hoja de estilo preparada por Google y enviada a su sitio web de WordPress desde los servidores de Google. Cuando utiliza la herramienta de desarrollo que ofrece Google Chrome para inspeccionar su sitio web, puede vislumbrar el proceso detrás de escena. Existe la posibilidad de que vea dos entradas para Google Fonts dentro de Fuente.
Por favor vea la imagen que se adjunta aquí.
Cuando hace clic en el fonts.googleapis , verá que la hoja de estilo para la que produjo la URL se muestra en la página abierta. Además, se realiza una llamada al archivo de fuente específico para cada declaración de fuente.
Esto indica que el usuario debe visitar fonts.gstatic.com para obtener el peso necesario para la fuente si se utiliza un peso de fuente diferente. Este paso puede alargar el tiempo que tarda en cargarse su página de WordPress.
Por lo tanto, acceda al archivo funciones.php de su tema actual e ingrese el siguiente código PHP dentro de la función que se encarga de administrar las fuentes.
función veinteeleven_resource_hints( $urls, $tipo_relación ) {
if ( wp_style_is( 'rumi-fonts', 'cola' ) && 'preconexión' === $ tipo_relación ) {
$url[] = matriz(
'href' => 'https://fonts.gstatic.com',
'origen cruzado'
);
}
devolver $urls;
}
add_filter ('wp_resource_hints', 'veinteeleven_resource_hints', 10, 2);
Método 3: Optimice Google Fonts WordPress mediante el complemento
Los complementos, como ocurre con la mayoría de las tareas relacionadas con WordPress, simplifican mucho la optimización de Google Fonts. Además, ellos se encargarán del aspecto del software por usted, por lo que no tendrá que preocuparse por dónde debe ir el código en el sistema.
Si tiene Google Fonts instalado en su sitio web de WordPress y ejecuta una prueba de rendimiento con PageSpeed Insights o GTmettrix, recibirá el siguiente mensaje de error: fonts.googleapis.com.
Ocurre porque Google Fonts no es compatible con la plataforma WordPress. Indica que su sitio de WordPress necesita optimizar sus fuentes de Google.
Se puede utilizar un complemento gratuito para la fijación del mismo. Lo es – Dios mío | Aloje fuentes de Google localmente
Después de completar la instalación, el complemento comenzará inmediatamente a cambiar el método WordPress wp en queue script()Google Fonts a la función wp head(). Este complemento hace todo por sí solo.
Encuentre más artículos de este tipo en Seahawk Media .
