¡Cómo alojar Google Fonts Local en WordPress (u otras fuentes también!)

¿Busca una forma de alojar a Google Fonts Local en su sitio web de WordPress? Google Fonts es maravilloso porque desbloquea muchas opciones de fuentes posibles para su sitio de WordPress. Pero también puede conducir a muchas solicitudes externas a los servidores de Google, por lo que podría preferir alojar las fuentes localmente. Aunque he enmarcado esta publicación como “Cómo alojar a Google Local en WordPress”, el método manual que mostraré que realmente trabajará con cualquier fuente, por lo que no se limita solo a Google Fonts. Más allá de este método manual, también compartiré un complemento que facilite el alojamiento local de Google Fonts (pero solo funciona con Google Fonts, no con otras fuentes).
De todos modos, ¿por qué molestarte para organizar fuentes locales? De hecho, no creo que la mayoría de los sitios tengan que albergar sus fuentes localmente. Pero es una buena opción para algunos sitios. En primer lugar, el alojamiento local de las fuentes abre todo el mundo de las fuentes web. Podrá usar cualquier fuente que encuentre y para la que tenga derechos legales. ¡Y eso es bastante ruidoso! Más allá de eso, puede haber un aumento en el rendimiento del alojamiento local, ya que puede eliminar las solicitudes externas a cualquier servidor que aloje sus fuentes, por ejemplo, puede ver esa solicitud externa a los servidores de Google para una cascada de herramientas de pingdom en el sitio. pruebas:

Ahora, esto ciertamente no significa que alojar las fuentes a nivel local siempre hará que su sitio se cargue más rápido. Cuando se habla de Google Fonts, los servidores de Google ya son bastante rápidos, y Google Fonts tiene su propio CDN para proporcionar tiempos de carga globales. Además, el navegador de alguien ya puede tener la fuente de caché, especialmente si usa una fuente popular como Lato o Roboto. Básicamente, le animo a que pruebe su sitio antes y después, para asegurarse de que el Hoster a nivel local realmente acelere el sitio. Cómo alojar a Google Fonts Local en WordPress: Método manual bueno, ahora ingresemos a la sección Instrucciones y le mostraré cómo alojar Google Fonts Local en WordPress. El artículo continúa a continuación

Recuerde que mientras usa Google Fonts como ejemplo, este método manual funcionará con cualquier otra fuente. Paso 1: Descargue el archivo de fuente para comenzar, deberá descargar el archivo de fuentes que desea usar. En Google Fonts, puede hacer clic en el enlace Seleccione esta fuente. Luego haga clic en el botón Descargar:
Al hacer clic en el botón Descargar, Google Fonts le dará un archivo zip con todos los diferentes pesos de fuentes. Sin embargo, recomiendo elegir solo el número mínimo de pesos requeridos: no use cada peso. Una buena pila es uno de los siguientes:

Regular
itálico
Atrevido
Entonces, extraiga el archivo y elimine todas las fuentes que no desea usar:
Paso 2: Convierta en formato Woff (si es necesario) Al descargar una fuente de Google Fonts, le brinda la fuente TTF. Para garantizar la compatibilidad entre los navegadores, la mayoría de las fuentes que leí parecen recomendar el uso de formatos Woff o Woff 2.0. Por lo tanto, si la fuente elegida aún no está en ese formato, puede usar la herramienta Convertio gratuita para convertirla en Woff: Paso 3: Cargar archivos de fuente al servidor, entonces tome esos archivos de fuentes y cargarlos en el servidor usando FTP o Administrador de archivos CPANEL. Consulte nuestra guía sobre cómo usar FTP en WordPress si no está seguro de cómo iniciar sesión en el servidor a través de FTP.

Para hacer los archivos con fuentes fáciles de encontrar, puede agregarlos a una carpeta llamada fuentes. Para este ejemplo, creé la carpeta de fuentes en la carpeta raíz de mi sitio. Puedes ver cómo se ve en la captura de pantalla a continuación:

El artículo continúa a continuación
Paso 4: Agregue CSS para Font Hoes después de cargar archivos de fuentes en su servidor, debe incluir esas fuentes en su sitio CSS usando @font-fac.

Para hacer esto, puede usar la pestaña CSS adicional del personalizador de WordPress. O puede usar un complemento como el CSS simple de Tom Usborne, que haré para estas capturas de pantalla. Para obtener más información, vea nuestra publicación sobre cómo agregar CSS personalizado a WordPress.


Después de haber elegido el método de agregar CSS personalizado, aquí está el CSS exacto que necesitará: @Font-Face {Font-Family: ‘Roboto-Regular’; Src: url (‘https://vast-terrmite.w5.wpsandbox.pro/fonts/robot-regular.wof’) format (‘wof’); Font-Weight: Normal; Estilo de fuente: normal; } Para este fragmento de código: Haga la familia de la familia de la familia de fuentes reales

Reemplace la URL con la URL real del archivo de fuente relevante en su servidor
También querrá repetir el fragmento de código para cada archivo de fuente separado que use. Así es como se ven los tres archivos de fuentes en mi sitio:
Paso 5: Agregue CSS para dónde usar la fuente ahora, ¡todo lo que queda por hacer es comenzar a usar sus fuentes en CSS! Por ejemplo, si me gustaría que todo mi texto use la fuente Roboto regular que anfla ahora, usaría este CSS: Body {Font-Family: ‘Roboto-Regular’, Arial, Sans-Series;} Puede agregar este CSS a la misma ubicación en la que agregó el código CSS desde el paso 4.
El artículo continúa a continuación
Te mostraré la diferencia usando un GIF de WordPress personalizado. Siga el texto del texto mientras agrega el nuevo CSS:

Paso 6: Detenga el tema de la carga de Google Font Si su sitio todavía está cargando fuentes desde el servidor Google Fonts, puede deberse a que su tema cree que debe continuar utilizando fuentes alojadas en Google Fonts.

Para detener esto, puede intentar establecer el tema para usar un sistema de fuentes del sistema (si está disponible). Por ejemplo, GenerApRess me permite tomar esta elección en la aduana de WordPress:

O generalmente puede eliminar las porciones relevantes del archivo Functions.php del tema. O, como lo indica el comentario, puede usar un tema infantil para reemplazarlo: también puede probar el complemento DISHAT Google Fonts, aunque no hay garantía de que funcione para cada tema. Cómo alojar las fuentes locales de Google con un complemento si está abrumado por el método manual, también puede alojar las fuentes de Google utilizando un complemento de WordPress llamado CAOS para Fontfonts de Daan van Bergh.

No he probado el complemento a gran escala, pero parece bastante fácil de usar. Todo lo que hace es buscar la fuente por nombre y hacer clic en Generación de la hoja de estilo:
También puede elegir exactamente qué pesos incluir. Una vez que el complemento genera la hoja de estilo, lo agregará al encabezado de su tema. Aunque el complemento es muy fácil de usar, solo funcionará para Google Fonts, mientras que el método manual funcionará para cualquier fuente. Intente alojar fuentes locales hoy El alojamiento local de fuentes es una excelente manera de abrir su sitio a nuevas fuentes y, posiblemente, acelerar su sitio.