Es fácil utilizar Google Fonts en WordPress. Se trata de un directorio gratuito con más de 800 fuentes web que puedes utilizar en tu sitio web. El servicio de Google Fonts es un servicio gratuito de primera categoría utilizado por millones de sitios web de WordPress para mejorar el aspecto y la usabilidad de su sitio web. A continuación, te explicamos cómo utilizar las fuentes de Google en WordPress sin comprometer el rendimiento del sitio y mejorando las puntuaciones de PageSpeed.
Método 1: alojar las fuentes de Google en su servidor de WordPress
Paso 1: Elegir una fuente de Google
Utilizar menos Google Fonts reducirá las solicitudes (menos fuentes = menos solicitudes).
Selecciona cuidadosamente los pesos de las fuentes - El número de pesos de las fuentes que utilices también afectará a la velocidad de carga de tu página. Para garantizar que Google Fonts solo cargue los pesos que necesitas, desmarca los demás para que solo se empaqueten las consecuencias que necesitas.
Paso 2: Descargar la fuente
La descarga de la fuente es el segundo paso del proceso. Es importante señalar que Google descargará automáticamente todos los pesos de las fuentes, por lo que la selección de los pesos de las fuentes no es necesaria en esta etapa. En cambio, la selección de los pesos de las fuentes es necesaria para el tercer paso.
Paso 3: Convertir las fuentes en fuentes web
Haga clic en el botón Añadir fuentes en su sitio, seleccione sólo las fuentes que utilizará en su sitio web y cárguelas. Se trata de 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, deja los ajustes como están. Haga clic en el botón Convertir para comenzar el proceso de conversión.
Paso 4: Descargar los archivos de fuentes convertidos
En cuanto las fuentes se hayan convertido, podrás descargarlas. Como se han descargado dos fuentes en nuestro ordenador, tendremos un total de 4 archivos de fuentes en el archivo zip (como hemos descargado dos fuentes, tendremos cuatro archivos de fuentes en el archivo zip).
Paso 5: Subir los archivos de fuentes a los archivos de WordPress
Por favor, asegúrese de que los archivos de fuentes web se suben a través de FTP o cPanel, idealmente en la carpeta wp-content/uploads, para evitar que se sobrescriban con las actualizaciones del tema y del núcleo. Subimos las fuentes a una carpeta "fonts" (para que estén separadas de otros archivos). Deberías poder descargar las fuentes después de abrir los enlaces en tu navegador, para que puedas confirmar que se han subido con éxito.
Paso 6: Añadir la fuente personalizada al CSS
Después de descargar el archivo zip, añadiremos el CSS stylesheet.css en el archivo. El código CSS de abajo conecta sus fuentes a su CSS existente y las hace disponibles.
Puedes colocar el código CSS en functions.php o iniciar tu archivo style.css. En el código CSS se puede utilizar un archivo CSS externo o la función wp_enqueue_style de WordPress. En el archivo style.css por defecto del tema, lo pegaremos. Sustituye cualquier URL relativa por una absoluta copiando/pegando el código en la hoja de estilos.
URLs por defecto del tema en stylesheet.css:
src: url('Roboto-Bold.woff2') format('woff2'),
url('Roboto-Bold.woff') format('woff');
Cambia a:
src: url('https://demo.com/wp-content/uploads/fonts/Roboto-Regular.woff2') format('woff2'),
url('https://demo.com/wp-content/uploads/fonts/Roboto-Regular.woff') format('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 {
font-family: "Roboto", "Arial", sans-serif; }
.roboto_bold_font {
font-family: "Roboto", "Arial", sans-serif;
font-weight: bold;
}
Paso 7: Establecer la fuente por defecto
Para que esta fuente sea la predeterminada en su sitio web, debe incluir el código CSS en su archivo style.css.
Es posible que tenga que depurar o editar la fuente para reemplazar las propiedades de font-family existentes.
El siguiente paso es subir el archivo stylesheet.css que has obtenido dentro de tu archivo llamado stylesheet.css y añadir el CSS. El código CSS que se muestra a continuación hará que tus fuentes funcionen con tu CSS existente y estén listas para ser usadas tan pronto como lo introduzcas. Puedes utilizar una hoja de estilos externa o la función de WordPress wp_enqueue_style para poner en cola las hojas de estilo.
Método 2: Precarga de fuentes web - Optimización por encima del pliegue
Si utiliza Google Fonts, es posible que tenga que consultar la hoja de estilo preparada por Google y enviada a su sitio web de WordPress desde los servidores de Google. Si utiliza la herramienta para desarrolladores que ofrece Google Chrome para inspeccionar su sitio web, es posible que vea el proceso entre bastidores. Es posible que vea dos entradas para Google Fonts dentro de Source.
Por favor, vea la imagen que se ha adjuntado aquí.
Cuando se hace clic en el enlace fonts.googleapis, se sabe que la hoja de estilos para la que se produjo la URL se muestra en la página abierta. Además, se hace una llamada al archivo de fuentes específico para cada declaración de font-face.
Esto indica que el usuario tiene que 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 de carga de la página de WordPress.
Por lo tanto, acceda al archivo functions.php de su tema actual, e introduzca el siguiente código PHP dentro de la función que se encarga de gestionar las fuentes.
function twentyeleven_resource_hints( $urls, $relation_type ) {
if ( wp_style_is( 'rumi-fonts', 'queue' ) && 'preconnect' === $relation_type ) {
$urls[] = array(
'href' => 'https://fonts.gstatic.com',
"crossorigin,
);
}
devolver $urls;
}
add_filter( 'wp_resource_hints', 'twentyeleven_resource_hints', 10, 2 );
Método 3: Optimizar Google Fonts WordPress mediante un plugin
Los plugins, como ocurre con la mayoría de las tareas relacionadas con WordPress, simplifican mucho la optimización de Google Fonts. Además, se encargarán del aspecto del software por ti, por lo que no tendrás que preocuparte de 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 mediante PageSpeed Insights o GTmettrix, obtendrá el siguiente mensaje de error: fonts.googleapis.com.
Ocurre porque las Google Fonts no son compatibles con la plataforma WordPress. Indica que su sitio de WordPress necesita tener sus Google Fonts optimizadas.
Para la fijación de las mismas se puede utilizar un plugin gratuito. Es - OMGF | Host Google Fonts Locally
Después de completar la instalación, el plugin comenzará inmediatamente a cambiar el método de WordPress wp en queue script()Google Fonts a la función wp head(). Este plugin hace todo por sí mismo.
Encuentre más artículos de este tipo en Seahawk Media.
