web-dev-qa-db-fra.com

Comment incorporer une police de site Web personnalisée au format ttf pour tous les navigateurs?

Sur mon site Web, j'utilise une police personnalisée que j'ai téléchargée. Il semble choisir de travailler par intermittence. Il fonctionne sur certains ordinateurs/navigateurs, mais pas sur d'autres. Il est également correctement mappé.

Voici mon code:

<style type="text/css">
@font-face {
    font-family: 'AgencyFBRegular';
    src: url('agencyr.eot');
    src: url('agencyr.eot?#iefix') format('embedded-opentype'),
         url('agencyr.woff') format('woff'),
         url('AGENCYR.TTF') format('truetype'),
         url('agencyr.svg#AgencyFBRegular') format('svg');
}


h3 {    font-family: 'Agency FB', sans-serif; font-size: 26px; font-weight:normal; text-align: left; line-height: 100%;
    border-bottom: 1px solid #484848; padding-bottom: 5px; margin-bottom:7px; 
</style>

Je pensais que cela fonctionnait partout jusqu'à ce que j'utilise l'ordinateur portable d'un ami pour le voir.

Pouvez-vous voir où je me trompe?

MISE À JOUR: J'ai mis à jour la police CSS. Cela semble fonctionner, mais maintenant pas sur iOS.

cssfontsfont-facetrue-type-fonts
28
Sami Dz Hamida

Le code suivant devrait fonctionner:

@font-face {
    font-family:"AgencyFBRegular";
    src: url("agencyr.eot") /* EOT file for IE */
}
@font-face {
    font-family:"AgencyFBRegular";
    src: url("agencyr.ttf") /* TTF file for CSS3 browsers */
}

h3 {
    font-family:'Agency FB', sans-serif;
    font-size: 26px;
    font-weight:normal;
    text-align: left;
    line-height: 100%;
    border-bottom: 1px solid #484848;
    padding-bottom: 5px;
    margin-bottom:7px;
}
35
Gangadhar

Vous devez changer le nom de fichier de votre police sans majuscule. Comme ceci: de AGENCYR.TTF à agencyr.ttf

et dans votre fichier css:

src: url('agencyr.ttf');
7
Sakata Gintoki