Caratteri Web di Google memorizzati localmente rispetto alla fonte online

Question

Quando aggiungo i caratteri Web di Google utilizzando la regola @import nel mio file CSS, funziona correttamente.

Ma quando scarico quel font e lo memorizzo localmente sul mio server e poi dirigo la regola @ font-face sulla mia macchina, non funziona.

Quindi quello che ho fatto è stato di sostituire questa linea, nel mio file css/fonts.css:

@import url(http://fonts.googleapis.com/css?family=Michroma); 

con questo:

@font-face { 
font-family: 'Michroma'; 
font-style: normal; 
font-weight: 400; 
src: url(http://localhost/xampp/mysite/css/fonts/michroma/micrhoma.woff) format('woff'); 
} 

In altre parole, ho solo copiato il codice il googleapi per quel tipo di carattere. E ho salvato il file del font (.woff) nel percorso sopra (ho ricontrollato, è davvero lì).

ho provato a modificare l'URL per questo pure, ma non va bene:

src: url(fonts/michroma/michroma.woff) format('woff'); 

Non riesco a credere che ci sia alcuna ragione per cui i caratteri web di Google non funzionerebbero se li abbiamo usati a livello locale, quindi ci deve qualcosa di sbagliato in quello che sto facendo. Indizi? Non è così che definiamo il nostro carattere in ogni caso? (Non l'ho mai provato prima).

Answer 1

in carattere singolo le virgolette per il nome della famiglia di font non sono necessarie. dovresti rimuovere ed eseguirlo funzionerà correttamente. font-family: Michroma;

Answer 2

Come indicato nei commenti, la causa del problema era l'errore di ortografia del nome del carattere nell'URL.

Questo è un modo di utilizzare i caratteri Google localmente. Il modo corretto è utilizzare URL relativi come fonts/michroma/michroma.woff e non http: URL con localhost (richiederebbero l'esecuzione di un server HTTP sul computer).

Tuttavia, non funzionerebbe su browser che non supportano il formato WOFF (in questo caso). In generale, l'utilizzo di Google Fonts come host in remoto è migliore, poiché sanno come servire diversi formati di font a diversi browser. Cf. a Should I locally store CSS generated by the Google Web Fonts API?