18041 sujets

Questions générales et questions de débutants

[Résolu] "Embarquer" des polices de caractères avec son site Web

bonjour,

tous les ordinateurs du monde et leurs systèmes d'exploitations n'ont pas les mêmes bibliothèques de polices de caractères, en tout cas, pas forcément celles que vous désirez utiliser dans la conception de telle ou telle page de votre site Web .
Comment dans ce contexte utiliser une police particulière, et être sûr que le visiteur à l'autre bout de la planète verra bien la même chose, le même "rendu" que ce que vous avez écrit et testé .

Merci d'avance .
en CSS

Tu places tes fichiers de polices sur ton hebergeur, et en css tu utilise font face comme cela :

@font-face {
    font-family: arvoRegular;
    src: url(#{$path-to-font}/arvo/arvo-regular-webfont.ttf);
}


tu mets ton URL vers ton fichier font, moi c'est du sass.
Merci,

Mais je patine un peu ...
imaginons que la police soit "Cooper Black Outline BT.ttf"

ce serait donc :
@font-face {
    font-family: Cooper Black Outline BT;
    src: url(#{$path-to-font}/cooper/Cooper Black Outline BT.ttf);
}


Ai-je juste ou je me trompe ?
Et autant de @font-face que de polices embarquées ?

Le Css doit-il être dans chaque page qui utilise ces polices, ou peut-on le mettre dans la page index du site Web ?
Modifié par 6troen (12 Nov 2018 - 15:49)
Alors oui , autant de @font-face que de polices embarquées !

le font-family dans font face 
font-family: Cooper Black Outline BT;
c'est le nom que tu utilisera pour appliquer la font (perso je ne met pas d'espace)

Par contre n'oublie pas de changer l'url pour que celui ci pointe bien sur TON fichier qui est heberger sur TON serveur. #{$path-to-font} est pour moi une variable (je fais du sass et non du css), donc toi cela serais plutot 

@font-face {
    font-family: Cooper Black Outline BT;
    src: url(mon/dossier/cooper/Cooper Black Outline BT.ttf);
}

@font-face doit être en tout début de fichier (c'est plus clair comme ça).
ensuite si tu veux l'appliquer sur un div en particulier tu fais comme cela : 

div{
 font-family: Cooper Black Outline BT;
}


pour plus d'info, c'est ici https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp
Modifié par JENCAL (12 Nov 2018 - 16:02)
Meilleure solution
Sujet clos
Aller à