28172 sujets

CSS et mise en forme, CSS3

Bonjour, encore moi ! J'ai un soucis pour charger ma font-face !
Sur certains ordinateur, ma police marche niquel : http://monsitehtml.lescigales.org/
Mais sur d'autre, comme mon PC privé, elle ne charge pas du tout !
Voilà à quoi ca ressemble dans mon css :


<style type="text/css">    
@font-face {
    font-family: 'comic_reliefregular';
    src: url('police/comicrelief-webfont.eot');
    src: url('police/comicrelief-webfont.eot?#iefix') format('embedded-opentype'),
         url('police/comicrelief-webfont.woff2') format('woff2'),
         url('police/comicrelief-webfont.woff') format('woff'),
         url('police/comicrelief-webfont.ttf') format('truetype'),
         url('police/comicrelief-webfont.svg#comic_reliefregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'anonymousregular';
    src: url('police/anonymous-webfont.eot');
    src: url('police/anonymous-webfont.eot?#iefix') format('embedded-opentype'),
         url('police/anonymous-webfont.woff2') format('woff2'),
         url('police/anonymous-webfont.woff') format('woff'),
         url('police/anonymous-webfont.ttf') format('truetype'),
         url('police/anonymous-webfont.svg#anonymousregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
</style>


J'ai bien sur le dossier 'police' contenant toute les polices : http://puu.sh/dhOvZ/9905ff9190.png
Pareil dans mon ftp : http://puu.sh/dhOxZ/fb16e9a0bf.png

Bien sur en local, les polices ont 0 soucis pour se charger !
Une idée de la ou ca coince ?
Merci encore pour votre aide
Modifié par vmoulinier (05 Dec 2014 - 09:47)
Bonjour,

Ce qui m'intéresse c'est plutôt le code que tu utilises pour appeler tes fontes (je le simplifie) :

#police1{
font-family: comic_reliefregular;
font-weight: bold;
}

#police2{
font-family: anonymousregular;
font-weight: bold;
}


Donc tu n'as déclarée que des graisses "normal" mais tu appelles une graisse "bold". Que veux-tu faire ? Tu espère que le navigateur, ne trouvant pas la fonte grasse demandée, va la synthétiser et produire un faux-gras ?
Modérateur
Bonjour, quel navigateur utilises-tu et comment ouvres-tu ton site en local?

Sur Firefox par exemple, l'usage des webfonts est soumis à un contrôle d'accès de domaines, pour utiliser les fonts d'un autre domaine, il faut que les fonts envoient le header "Access-Control-Allow-Origin" correctement renseigné.

Si ton site est ouvert sur ton ordi sans serveur local (en file://…, c'est-à-dire en ouvrant directement le fichier HTML dans ton navigateur), toutes les ressources sont considérées comme venant de sources différentes. Donc les webfonts ne fonctionneront pas.

Sauf erreur, sous Chrome cela fonctionne.
Bonsoir, après avoir réfléchie sur la question pendant un certain temps avec des amis, il s'avère que j'ai décidé d'utiliser Google font.
Apparemment il s'agissait surement d'un problème de droit..
Merci de vos réponses Smiley smile
Ah ces petits lutins des droits qui viennent interdire le rendu @font-face des images piratées sur certains postes... Tu dois avoir un bon pare feu pour qu'ils n'aient pas réussi à atteindre ton local Smiley biggol
Modifié par Freez (05 Dec 2014 - 19:19)
oui, c plus judicieux d'utiliser google font vu que l’API de Google Font est très maniable. L ‘appel de l’url distant suffit. ( voir ici http://integrateurinformatique.com/une-police-personnalisee-avec-google-font/)
Tous les polices proposées sont en général adaptées à la majorité des navigateurs, mais le rendu ne sera pas le meme sur tous les navigateurs comme le cas sur chrome où des fois les lignes de texte apparaissent comme floues avec un inter lettrage assez étrange.
La seule solution, bien tester pour voir les rendus sur chaque navigateur, au pire des cas repassé sur http://www.fontsquirrel.com/