Risolvere i problemi con il CDN e i fonts (icone)

In questo articolo

Se stai usando un font web o un icon font (ad esempio Font Awesome) e un CDN, sono necessarie alcune regole affinché le richieste Cross Domain sui font siano permesse. Quando abiliti l'opzione CDN in WP Rocket, aggiungiamo automaticamente le regole necessarie gli header CORS al tuo file htaccess.

No Access-Control-Allow-Origin header

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

Se trovi questo errore nella console del tuo browser, significa che le regole CORS corrette non sono al loro posto. WP Rocket le attiva in maniera predefinita sui siti che usano un file .htaccess, però se stai lavorando su un server NGINX dovrai aggiungere il codice seguente nel file virtual host:

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.

In alcuni casi il tuo provider CDN potrebbe aggiungere le sue proprie regole CORS. Questo potrebbe dare origine all'errore seguente nella console del browser, impedendo ai web font di caricare:

La soluzione in questo caso è disattivare un set di regole CORS. Di solito il modo più facile per farlo è disattivare l'opzione e aggiungere l'header CORS dal pannello di controllo del tuo provider di CDN.

Se preferisci rimuovere le regole CORS aggiunte da WP Rocket, puoi usare il seguente plugin di supporto.

📥 Scarica  (.zip):  WP Rocket | No CORS for Fonts
Se ti occupi dello sviluppo del sito: puoi trovare il codice per questo plugin su GitHub.

Webfont inclusi nei fogli di stile

Se hai già seguito le istruzioni di cui sopra ma stai ancora avendo problemi con le icone che non appaiono, potrebbe essere perché il webfont è chiamato dentro un foglio di stile, in questo modo:

In questo caso, anche se hai seguito la soluzione data sopra, gli header necessari non vengono applicati al font, per cui non compaiono correttamente.
Puoi scoprire quale foglio di stile contiene la referenza al font usando lo strumento per sviluppatori web del tuo browser:

Per risolverlo devi aggiungere l'URI del file nel campo Escludi file dal CDN che trovi nella scheda CDN:

Se nella scheda Ottimizzazione File hai anche attivato l'opzione Minificare i file CSS, dovrai escludere l'URI dello stesso foglio di stile nel campo di testo File CSS esclusi: