Domanda

Sto lavorando su un sito di Magento Go al momento. Ho acquistato un font web da Font primavera e caricato i file dei font 4 (EOT, WOFF, TTF e SVG) tramite il sistema di amministrazione utilizzando lo strumento beni di carattere.

Quando inserisco i caratteri è aggiunto il seguente codice CSS nel mio CSS personalizzato:

../css_editor_fonts/ProximaNova-Sbold-webfont.eot
../css_editor_fonts/ProximaNova-Sbold-webfont.ttf
../css_editor_fonts/ProximaNova-Sbold-webfont.woff
../css_editor_fonts/ProximaNova-Sbold-webfont.svg

Ho poi applicato quei percorsi relativi alla dichiarazione cross-browser compatibile con @ font-face corretta, vedere sotto:

@font-face {
    font-family: 'proxima_nova_ltsemibold';
    src: url('../css_editor_fonts/ProximaNova-Sbold-webfont.eot');
    src: url('../css_editor_fonts/ProximaNova-Sbold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../css_editor_fonts/ProximaNova-Sbold-webfont.woff') format('woff'),
         url('../css_editor_fonts/ProximaNova-Sbold-webfont.ttf') format('truetype'),
         url('../css_editor_fonts/ProximaNova-Sbold-webfont.svg#proxima_nova_ltsemibold') format('svg');
    font-weight: normal;
    font-style: normal;

}

Il font viene fatto riferimento nel mio CSS personalizzato in questo modo:

font-family: 'proxima_nova_ltsemibold';

Questo funziona in IE7 / 8 e ultima Chrome, ma non in IE o Firefox 9/10.

Penso che il motivo per il tipo di carattere non funziona in IE9 / 10 e Firefox è dovuto ad una richiesta di cross-origine, che è qualcosa che ho visto discusso un bel po ', e la mia console IE contiene questo errore:

@ font-face fallito richieste cross-origine. accesso alle risorse è limitato.

C'è una modifica che può essere fatto in un file .htaccess per abilitare i font di lavorare in quei browser - la sua chiamata Access-Control-Allow-Origin da quello che ho letto.

Qualcuno sa se è possibile aggiornare o creare un file .htaccess per Magento Go?

Saluti.

È stato utile?

Soluzione

Non sono stato in grado di ottenere file caricati dei font per essere servito a tutti i browser, ma sono riuscito a ottenere un tipo di carattere servito utilizzando http://fontdeck.com/ . Quale tipo di carattere servendo servizio che uso è irrilevante, ma sono stato in grado di utilizzare con successo uno.

Ho parlato con un membro del team di supporto Magento Go (via chat) e ha spiegato i problemi che ho avuto con i file dei font caricati non essere serviti in vari browser a causa di richieste cross-origine. Ho spiegato la soluzione htaccess per consentire l'effettuazione di font e la loro risposta è stata più o meno sulla falsariga di “nostri server non htaccess personalizzato di supporto”.

Ho cercato usando percorsi assoluti per le proprietà src della regola @ font-face, ma credo che Magento Go aggiunge questi al vostro CSS personalizzato in ogni caso come sembra essere trasformati a base l'editor tema e collegato nei modelli.

Edit: Ho dimenticato di dire che ho anche provato a base64 codificare i file dei font nel CSS utilizzando il Font Squirrel Web Font Generator ( http://www.fontsquirrel.com/tools/webfont-generator ). Ho caricato i miei file acquistati, abilitato le impostazioni avanzate necessarie, scaricato il css con il tipo di carattere codificato (che sia stato solo WOFF codificati), caricato che css per il mio tema ... e poi Magento Go applicato lo stesso percorso assoluto della proprietà src rompendo il carattere codificato becase aveva un URL a caso di fronte ad essa.

Ho sollevato un ticket di supporto con Magento Go spiegare i problemi e ha chiesto che cosa intendono fare per consentire file di font caricati per essere servito a tutti i browser. Spero che venga elevata a una richiesta di funzionalità o qualcosa di simile.

Per il momento, dovrà essere un servizio di carattere che serve. Ho usato il codice di embedding Javascript da Font Deck. Ho messo le js forniti in uno statico blocco e ha poi aggiunto che blocco a tutte le pagine utilizzando un Front End App. È possibile utilizzare il link html metodo di inserimento da Font Deck, ma deve essere aggiunto l'intestazione prima di qualsiasi tag di script che non è possibile usando l'editor tema di Magento Go.

Spero che questo può aiutare qualcuno fuori a breve termine. A lungo termine, spero Magento Go trovare una soluzione a questi problemi.

Altri suggerimenti

Si prega di provare a utilizzare percorsi completi assoluti (con https / http) per i tipi di carattere, invece di percorsi relativi.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a magento.stackexchange
scroll top