I font @ font-face funzionano solo sul proprio dominio

Sto cercando di creare un tipo di repository di font da utilizzare sui miei siti Web, in modo da poter chiamare qualsiasi font nel repository nel mio css senza altri set-up. Per fare questo ho creato un sottodominio sul quale ho inserito cartelle per ogni font nel repository che conteneva i vari tipi di file per ogni font. Ho anche inserito un file css chiamato font-face.css nella radice del sottodominio e lo ho riempito con le dichiarazioni @font-face per ciascuno dei font, i font sono collegati con un link assoluto in modo che possano essere utilizzati da qualsiasi luogo.

Il mio problema è che sembra che io possa usare solo i caratteri su quel sottodominio in cui si trovano, negli altri miei siti il ​​font non viene mostrato. Usando firebug ho determinato che il file font-face.css è stato collegato e caricato correttamente. Quindi, perché il carattere non viene caricato correttamente? C’è una protezione sui file dei font o qualcosa del genere? Sto usando tutti i tipi di carattere con i quali dovrei avere il permesso di farlo, quindi non vedo perché questo si sta verificando. Forse è un problema di apache, ma posso scaricare il font bene quando ci collego ad esso.

Oh, e giusto per chiarire, non sto violando nessun copyright impostando questo, tutti i font che sto usando sono concessi in licenza per permettere questo genere di cose. Vorrei comunque impostare un modo in cui solo io possa avere accesso a questo repository di font, ma questo è un altro progetto.

Questo perché Firefox (dalla tua menzione di Firebug) pensa che il dominio incrociato, anche il sottodominio, l’incorporamento dei font Web sia una ctriggers idea.

Puoi convincerlo a caricare i caratteri dal tuo sottodominio aggiungendo questo al file .htaccess livello superiore del sottodominio in cui vengono serviti i tuoi font (aggiornato per adattare il codice dallo stesso file in HTML5 Boilerplate ):

   Header set Access-Control-Allow-Origin "*"   

In risposta a questo:

Vorrei comunque impostare un modo in cui solo io possa avere accesso a questo repository di font, ma questo è un altro progetto.

Le specifiche W3C per Access-Control-Allow-Origin non dicono altro che un carattere jolly "*" o un dominio specifico. Finora, ho trovato questa risposta SO che suggerisce di convalidare l’intestazione Origin , ma penso che sia un’intestazione solo per Firefox. Non sono sicuro degli altri browser (non hanno nemmeno bisogno del trucco .htaccess sopra per far funzionare i caratteri Web interdominio).

Un altro modo per risolvere questo problema in Firefox è incorporare il font direttamente nel file css usando la codifica base64. Particolarmente elegante se non si ha accesso ad alcune delle configurazioni sopra menzionate.

È ansible generare il codice necessario su fontsquirrel.com : nel generatore di font-face scegliere la modalità esperto, scorrere verso il basso e selezionare Base64 Encode in Opzioni CSS: il Font-Kit scaricato sarà pronto per essere collegato e riprodotto.

Questo ha anche il vantaggio marginale di ridurre il tempo di caricamento della pagina perché richiede una richiesta HTTP in meno.

Se non desideri consentire le risorse di tutti i domini ma solo del dominio secondario del tuo sito, dovresti farlo come segue:

 # Allow font, js and css to be loaded from subdomain SetEnvIf Origin "http(s)?://(.+\.)?(example\.com)$" ORIGIN_DOMAIN=$0   Header set Access-Control-Allow-Origin %{ORIGIN_DOMAIN}e env=ORIGIN_DOMAIN   

Fonte: http://www.webspeaks.in/2015/01/wordpress-allow-cross-domain-resources.html

Utilizzando http://www.fontsquirrel.com/fontface/generator in modalità “esperto” e scegliendo base64 come opzione è stato restituito un stylesheet.css con i dati codificati base64 necessari da utilizzare nel nostro foglio di stile. Sembra funzionare in tutti i browser che abbiamo testato tranne IE8.

Ci imbattiamo maggiormente in questo problema quando applichiamo temi a strumenti di terze parti come la petizione di salsa in cui siamo forzati ad ospitare il font.

Grazie a tutti per l’aiuto di tutti!