Problème font-family

Résolu/Fermé

Grafiteur - Modifié par Grafiteur le 17/09/2015 à 22:14
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 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...

A voir également:

Problème font-family
Family center snapchat - Guide
Family link localisation - Télécharger - Guide protection
Supprimer family link - Forum Téléphones & tablettes Android
Changer mot de passe family link - Forum Téléphones & tablettes Android
Comment contourner family link ✓ - Forum Huawei

1 réponse

Réponse 1 / 1

animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
17 sept. 2015 à 21:46

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)

Grafiteur
Modifié par Grafiteur le 17/09/2015 à 22:24

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.

bg62 Messages postés 23590 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 15 avril 2024 2 362
18 sept. 2015 à 11:43

ah ... et 'impact' sort de où ???

animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
Modifié par animostab le 18/09/2015 à 14:02

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.

Discussions similaires

Family link : les temps ne correspondent pas !

Pb de verrouillage de tel avec family link

Comment désinstaller l'application Family Link ?

### A LIRE ! - Arnaques crédits gratuits

Utilisation abusive family link possible?

Discussions similaires

Newsletters