web-dev-qa-db-fra.com

Comment utiliser des polices personnalisées sur un site Web?

Pour que mon site Web soit beau, je dois utiliser une police personnalisée, en particulier Thonburi-Bold. Le problème est le suivant: la police ne s'affiche pas sauf si l'utilisateur l'a installée. Il n'est également pas affiché dans Firefox.

Existe-t-il une solution de contournement à ce problème?

70
James Logan

Vous devez importer la police dans votre feuille de style comme ceci:

@font-face{
    font-family: "Thonburi-Bold";
    src: url('Thonburi-Bold.ttf'),
    url('Thonburi-Bold.eot'); /* IE */
}
101
Zencode.dk

Vous pouvez utiliser CSS3 font-face ou webfonts

@ usage de font-face

@font-face {
   font-family: Delicious; 
   src: url('Delicious-Roman.otf');
} 

webfonts

consultez Google Webfonts, http://www.google.com/webfonts

12
Muthu Kumaran

Oui, il y a un moyen. Ses polices personnalisées sont appelées CSS. Votre CSS doit être modifié et vous devez télécharger ces polices sur votre site Web.

Le CSS requis pour cela est:

@font-face {
     font-family: Thonburi-Bold;
     src: url('pathway/Thonburi-Bold.otf'); 
}
8
Dorvalla

CSS vous permet d'utiliser des polices personnalisées, téléchargeables sur votre site Web. Vous pouvez télécharger la police de votre choix, disons myfont.ttf, et téléchargez-le sur votre serveur distant sur lequel votre blog ou votre site Web est hébergé.

@font-face {
    font-family: myfont;
    src: url('myfont.ttf');
}
7
hermann

Tout d'abord, vous devez placer votre police sous la forme d'un fichier .otf ou .ttf quelque part sur votre serveur.

Ensuite, utilisez CSS pour déclarer la nouvelle famille de polices comme suit:

@font-face {
    font-family: MyFont;
    src: url('pathway/myfont.otf'); 
    }

Si vous liez votre document au fichier CSS dans lequel vous avez déclaré votre famille de polices, vous pouvez utiliser cette police comme toute autre police.

1
Simon Carlson