Bonjour, je suis depuis peu le cours sur la programmation du HTML et du CSS.

Et voici mon problème, je n'arrive pas à utiliser @font-face.

Pourtant, j'ai suivi le cours à la lettre, j'ai regardé plusieurs sujets parlants du problème de @font-face sur ce forum et aucun n'arrive à m'aider.

Bref ça fait quelques jours que je suis bloqué. Est-ce que quelqu’un aurait une solution à m'apporter ?

Je mets juste en dessous les screens du script HTML et CSS, ainsi que les screens du contenu des dossiers et pour finir un screen de mon fichier HTML exécuté.

Merci d'avoir lu ma requête.

Bonjour, j'ai le même problème...Hello! personne ne peut nos aider?

Es tu sous Linux? moi oui j'essaie de voir de ce côté là.

J'ai vu que tes fichiers de police sont dans un dossier à part. Peut être en les sortant à côté de ton fichier CSS ça peut marcher?

bonjour,

je crois que c'est parce que tu as mis tes police dans un autre fichier, 

dans ce cas la tu mets 

font-family: 'nom-du-dossier/nom-de-ta-police'

j'espère avoir pu vous aidez

Bonjour,

Merci de colorer votre code à l'aide du bouton Code

Les forums d'Openclassrooms disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source afin de les rendre plus lisibles et faciles à manipuler par les intervenants. Pour cela, il faut utiliser le bouton de l'éditeur, choisir un des langages proposés et coller votre code dans la zone prévue. Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: xml;">Votre code ici</pre>.

Liens conseillés

• Règles générales du forum

---

ColaLola a écrit:

bonjour,

je crois que c'est parce que tu as mis tes police dans un autre fichier, 

dans ce cas la tu mets 

font-family: 'nom-du-dossier/nom-de-ta-police'

j'espère avoir pu vous aidez

Bonjour, non ce n'est pas comme cela que  ça fonctionne. le nom déclaré avec la propriété font-family dans le @font-face; c'est ce même nom qu'il faut utiliser avec la propriété font-family pour un sélecteur CSS donné.

Le chemin de la police, c'est la valeur passée à url() dans la déclaration @font-face.

-
Edité par AbcAbc6 22 juillet 2019 à 19:35:26

Ah d'accord excuser moi !

Salut !

Si tu as suivi le cours à la lettre, ton code doit être bon

Vide le cache de ton navigateur ou essaye d'ouvrir ton fichier html avec un autre navigateur que celui que tu utilises actuellement

de rien

-
Edité par ThomasBélair 23 juillet 2019 à 1:22:23

Salut!

J'ai le même soucis, mon code est pourtant bon. Sur chrome c'est bon, et sur firefox non.. J'ai pourtant vider mon cache.. J'aimerai juste comprendre, car si j'ai ce soucis, c'est que d'autres l'auront si un jour je code un site, non ?

Bonjour,

Il me semble que tu n'as pas mis de slash pour fermer ta balise <link>.

...

C'était ça ?

Enfin cela dit, je n'arrive pas non plus à utiliser @fontface.

Je ne trouve pas sur Squirrel des fichiers prêts à l'emploi comme indiqué sur le cours, je ne trouve que des ttf et je dois monter mon code toute seule... bon le but c'est d'y arriver seule, mais du coup j'ai des doutes sur mon code.

Quelqu'un aurait une police à me recommander avec un fichier CSS d'exemple intégré SVP ?

-
Edité par Dame-Nede 23 juillet 2019 à 19:53:26

En fait c'est tout simple :

Tu vas ici : https://www.fontsquirrel.com/tools/webfont-generator

Tu y met ta font ( telecharger ou tu veux ), tu passes en mode expert et tu met au début tout les compatibilités.

Tu le telecharges et hop. Dans le dossier tu as un CSS prêt a l'emploi, tu c/c, bidouille un peu et c'est bon

Il m'a fallut 2h pour tout comprendre.. Et moi sur firefox je vois pas les résultats.. mais sur chrome oui..

Rho super, merci !

Effectivement ça ne marche pas sur Firefox pour moi non plus, mais je ne vais pas pinailler davantage !

Naunau12, c'est bon de ton côté ?

woff et woff2 sont largement suffisant aujourd'hui c'est pourquoi ce sont les formats par défaut du Webfont Generator. Est-ce qu'en ne conservant que ces formats la police est utilisée par Firefox ?

pour certaine police (télécharger) il existe qu'un seul type de fichier (exemple : .ttf)  et pour d'autre 2 fichiers (.ttf ; .Woff)...ainsi de suite

il faut consulter le descriptif de la police pour savoir quels type de fichier est disponible pour cette police 

-
Edité par JulietteMM 25 juillet 2019 à 15:53:24

Il existe des convertisseurs comme celui mentionné trois posts plus haut.

Bonsoir,

En effet c'est Firefox qui n'arrive pas à prendre en compte la font. Je viens d'essayer avec Chrome et Edge et il y a aucun problème.

Du coup comment on pourrait faire pour que Mozilla arrive à prendre en compte une police ?

Ha oui et pour information je suis sous Windows 10 et avec Mozilla comme navigateur par défaut (avec le cache vide).

En tout cas merci pour vos réponses 

À moins que tu utilises Firefox 3.5 il supporte WOFF donc ça n'est pas le problème. Par contre tu accèdes à ta page via le "protocole" file:/// et il semble que Firefox est assez frileux dans ce cas de figure. Essaie de changer security.fileuri.strict_origin_policy à false dans about:config.

En effet, j'ai fait la manip et maintenant c'est bon sur Mozilla !

Merci beaucoup

J'ai beaucoup tourné en boucle aussi sur ce problème, maintenant résolu ! Merci MatTheCat -:)

Bonjour,

J'ai eu le même soucis que vous tous pour les l'affichage des polices, grâce a vous j'ai réussi a résoudre mon problème.

Merci MatTheCat

Bonjour

j'ai eu le meme soucis mais c'est reglé avec la manip.

Juste pour savoir si la manip n'affecte pas la sécurité en navigant avec Firefox. 

MERCI MatTheCat

Merci beaucoup pour vos réponses, problème résolu, je teste aussi sur Opera du coup.