Cómo arreglar Font Awesome Breaking con MaxCDN

Sep 28, 2020 Uncategorized

Font Awesome Breaking con MaxCDN

Soy un gran fan de Font Awesome … lo he sido durante años. Incluso contribuí al nuevo proyecto de Dave Gandy, Black Tie, en Kickstarter. De todos modos, generalmente cuando instalas y configuras MaxCDN, tus íconos de Font Awesome desaparecerán repentinamente o se romperán. Podría verse algo así a continuación.

¿La razón?

La razón es porque cuando se utilizan fuentes web a través de @ font-face u otros métodos CSS3, algunos navegadores como Firefox e IE se negarán a incrustar la fuente cuando provenga de una URL de terceros porque es un riesgo de seguridad. (fuente: MaxCDN)

Siga los pasos a continuación para evitar que Font Awesome se rompa mientras usa MaxCDN. O mejor aún, cámbiese a KeyCDN. Ya no uso MaxCDN y me cambié a KeyCDN. ¡Tiene más COP y la mitad de precio! Además, no se encontrará con problemas de fuentes increíbles.

Paso 1 – Opción a

Hay dos formas de agregar los encabezados necesarios para solucionar el problema de Font Awesome. Prefiero esta primera opción en la que los agregamos a través de MaxCDN EdgeRules (nota: solo está disponible en cuentas empresariales). De esta manera, no tiene que meterse con su archivo .htaccess localmente. Además, dependiendo de sus complementos de WordPress, su archivo .htaccess puede sobrescribirse de vez en cuando, así que es mejor tenerlo en el nivel de CDN en mi opinión.

Para agregar una EdgeRule, haga clic en su zona de extracción MaxCDN y haga clic en «EdgeRules».

reglas de borde maxcdn

Luego haremos clic en la pestaña Crear regla y luego en «Nueva regla».

nueva regla maxcdn

Seleccione «Predeterminado» para el tipo de coincidencia, en Directiva seleccione «Agregar encabezado» e ingrese lo siguiente:

Access-Control-Allow-Origin "*"

Deje el resto como predeterminado y haga clic en «Guardar».

regla de encabezado maxcdn

Después de agregar esto, deberá borrar la memoria caché de su sitio web y puede llevar unos minutos.

Paso 1 – Opción b

La segunda opción para agregar el encabezado es agregarlo a su archivo .htaccess ubicado en la raíz de su carpeta de instalación de WordPress. Voy a asumir que estás en un servidor Apache. Agregue el siguiente código al muy arriba de su archivo .htaccess.

Si está ejecutando otra cosa, consulte estas alternativas: http://support.maxcdn.com/how-to-use-cdn-with-webfonts/

# ----------------------------------------------------------------------
# CORS-enabled images (@crossorigin)
# ----------------------------------------------------------------------
# Send CORS headers if browsers request them; enabled by default for images.
# developer.mozilla.org/en/CORS_Enabled_Image
# blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html
# hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/
# wiki.mozilla.org/Security/Reviews/crossoriginAttribute
<IfModule mod_setenvif.c>
  <IfModule mod_headers.c>
    # mod_headers, y u no match by Content-Type?!
    <FilesMatch ".(gif|png|jpe?g|svg|svgz|ico|webp)$">
      SetEnvIf Origin ":" IS_CORS
      Header set Access-Control-Allow-Origin "*" env=IS_CORS
    </FilesMatch>
  </IfModule>
</IfModule>
# ----------------------------------------------------------------------
# Webfont access
# ----------------------------------------------------------------------
# Allow access from all domains for webfonts.
# Alternatively you could only whitelist your
# subdomains like "subdomain.example.com".
<IfModule mod_headers.c>
  <FilesMatch ".(ttf|ttc|otf|eot|woff|font.css|css)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>

Paso 2

Si ya tiene su CDN habilitado en WordPress, es posible que deba purgar su caché en MaxCDN para ver si funciona. Si es así, haga clic en sus zonas de extracción, haga clic en la pequeña flecha junto a «Administrar» y seleccione «Purgar toda la caché».

maxcdn purgar todo el caché

Paso opcional 3 – ¿La fuente impresionante sigue rota?

¡Bueno, por eso escribí este artículo! Porque probé todo lo que dijo MaxCDN y nada funcionó. Aquí hay algunas cosas más que puede probar si nada de lo anterior ayudó.

Es posible que no tenga los encabezados instalados en su servidor. Para instalarlos, ejecute lo siguiente:

sudo a2enmod headers

Luego deberá reiniciar Apache.

sudo service apache2

Por último, eche un vistazo a sus vhosts … es posible que tenga una denegación de acceso establecida fuera de la configuración principal. Y después de hacer todo esto, por supuesto, necesitará purgar el caché en su CDN nuevamente.

Con suerte, después de probar todo lo anterior, Font Awesome ahora está funcionando nuevamente.

Font Awesome de KeyCDN

KeyCDN ahora patrocina un CDN increíble de fuente gratuito que puede usar para acelerar sus íconos increíbles de fuente con una línea de código.

[alert-note]Nuevamente, recomiendo usar KeyCDN sobre MaxCDN. ¡Más COP y la mitad de precio![/alert-note]

¡Como siempre, siéntete libre de dejar tus comentarios a continuación!

Luis Miguel

Por Luis Miguel

Content marketing en Iday.es. Me encargo de la creación de contenidos de nuestro propio blog así como el de clientes.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *