Bonjour à tous,

comme beaucoup d'entre nous, je passe par la case "apprendre HTML/CSS" et je n'arrive pas à changer de police personnalisée avec @font-face sur mon CV pour l'exercice en ligne. Autant clarifier quelques points:

1. J'ai pris la police sur fr.fonts.net

2. J'ai un fichier .ttf

3. Le nom de la police est long mais je l'ai copié coller pour éviter les erreurs

4. Le fichier .ttf est bien dans le même dossier que les autres éléments de l'exercice (qui fonctionnent parfaitement, images etc)

5. Je me suis promené sur le forum pour regarder vos réponses mais j'ai pas trouvé la clé.........

Voici mon code : (je vous mets toute la page car il y a peut-être des choses qui contre-indiquent)

merci de me dire là où je bug !

-
Edité par ThomasSallé 16 janvier 2018 à 14:23:23

Bonjour,

Définir une police personnalisée c'est bien mais si tu ne l'appliques à aucun élément cela ne sert pas à grand chose... 

Merci pour ta réponse, je n'avais pas compris qu'il fallait l'activer...

dieu, donne moi l'intelligence de comprendre ce cours.

bonne journée

-
Edité par ThomasSallé 16 janvier 2018 à 14:22:30

Hello !

Pour que tu comprennes bien, quand tu écris le css suivant : 

@font-face{
    font-family : "blablabla";
    src : url('myFont.ttf');
}

C'est juste pour dire : je veux utiliser la police stockée dans le fichier "myFont.ttf" (défini par la propriété src) et je l'utiliserais sous le nom "myFont" (défini par la propriété font-family). C'est un peu comme la déclaration d'une variable, tu déclares mais tu ne l'utilises pas encore à ce stade. Bien évidemment, si le fichier est dans le même répertoire que le fichier où ce code css est, tu peux laisser comme ça, sinon il faut que tu utilises un chemin relatif (ex: ../fonts/myFont.ttf) ou un chemin absolu (ex: http://www.monsite.fr/fonts/myFont.ttf) pour situer exactement où est le fichier. Quant au nom défini par font-family, tu mets absolument ce que tu veux ! C'est par ce nom que tu feras référence à ta police pour qu'un texte soit affiché avec celle ci de la manière suivante :

.mon_element {
	font-family: "blablabla";
}

Eh oui, on utilise à nouveau font-family pour dire qu'on affecte telle police à tel texte. Là, tout le texte contenu dans les éléments de classe .mon_element sera affiché avec la police que j'ai nommée "blablabla".

Je ne rentre pas dans les détails et ça se trouve facilement sur internet les bons usages de @font-family mais en général on utilise une police avec des fichiers d'extension différentes (.ttf, .svg, .eof, .woff, etc.)... encore pour une histoire de compatibilité des navigateurs. Dans ce style là :

@font-face{
    font-family : "blablabla";
    src : url('myFont.woff') format('woff'),
          url('myFont.svg#abcd') format('svg'),
          url('myFont.ttf') format('truetype');
}

-
Edité par Flosteo 17 janvier 2018 à 13:49:58