Como cargar las fuentes de Google en local en 3 pasos

Una de las técnicas más aconsejadas para optimizar una web es cargar las fuentes en local, debido a que es mucho más rápido acceder a la fuente desde nuestro propio servidor que haciendo una petición al servidor de Google. Hoy desde Oxygenados les traemos una forma rápida y sencilla de como hacerlo utilizando Oxygen Builder sin utilizar ningún plugin.

El proceso constará de 3 pasos:

1- Deshabilitar la carga de las fuentes de Google:

Este proceso es el más sencillo de todos. Vamos a la pestaña de Oxygen - Settings - Bloat Eliminator y marcamos Disable Google Fonts justo como está en la siguiente imagen:

deshabilitar fuentes de google
deshabilitar fuentes de google

2 - Buscar la fuente que deseamos usar.

Para este proceso vamos a entrar a la siguiente url: https://google-webfonts-helper.herokuapp.com/fonts. Una vez dentro buscamos la fuente que queramos utilizar. Para este tutorial vamos a utilizar Time New Roman que es la fuente que utilizamos en el blog de Oxygenados. Seleccionamos los estilos que vamos a usar y pinchamos en descargar. Una vez descargado el archivo lo descomprimimos y subimos el contenido a nuestro wp-content. Para hacer el proceso un poco menos engorroso y más rápido suelo utilizar el plugin File Manager que es gratuito y está en el repositorio de plugins de WordPress. Con este plugin podemos acceder fácilmente a todo el contenido de nuestra web. Una vez dentro del plugin vamos a wp-content - uploads y vamos a crear una nueva carpeta llamada Fonts. Este proceso puede ser variable solo necesitamos que la fuente este en nuestro almacenamiento y la dirección en donde está ubicada. Debería quedar como esta imagen.

fuente almacenada oxygenados
fuente almacenada Oxygenados

Una vez finalizado este proceso copiamos la URL completa de donde está almacenada la fuente, en nuestro caso sería https://espressivo.online/wp-content/uploads/Fonts/ y la pegamos en la página una anteriormente mencionada, justo aquí:

enlace de la url para las fuentes oxygenados
enlace de la url para las fuentes Oxygenados

3 - Copiar el código en Oxygen:

Una vez introducida la url copiamos el código que nos aparece arriba y nos dirigimos a nuestra web especialmente al Stylesheet de Oxygen. Para acceder a esta sección puedes abrir ya sea una Página una Entrada o un Plantilla con Oxygen y en la parte superior derecha lo podemos encontrar. Una vez dentro pinchamos en Add Stylesheet y le ponemos el nombre que queramos, en nuestro caso le pondremos fonts y pegamos el código. Debería quedar de la siguiente manera:

stylesheet fuente oxygenados
stylesheet fuente oxygenados

Y listo si seguiste todos los pasos ya debe estar funcionando.

[oxy-reading-progress-bar ct_sign_sha256='35fbc9e6845bf4e2b5dc6dc7eaabe78d8fbc9ff1cf556c3f9c72c1b99a91f97a' ct_options='{"ct_id":4,"ct_parent":2,"selector":"-reading-progress-bar-4-6","original":{"oxy-reading-progress-bar_slug_readingprogressinner_background_color":"color(44)","background-color":"color(1)","height":"13","oxy-reading-progress-bar_viewport_end":"bottom","oxy-reading-progress-bar_position":"top"},"activeselector":false}'][/oxy-reading-progress-bar]
databasefile-emptyrocketthumbs-uplayers