Comment utiliser les fonts .woff pour mon site Web?

Où placez-vous les fonts afin que CSS puisse y accéder?

J’utilise des fonts non standard pour le navigateur dans un fichier .woff. Disons que sa ‘police géniale’ est stockée dans un fichier ‘awesome-font.woff’.

    Après la génération des fichiers woff, vous devez définir font-family, qui peut être utilisé ultérieurement dans tous vos styles CSS. Le code ci-dessous permet de définir les familles de fonts (pour les fonts de caractères normales, en gras, en italique et en gras). On suppose qu’il y a 4 fichiers * .woff (pour les fonts mentionnées), placés dans le sous-répertoire fonts .

    En code CSS:

     @font-face { font-family: "myfont"; src: url("fonts/awesome-font.woff") format('woff'); } @font-face { font-family: "myfont"; src: url("fonts/awesome-font-bold.woff") format('woff'); font-weight: bold; } @font-face { font-family: "myfont"; src: url("fonts/awesome-font-boldoblique.woff") format('woff'); font-weight: bold; font-style: italic; } @font-face { font-family: "myfont"; src: url("fonts/awesome-font-oblique.woff") format('woff'); font-style: italic; } 

    Après avoir eu ces définitions, vous pouvez simplement écrire, par exemple,

    En code HTML:

     
    this will be written with awesome-font-bold.woff
    this will be written with awesome-font-boldoblique.woff
    this will be written with awesome-font-oblique.woff
    this will be written with awesome-font.woff

    En code CSS:

     .mydiv { font-family: myfont } 

    Le bon outil pour la génération de fichiers woff, qui peut être inclus dans les feuilles de style CSS, se trouve ici . Tous les fichiers woff ne fonctionnent pas correctement sous les dernières versions de Firefox, et ce générateur produit des fonts «correctes».

    Vous devez déclarer @font-face comme ceci dans votre feuille de style

     @font-face { font-family: 'Awesome-Font'; font-style: normal; font-weight: 400; src: local('Awesome-Font'), local('Awesome-Font-Regular'), url(path/Awesome-Font.woff) format('woff'); } 

    Maintenant, si vous souhaitez appliquer cette police à un paragraphe, utilisez-la simplement comme ceci ..

     p { font-family: 'Awesome-Font', Arial; } 

    Plus de référence