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......