Problème font-family

Résolu

Grafiteur -
animostab Messages postés 3003 Date d'inscription Statut Membre Dernière intervention - 18 sept. 2015 à 13:57

Bonjour,

voilà mon code :


<style type="text/css">
.phrase {
    font-family:monotoon_kk, sans-serif; 
    src:url('fonts/monotoon_kk.ttf')format("truetype"); 
} </style>
<span class="phrase">ici la phrase</span>

mon arborescence :


mon dossier
    index.html
    style.cssr
    fonts
        monotoon_kk.ttf

je suis sous iceweasel 38.2.1 / debian 8.1
et ma phare "ici la phrase" ne veut pas se mettre en fonte que je lui ai demandé
c'est à dire monotoon_kk, j'ai essayé de passer par @font-face directement dans style.css mais rien n'y fait et je ne vois pas le problème, j'ai besoin d'une aide extérieur la réponse doit être sous mes yeux...

Afficher la suite

1 réponse

Réponse 1 / 1
animostab Messages postés 3003 Date d'inscription Statut Membre Dernière intervention 738
Salut
1) il faut passer par @font-face
2) il ne faut pas se tromper dans le chemin vers le font c'est souvent une erreur faite
3) il faut que ta font soit sous plusieurs formats

voici un exemple
```
@font-face {
    font-family: "titre1";
    src: url(../fonts/idolwild-webfont.eot);
    src: url(../fonts/idolwild-webfont.eot?#iefix) format('embedded-opentype'),
        url(../fonts/idolwild-webfont.woff2) format('woff2'),
        url(../fonts/idolwild-webfont.woff) format('woff'),
        url(../fonts/idolwild-webfont.ttf) format('truetype'),
        url(../fonts/idolwild-webfont.svg#idolwildregular) format('svg');
}

.phrase {
font-family: 'titre1', Georgia, Times New Roman, Times, serif;
}
```
pour créer les formats de font d'après un ttf tu peux aller sur le site fontsquirrel.com (generator)
1
1. Grafiteur
  
  j'arrive donc à ce résultat :
  
  style.css
  
  @font-face {
  font-family: monotoon;
  src:
  url('../fonts/monotoon_kk.eot?#iefix') format('embedded-opentype')
  url('../fonts/monotoon_kk.ttf') format('truetype')
  url('../fonts/monotoon_kk.woff') format('woff')
  url('../fonts/monotoon_kk.woff2') format('woff2')
  url('../fonts/monotoon_kk.svg#monotoon_kkregular') format('svg');
  }
  
  .p {
  font-family: monotoon, Impact ;
  }
  
  index.html
  
  [...]
  <span class="p">ici la phrase</span>
  [...]
  
  Je suis passé effectivement par fontsquirrel.com à partir du ttf
  Mais le plus grave ce n'est pas que le texte ne soit pas en monotoon, mais il n'est pas non plus en impact.
  
  0
2. bg62 Messages postés 23433 Date d'inscription Statut Modérateur Dernière intervention 2 435
  
  ah ... et 'impact' sort de où ???
  
  0
3. animostab Messages postés 3003 Date d'inscription Statut Membre Dernière intervention 738
  
  voici déja un lien expliquant les chemin vers les fichiers
  https://www.alsacreations.com/astuce/lire/78-quelle-est-la-diffrence-entre-les-chemins-relatifs-et-absolus.html
  ensuite dans ton code tu as oublié les virgules, les guillemets autour de monotoon ainsi que la 1ère déclaration eot sans déclaration de format et avec un point virgule. (compare l'exemple donné et ton code)
  
  ensuite après la virgule (impact) c'est la police de remplacement au cas ou font-face n'est pas pris en charge.
  il faut donc que ce soit installé sur l'ordi du visiteur dans l'emplacement reservé aux fonts du système d'exploitation et sous un format accepté par le navigateur. En general on mets une (ou plusieurs) police de remplacement qui soit très générique.
  
  0

Problème font-family

1 réponse

Discussions similaires

Newsletters