Solucionar problemas con CDN y Fuentes (íconos)

En este artículo

Si estás usando una fuente web o una fuente de ícono (como Font Awesome) y un CDN, hay una serie de reglas necesarias para permitir las peticiones de fuentes Cross Domain. Cuando activas la opción CDN en WP Rocket, añadimos automáticamente las reglas necesarias para los encabezados CORS a tu archivo htaccess.

No Access-Control-Allow-Origin

Access to Font has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

Si encuentras este error en la consola de tu navegador, significa que las reglas CORS no han sido añadidas o no están siendo utilizadas. WP Rocket las habilita por defecto en todos los sitios web que usan un archivo htaccess, sin embargo si usas un servidor NGINX, deberás añadir lo siguiente a tu archivo host virtual:

location ~* \.(eot|css|otf|ttf|woff)$ {
add_header Access-Control-Allow-Origin *;
}

Access-Control-Allow-Origin header contains multiple values

The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed.

En algunos casos tu proveedor de CDN podría estar añadiendo sus propias reglas CORS. Esto puede resultar en un error en la consola de tu navegador, lo que impide a las fuentes web de cargarse:

El error se puede solucionar desactivando una parte de las reglas CORS. La manera más fácil de hacerlo es desactivar la opción para añadir un encabezado CORS desde el panel de control de tu proveedor de CDN.

Si prefieres desactivar las reglas añadidas por WP Rocket, puedes usar el siguiente plugin de soporte.

📥 Descarga  (.zip):  WP Rocket | No CORS for Fonts
Si te ocupas del desarrollo del sitio web: Puedes usar el código para este plugin en GitHub.

Webfonts dentro de hojas de estilo

Si ya has seguido las instrucciones de arriba y el problema con los íconos sigue de pié, podría ser porque a vecez las hojas de estilo llaman directamente las fuentes web, de esta manera: 

En este caso, los encabezados necesarios no se van a aplicar a la fuente, y por esto los íconos no aparecen.
Puede entonces localizar la hoja de estilo que contiene la referencia a la fuente usando las herramientas para desarrolladores en tu navegador:

Una vez que habrás encontrado la hoja de estilo para excluir, deberás incluir su URI en el campo Excluir archivos del CDN, en la pestaña CDN:

Si además estás usando la opción Minificar archivos CSS en la pestañaOptimiar Archivos, deberás excluir el URI de la misma hoja de estilo en el campo Excluir archivos CSS: