Menu

Aide pour le @font-face (forcer font sur mon site) [Résolu]

Messages postés
3
Date d'inscription
samedi 13 avril 2019
Statut
Membre
Dernière intervention
21 avril 2019
-
Bonjour,

Voila, j'aimerai forcer une typographie bien précise pour mon site web et j'ai trouvé le système @font-face.
Mon soucis est que je ne sais pas ou je doit mettre les fichiers ttf, eot, ... dans mon site. (Puis-je créer un dossier dans la racine du www que j’appellerai font ou dois-je les mettre à un endroit bien précis? avec un nom de dossier tout autant précis?)

Ma deuxième question est ou dois-je exactement mettre mes ligne de code? (dans quel document css dois-je aller l’insérer et à quelle ligne?)

voici le code que j'ai, est-il bon?

@font-face {
    font-family: 'trinigan_fgregular';
    src: url('trinigan-webfont.eot');
    src: url('trinigan-webfont.eot?#iefix') format('embedded-opentype'),
         url('trinigan-webfont.woff2') format('woff2'),
         url('trinigan-webfont.woff') format('woff'),
         url('trinigan-webfont.ttf') format('truetype'),
         url('trinigan-webfont.svg#trinigan_fgregular') format('svg');
    font-weight: normal;
    font-style: normal;
}


D'avance je vous remercie de votre réponse :)

Modifié par la modération pour une lecture plus facile du code
Afficher la suite 

Votre réponse

2 réponses

Meilleure réponse
Messages postés
3
Date d'inscription
samedi 13 avril 2019
Statut
Membre
Dernière intervention
21 avril 2019
1
1
Merci
Merci pour vos réponses... Mais je ne cherchait pas une autre solution ou me dire ce qu'il convient au mieux de faire.. simplement la marche à suivre...
Enfin.. soit, j'ai trouvé ma réponse ailleurs.

Pour ceux qui cherchent et tomberont sur cette discussion :

Le code est bon, il faut créer un fichier css avec (ou on l'a automatiquement avec squirel) et le mettre dans le même dossier que vos police.
Ensuite j'ai ajouté en début de mon css principal (template.css pour ma part) cette ligne : @import "chemin-de-mes-fichiers-fonts/font.css";
Et hop, le tour est joué.

Le sujet peut être clos.

Dire « Merci » 1

Heureux de vous avoir aidé ! Vous nous appréciez ? Donnez votre avis sur nous ! Evaluez CommentCaMarche

CCM 40362 internautes nous ont dit merci ce mois-ci

Commenter la réponse de NoxofFire
Messages postés
550
Date d'inscription
mercredi 24 juin 2009
Statut
Modérateur
Dernière intervention
24 avril 2019
68
0
Merci
Salut Noxo,
Je te conseille d'utiliser le système de font de Google : https://fonts.google.com/
Il a l'avantage d'héberger les fonts chez lui, et google oblige, c'est très performant et ça t'évites d'avoir une requête serveur de ton côté. Comme c'est google, tu as de grande chance que ton utilisateur ait déjà la font dans son cache alors il n'aura pas besoin de la télécharger.
++
ou n'importe quel autre CDN, tout en sachant qu'il n'est pas recommandé d'avoir des polices personnalisées pour de nombreuses raisons dont l'accessibilité et le ralentissement du chargement d'une page, sans compter que ça complique les choses pour du responsive design.

", et google oblige, c'est très performant" ah bon...pas forcément c'est plutôt une facilité mais côté performances il y a probablement mieux que de faire appel à un CDN situé aux USA pour un site français...
NoxofFire
Messages postés
3
Date d'inscription
samedi 13 avril 2019
Statut
Membre
Dernière intervention
21 avril 2019
1 -
Malheureusement le font dont j'ai besoin n'existe pas dans les banques de données de google ou de squirel. Voila pourquoi je cherche à comprendre l'autre méthode car c'est le font utilisé pour l'écriture officielle du nom de mon association.
Si c'est un logo une image peut convenir. Si c'est un texte il faut que ça reste accessible, donc pas avec une police spéciale mais au contraire standardisé:

The Web is fundamentally designed to work for all people, whatever their hardware, software, language, location, or ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability.

source : https://www.w3.org/standards/webdesign/accessibility
Commenter la réponse de dsyren