Es muy fácil usar Google Fonts en WordPress. Se trata de un directorio gratuito con más de 800 fuentes web que puedes usar en tu sitio web. Google Fonts es un servicio gratuito muy popular que utilizan millones de sitios web de WordPress para mejorar su apariencia y usabilidad. Aquí te mostramos cómo usar Google Fonts en WordPress sin afectar el rendimiento del sitio y mejorando tu PageSpeed .
Método 1: Aloje fuentes de Google en su servidor WordPress
Paso 1: Elige una fuente de Google
Usar menos fuentes de Google reducirá las solicitudes (menos fuentes = menos solicitudes).
Seleccione cuidadosamente los grosores de fuente: la cantidad de grosores que utilice también afectará la velocidad de carga de su página. Para asegurarse de que Google Fonts solo cargue los grosores necesarios, desactive los demás para que solo se carguen los que necesita.
Paso 2: Descargar la fuente
Descargar la fuente es el segundo paso del proceso. Es importante tener en cuenta que Google descargará automáticamente todos los grosores de fuente, por lo que no es necesario seleccionarlos en esta etapa. En su lugar, es necesario seleccionarlos en el tercer paso.
Paso 3: Convertir fuentes a fuentes web
Haz clic en el botón "Añadir fuentes" en su sitio web, selecciona solo las fuentes que usarás en tu sitio web y súbelas. Se trata de un archivo roboto-regular.ttf y otro roboto-bold.ttf, por lo que se incluyen ambos grosores. Dado que WOFF y WOFF2 son compatibles con todos los navegadores principales, deja la configuración como está. Haz clic en el botón "Convertir" para iniciar el proceso de conversión.
Paso 4: Descargar los archivos de fuentes convertidos
Una vez convertidas las fuentes, podrás descargarlas. Como se han descargado dos fuentes en nuestro ordenador, tendremos un total de cuatro archivos de fuentes en el archivo zip (ya que descargamos dos fuentes, tendremos cuatro archivos de fuentes en el archivo zip).
Paso 5: Subir archivos de fuentes a WordPress
Asegúrese de subir los archivos de fuentes web mediante FTP o cPanel, idealmente a la carpeta wp-content/uploads, para evitar que las actualizaciones del tema y del núcleo los sobrescriban. Subimos las fuentes a una carpeta llamada "fonts" (para que estuvieran separadas de otros archivos). Debería poder descargar las fuentes después de abrir los enlaces en su navegador, lo que le permitirá confirmar que se subieron correctamente.
Paso 6: Agregar fuente personalizada al CSS
Después de descargar el archivo zip, agregaremos el CSS stylesheet.css al archivo. El código CSS a continuación conecta tus fuentes con tu CSS existente y las pone a tu disposición.
Puedes colocar el código CSS en functions.php o iniciar tu archivo style.css. Puedes usar un archivo CSS externo o la función wp_enqueue_style de WordPress en el código CSS. Lo pegaremos en el archivo style.css predeterminado del tema. Reemplaza las URL relativas por URL absolutas copiando y pegando el código en la hoja de estilos.
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.
.fuente robot {
familia de fuentes: “Roboto”, “Arial”, sans-serif; }
.fuente_negrita_roboto {
familia de fuentes: “Roboto”, “Arial”, sans-serif;
peso de fuente: negrita;
}
Paso 7: Establecer 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 subir el archivo stylesheet.css que obtuviste dentro de tu archivo stylesheet.css y agregar el CSS. El código CSS a continuación hará que tus fuentes funcionen con tu CSS existente y estén listas para usarse en cuanto lo introduzcas. Puedes usar una hoja de estilos externa o la función de WordPress wp_enqueue_style para poner hojas de estilos en cola.
Método 2: Precarga de fuentes web: Optimización de la parte superior de la página
Si usas Google Fonts, quizás necesites consultar la hoja de estilo que Google preparó y envió a tu sitio web de WordPress desde sus servidores. Al usar la herramienta para desarrolladores de Google Chrome para inspeccionar tu sitio web, puedes echar un vistazo al proceso en segundo plano. Es posible que veas dos entradas para Google Fonts en el código fuente.
Vea la imagen que se adjunta aquí.
Al hacer clic en el fonts.googleapis , verá que la hoja de estilo para la que creó 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 font-face.
Esto indica que el usuario debe visitar fonts.gstatic.com para obtener el grosor de fuente necesario si se utiliza un grosor de fuente diferente. Este paso puede alargar la carga de la página de WordPress.
Por lo tanto, acceda al archivo functions.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 twentyeleven_resource_hints( $urls, $tipo_de_relación ) {
si ( wp_style_is( 'rumi-fonts', 'queue' ) && 'preconnect' === $relation_type ) {
$urls[] = matriz(
'href' => 'https://fonts.gstatic.com',
'origen cruzado'
);
}
devuelve $urls;
}
add_filter( 'wp_resource_hints', 'twentyeleven_resource_hints', 10, 2 );
Método 3: Optimizar las fuentes de Google en WordPress mediante un complemento
Los plugins, como ocurre con la mayoría de las tareas relacionadas con WordPress, simplifican enormemente la optimización de Google Fonts. Además, se encargan del aspecto del software, para que no tengas que preocuparte 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.
Esto ocurre porque las fuentes de Google no son compatibles con WordPress. Esto indica que tu sitio de WordPress necesita optimizar las fuentes de Google.
Para ello se puede utilizar un plugin gratuito: OMGF | Host Google Fonts Locally.
Tras completar la instalación, el plugin cambiará inmediatamente el método "wp en queue script()" de Google Fonts de WordPress a la función "wp head()". Este plugin realiza todo automáticamente.
Encuentre más artículos como este en Seahawk Media.
