Polices web de Google stockés en local versus en ligne source

Quand j'ai ajouter des polices web de google en utilisant le @import règle dans mon fichier CSS, il fonctionne très bien.

Mais quand j'ai télécharger la police et de l'enregistrer localement dans mon serveur et ensuite direct le @font-face règle à ma propre machine, il ne fonctionne pas.

Donc ce que j'ai fait a été de remplacer la ligne, dans mon css/fonts.fichier css:

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

:

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

En d'autres termes, j'ai juste copié le code de la googleapi de cette police. Et je l'ai enregistré le fichier de police (.woff) dans le chemin d'accès ci-dessus (j'ai revérifié, il est en effet là).

J'ai essayé de l'édition de l'url de cette, mais rien de bon:

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

Je ne peux pas croire il n'y a aucune raison pour que les polices web de Google ne fonctionne pas si nous avons utilisé localement, donc il y a quelque chose de mal avec ce que je fais. Des indices? N'est-ce pas la façon dont nous définissons notre propre polices de toute façon? (Je n'ai jamais essayé cela avant).

OriginalL'auteur user961627 | 2012-09-10

  1. 2

    Comme indiqué dans les commentaires, la cause du problème était la faute d'orthographe du nom de la police dans l'URL.

    C'est une façon d'utiliser Google polices au niveau local. La bonne façon est d'utiliser des Url relatives pour les polices/michroma/michroma.woff et pas http: URLs avec localhost (ils ont besoin de vous pour exécuter un serveur HTTP sur votre ordinateur).

    Cependant, il ne fonctionnerait pas sur les navigateurs qui ne prennent pas en charge le format WOFF (dans ce cas). Généralement, à l'aide de Google Polices hébergée à distance est mieux, car ils savent comment servir les différents formats de police pour différents navigateurs. Cf. pour Dois-je stocker localement CSS généré par les Polices Web de Google API?

    Hors-sujet, mais connexes: pour convertir un .police ttf en plus des formats pris en charge par la plupart des navigateurs, la tête sur FontSquirrel: fontsquirrel.com/fontface/generator. Viens de découvrir, c'est génial.

    OriginalL'auteur Jukka K. Korpela

  2. 1

    en simple police les guillemets pour le nom de famille de polices n'est pas nécessaire. vous devez supprimer et exécuté, elle fonctionne très bien.
    font-family: Michroma;

    En fait, c'est bien maintenant!
    Les citations sont en option, de sorte que leur suppression n'est pas susceptible de résoudre quoi que ce soit.
    que voulez-vous dire? Est-ce que votre commentaire se rapportent à la réponse proposée? Je peux toujours reproduire votre problème avec Michroma (testé sur IE, Firefox, Chrome), mais pas avec une autre police, de Seigle, donc je soupçonne que c'est une police de caractères spécifique à la question. Avez-vous de recharger la police? (Je viens de le faire, mais il n'a pas d'aide).
    Le problème était juste une faute d'orthographe dans l'URL de la source, je pense que j'avais tapé "mihcroma" au lieu de michroma. Essayé de supprimer cette question, mais hélas.
    Droit, qu'il a été. J'ai modifié votre code dans mes tests, sans vérification de l'orthographe d'un nom.

    OriginalL'auteur Web Designer cum Promoter