Des "google font" qui ne s'affichent pas toujours sur Firefox

MisterOccan
Les bases HTML/CSS

Hello.

J'utilise sur ma page personnelle les polices Lato et Bitter (Google fonts), qui sont importées grâce un ...

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

... dans mon css (Dans mon scss plutôt).

Cela marche sans soucis sauf que parfois, Firefox ne me les affiche pas :/ (En local c'est nickel).

À quoi est-ce que c'est du? Mon site est hébergé sur github dont voici les sources.

Et voici le site > https://kabbamine.github.io/

Peut-être qu'en important les polices directement dans mon html, ça résoudra le problème (Par contre j'aimerai éviter d'utiliser @font-face).

Merci de votre aide.

EDIT: Histoire d'anticiper une des réponses, oui le fait de nettoyer le cache permet un affichage normal des polices, mais la question se pose toujours, pourquoi ça ne s'affiche pas à tous les coups?

3 réponses

MisterOccan
Auteur
Réponse acceptée

Je me permets de poster un nouveau message au lieu d'éditer mon dernier pour que ça soit clair.

La page de polices fournie par google font (Que ça soit via un @import ou un <link ...>) est en fait appelé via le protocole http, ce qui fait que les polices ne chargent pas sur sur un site en https.

Pour remédier à cela, il suffit donc de ne pas préciser le protocole de transfert et laisser ça se faire automatiquement au moment de linker les fonts.

Ce qui donnera dans mon cas:

<link href='//fonts.googleapis.com/css?family=Bitter|Lato' rel='stylesheet' type='text/css'>

Ou encore en css: 

@import url(//fonts.googleapis.com/css?family=Lato|Bitter);

Source > http://www.amixa.com/blog/2012/06/06/how-to-use-google-fonts-under-both-ssl-and-non-ssl-without-ssl-insecure-messages/#comment-48507

En espérant que ça soit utile à d'autres :)
Sujet donc résolu.

Soundboy39

Bonsoir

Essaye d'importer les polices en lien "<link>" dans la head.
Normalement tu n'a pas besoin d'utiliser le font-face, tu peux utiliser directement le nom de la police importée par le biais du lien.

MisterOccan
Auteur

Merci du conseil **Soundboy** mais je viens de découvrir la cause Très étrange, mais les polices ne passent pas quand je suis en *https*. Voyez par vous même: [url=http://pix.toile-libre.org/?img=1415783899.jpg][img]http://pix.toile-libre.org/upload/thumb/1415783899.jpg[/img][/url] [url=https://kabbamine.github.io]https://kabbamine.github.io[/url] [url=http://kabbamine.github.io]http://kabbamine.github.io[/url] Je vais chercher un peu sur le net la cause.