{"id":92613,"date":"2021-06-14T20:09:13","date_gmt":"2021-06-14T14:39:13","guid":{"rendered":"https:\/\/git-staging.wpastra.com\/?post_type=docs&p=92613"},"modified":"2023-02-08T06:43:45","modified_gmt":"2023-02-08T01:13:45","slug":"self-hosted-google-fonts","status":"publish","type":"docs","link":"https:\/\/git-staging.wpastra.com\/es\/docs\/self-hosted-google-fonts\/","title":{"rendered":"\u00bfC\u00f3mo autoalojar Google Fonts en Astra?"},"content":{"rendered":"

El tema Astra introduce una nueva funci\u00f3n llamada Google Fonts autoalojadas disponible con la versi\u00f3n gratuita 3.6.0 del tema. Esta caracter\u00edstica trae CLS y mejoras de rendimiento mediante la carga y el ahorro de las fuentes de Google a nivel local en el formato \"woff2\". Puedes ir a Astra> Configuraci\u00f3n y activar la opci\u00f3n \"Cargar Google Fonts localmente\" para utilizar esta funci\u00f3n. M\u00e1s informaci\u00f3n sobre Google Fonts autoalojadas en nuestra secci\u00f3n Art\u00edculo de blog<\/a>.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Aunque la funci\u00f3n aporta grandes mejoras, es posible que tenga que hacer algunas modificaciones en situaciones espec\u00edficas, en las que tenga que utilizar diferentes formatos de archivo de fuentes o en caso de que utilice Astra's funci\u00f3n de marca blanca<\/a>. <\/p>\n\n\n\n

Este documento le mostrar\u00e1 c\u00f3mo realizar estas modificaciones f\u00e1cilmente.<\/p>\n\n\n\n

C\u00f3mo modificar la funci\u00f3n<\/h2>\n\n\n\n

Uno de los casos en los que necesitar\u00e1s modificar la funci\u00f3n \"Google Fonts autoalojadas\" es cuando el formato de archivo de fuentes \"woff2\" no se adapte lo mejor posible a tus necesidades. Por este motivo, hemos a\u00f1adido un filtro para cambiar el formato de los archivos de fuentes, que se guardar\u00e1n localmente. <\/p>\n\n\n\n

Adem\u00e1s, esta nueva funci\u00f3n crea una nueva carpeta de fuentes locales y un nuevo archivo CSS de fuentes locales. Ambos tienen las marcas Astra en sus nombres, que pueden cambiarse si se utiliza la funci\u00f3n funci\u00f3n de marca blanca<\/a>. Puedes a\u00f1adir un filtro para eliminar las marcas Astra y asignar los nombres que necesites.<\/p>\n\n\n\n

Utilizando estos filtros, podr\u00e1 realizar los cambios mencionados en su sitio web relacionados con esta funci\u00f3n sin dejar de beneficiarse de todas las mejoras que aporta.<\/p>\n\n\n\n

Antes de pasar a los filtros, es importante mencionar que es aconsejable tener un Child Theme instalado al a\u00f1adir cualquier c\u00f3digo personalizado a su sitio web. Si necesita m\u00e1s informaci\u00f3n sobre el uso de un Child Theme echa un vistazo a este art\u00edculo<\/a>. Adem\u00e1s, le sugerimos que intente hacer lo siguiente utilizando un entorno de puesta en escena<\/a> y no directamente su sitio web en directo (de producci\u00f3n).<\/p>\n\n\n\n

\u00bfC\u00f3mo cargar archivos de fuentes en formatos distintos de \"woff2\"?<\/h3>\n\n\n\n

Aunque el \"woff2\" tiene sus ventajas, puede que no se adapte perfectamente a todos los sitios web. <\/p>\n\n\n\n

El formato \"woff2\" funcionar\u00e1 con alrededor de 96% de los navegadores utilizados actualmente. Sin embargo, algunos navegadores como Internet Explorer y Opera Mini no lo soportan. La soluci\u00f3n para esto es cargar diferentes formatos de archivo de fuentes.<\/p>\n\n\n\n

En este caso, s\u00f3lo tendr\u00eda que cambiar el formato de archivo de la fuente a \"woff\", que es un formato compatible con estos navegadores. <\/p>\n\n\n\n

Para cambiar el formato del archivo de fuentes a \"woff\", a\u00f1ada el siguiente filtro al archivo functions.php de su tema hijo:<\/p>\n\n\n\n

\/\/ Cargar formatos de fuente distintos de \"woff2\"\n\nadd_filter( 'astra_local_google_fonts_format', 'update_astra_local_fonts_format' );\nfunction update_astra_local_fonts_format( $font_format ) {\n<\/span>  $font_format = 'woff'; \/\/ Esto cambiar\u00e1 el formato a \"woff\" - tambi\u00e9n puede usar otro formato\n  return $font_format;\n}<\/pre>\n\n\n\n
Puede cambiar el formato del archivo de fuentes a cualquier otro tambi\u00e9n utilizando el mismo filtro - s\u00f3lo tiene que sustituir \"woff\" por otro formato en esta l\u00ednea del c\u00f3digo del filtro:<\/p>\n\n\n\n
$font_format = 'woff<\/strong>'; \/\/ Esto cambiar\u00e1 el formato a \"woff\"<\/pre>\n\n\n\n
\u00bfC\u00f3mo poner esta funci\u00f3n en marca blanca?<\/h3>\n\n\n\n
Como ya se ha mencionado, la funci\u00f3n \"Google Fonts autoalojadas\" crear\u00e1 la carpeta de fuentes y el archivo CSS de fuentes locales, que contendr\u00e1n las huellas de la afiliaci\u00f3n a Astra en sus nombres. Si tus clientes inspeccionan el c\u00f3digo o las carpetas del sitio web, podr\u00e1n ver las marcas Astra mencionadas (y no tu propia marca). <\/p>\n\n\n\n
Si desea cambiar los nombres de la carpeta de fuentes y\/o el archivo CSS de fuentes locales, puede hacerlo a\u00f1adiendo los dos filtros siguientes al archivo functions.php de su tema hijo:<\/p>\n\n\n\n