Discussion :

[F6EEQ]

Bonjour,

Je travaille sur le Tuto "TD programmation web" de Romain Lebreton, et je bute sur une syntaxe basique.

Voici les deux éléments en question:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
h3 {
	font-style : italic;
	color : maroon;
	font-family : "mexican", "Arial", "sans-serif";
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
@font-face {
	font-family : "mexican" ;
	src : url("./fonts/mexicantequila-italic.ttf");
}

Je n'arrive pas à faire afficher la police "mexican".
Quand j'inspecte le code, c'est toujours l'ARIAL qui est utilisé (donc la police de remplacement).

Cette police "mexican" (ttf téléchargé sur 1001fonts) est dans le répertoire "fonts" , mais je pense qu'il y a un problème de syntaxe dans l'appel du fichier.
J'ai regardé W3school, Mozzilla et le tuto. Le problème est que dans les 3 exemples, la façon d'appeler le fichier est différente, c'est à dire que après "url" il y a ou pas de guillemet. J'ai essayé les toutes les combinaisons sans succès.
Dans le HTML quand on a une "href", il faut mettre un point pour dire qu'on est dans le répertoire local. Faut-il aussi pour le CSS ??

Je suis un peu perdu!!

Merci de m'aider pour cette question assez basique!

Gérard.

[Invité]

Bonjour,

.ttf n'est pas suffisant.

Regarde ici : Font Squirell

[F6EEQ]

Merci de la réponse, mais je ne trouve rien de plus dans le lien.

J'ai ajouté format("truetype"), mais ça ne change rien.
Je pense que l'erreur vient du lien qui pointe sur la fonte et qui est mal écrit ??

J'ai vérifié et re-vérifié les orthographes, essayé une autre fonte, changé les " en ' ... rien!
J'ai aussi vérifié dans FFox que les polices web étaient autorisées.

Difficile... mais probablement évident... quand j'aurai trouvé l'erreur.

[Invité]

1- Sur "Font Squirell Webfont Generator" :

• tu télécharges le fichier .ttf que tu as (bouton "UPLOAD FONTS").
• tu coches aussi l'"Agreement"
• puis "Download Your Kit"

Ensuite, ça génère automatiquement les autres formats utiles, et une archive zip à télécharger.
Dans cette archive se trouve aussi un exemple de code css.


2- Je n'ai pas trouvé de font "mexican" sur 1001fonts.com...
Ah si : "Mexican Tequila" !

[F6EEQ]

OK et merci de la précision... c'était pas évident de comprendre cet "upload" sur squirrel!

Le code généré ressemble point à point à ce que j'avais écrit.
Ca fonctionne, mais je dois mettre les fontes dans le dossier "css". C'est pour ça qu'il n'y a pas de chemin relatif, seulement des apostrophes.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
@font-face {
    font-family: 'alex_brushregular';
    src: url('alexbrush-regular-webfont.woff2') format('woff2'),
         url('fonts/alexbrush-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
 
}

Mais si je veux mettre les fontes dans le dossier "fonts", je dois avoir le lien qui pointe sur ma fonte.
Et c'est bien là que le bât blesse, ma syntaxe (comme dans mon premier post) src : url(... ne fonctionne pas, et je ne comprends pas pourquoi.

Gérard

[Invité]

Ça dépend de ton arborescence (la position relative des 2 fichiers que tu ne précises pas clairement).

Ex. :

• dossier "CSS" - style.css
• dossier "fonts" - alexbrush......

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

url('../fonts/alexbrush......

• style.css
• dossier "fonts" - alexbrush......

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

url('./fonts/alexbrush......

[F6EEQ]

OK, maintenant ça fonctionne...
J'ai pourtant l'impression de n'avoir rien changé!! Mais il devait y avoir un diabledans les détails.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
@font-face {
    font-family: 'alex_brushregular';
    src: url('./fonts/alexbrush-regular-webfont.woff2') format('woff2'),
         url('./fonts/alexbrush-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
 
}

L'arborescence est classique:

TD... (dossier principal)

fonts...

css...

images...

index.html

Merci de ton aide

@+

[F6EEQ]

En reprenant le code ce matin j'ai compris quelque chose

Mon fichier "style.css" est dans un répertoire /CSS

Donc, quand j'écris URL("./font/xxxx") je remonte d'un niveau (le terme n'est peut être pas exact...) dans l'arborescence, c'est à dire que je viens dans le répertoire courant, le répertoire /CSS.
Comme à l'origine, mon répertoire "font" était à la racine du site, ça ne pouvait pas fonctionner.

J'ai mis "font" dans /CSS et tout fonctionne.

En fait j'ai été trompé par la syntaxe HTML demon fichier "index.html". Comme ce fichier est à la racine du site, un ./ pointe bien sur le répertoire courant, celui du site. Je n'avais pas fait attention à la mini arborescence du répertoire css.

Bon l'explication est longue, mais je suis content d'avoir trouvé . Je ne sais pas si il y a beaucoup de débutants comme moi qui lisent ce forum, mais j'espère avoir été utile!!
Pour info, j'ai trouvé l'erreur en regardant en détail l'explorateur de code du navigateur, ses messages d'erreur et les liens des sources. Merci la touche F12 !!
Merci aussi à jreaux62 qui m'a bien mit sur la voie de la sagesse.

Gérard.

[Invité]

Merci aussi à jreaux62 qui m'a bien mit sur la voie de la sagesse.

Si :

• le fichier "style.css" est dans un répertoire /CSS
• les fichiers fonts sont dans un répertoire /font
• et que les dossiers /CSS et /font sont au même niveau

Alors, il faut écrire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 URL("../font/xxxx")

• ../ : on "descend" de /CSS
• font/ : on "remonte" dans /font

ATTENTION : dans le fichier CSS, c'est le chemin relatif entre ce fichier CSS et les fichiers de font qui compte.
On ne se préoccupe pas de savoir dans quelle page du site le CSS sera appelé.