@font-face ne marche pas

[Visiteur]

Slt

Je veux utiliser pour un titre une police specifique. J'ai donc utilise @font-face. Mais ca ne marche pas. La police est dancingscript. Sur le site www.fontsquirrel.comr j'ai genere tout se qu'il faut pour integrer cette police.

J'ai mis les 5 formats de la police (.eot, .svg, .ttf, .woff et .woff2) a la racine du site, puis dans mon CSS perso (j'utilise Gantry, donc j'ai mis dans gantry/css/mycustomstyle.css) ce code :

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

Code HTML du titre :

<p class="titre-accueil">Les cimes de Gaïa</p>

Code CSS (dans gantry/css/mycustomstyle.css) :

.titre-accueil {
	font-family:"dancing_scriptregular";
	font-size:2em;
}

Le CSS est bien prit en charge, le titre ayant bien grossit de 2em.

Aurais-je oublie une manip ??

Merci d'avance pour votre aide.

Edit : j'ai modife la structure du titre. Voir mon message numero 3.

[messinmaisoui]

Re : @font-face ne marche pas

J'aurais plutôt créé un répertoire gantry/fonts
et commencer mes url par url("../fonts/dancing...

[Visiteur]

Re : @font-face ne marche pas

j'ai fait comme tu ma dit, mais c'est pareil. Par contre j'ai fait differement pour le titre. Dans les parametrages d'affichage de la page j'ai mis a Oui pour l'affichage de l'en-tete de la page. J'ai donc supprime la ligne html

<p class="titre-accueil">Les cimes de Gaïa</p>

et le CSS de .titre-accueil (que j'ai donc supprime) je l'ai mis en h1, avec la modif que tu me conseil. Mais ca ne marche quant meme pas.

[ghazal]

Re : @font-face ne marche pas

Salut,

J'ai mis les 5 formats de la police (.eot, .svg, .ttf, .woff et .woff2) a la racine du site

Si je comprends bien ce que tu dis, les 5 fichiers seraient dans le même répertoire que configuration.php (par exemple) ?
Si c'est vraiment le cas, ca ne risque pas de fonctionner.

Ici, une doc sur la méthode d'insertion de fonts dans Gantry :

http://www.gantry-framework.org/documentation/joomla/tutorials/custom_font.md

Ici une doc sur la méthode d'insertion d'un fichier custom.css

http://www.gantry-framework.org/documentation/joomla/tutorials/custom_stylesheet.md

Résumé :
Place le dossier "fonts" dans :
templates/[nom-de-ton-template-gantry]/fonts/

dans ton fichier [nom-de-ton-template-gantry]-custom.css,
localisé dans templates/[nom-de-ton-template-gantry]/css/[nom-de-ton-template-gantry]-custom.css

le chemin de tes fonts sera alors :

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

NB : selon l'hébergeur, et pour des raisons probablement liés aux réglages du serveur,
il est parfois nécessaire de placer le dossier "fonts" dans le dossier "css",
il faut donc accorder le chemin (URL) de @font-face vers ce dossier:

src: url('fonts/dancingscript-regular-webfont.eot');
etc...

[Visiteur]

Re : @font-face ne marche pas

Si je comprends bien ce que tu dis, les 5 fichiers seraient dans le même répertoire que configuration.php (par exemple) ?
Si c'est vraiment le cas, ca ne risque pas de fonctionner.

Au debut oui, j'avais mis mes fonts a la racine du site. Mais comme je le dit dans mon 3° message, j'ai modifie la structure de mon titre et j'avais mis mes fonts dans templates/gantry/fonts (comme me l'avais conseille messinmaisoui).

Ici une doc sur la méthode d'insertion d'un fichier custom.css
http://www.gantry-framework.org/docu..._stylesheet.md

Ca c'est deja fait, la creation d'un css perso.J'avais suivis le tuto sur www.web54.

Résumé :
Place le dossier "fonts" dans :
templates/[nom-de-ton-template-gantry]/fonts/

dans ton fichier [nom-de-ton-template-gantry]-custom.css,
localisé dans templates/[nom-de-ton-template-gantry]/css/[nom-de-ton-template-gantry]-custom.css

C'est exactement ce que j'ai fait (message #3). Mais ca ne marchait pas. Sauf qu'en ecrivant mon message je me suis rendu compte que dans le chemin j'avais ecris le nom du dossier des fonts en font alors que le dossier c'etait fonts !!!! ca ne risquait pas de marcher

NB : selon l'hébergeur, et pour des raisons probablement liés aux réglages du serveur,
il est parfois nécessaire de placer le dossier "fonts" dans le dossier "css",
il faut donc accorder le chemin (URL) de @font-face vers ce dossier:

avant de me rendre compte que je m'etais trompe dans le nom du dossier, j'avais suivis ton conceil et mis mes fonts directement dans le dossier templates/gantry/css, avec le chemin

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

et ca marchait.

Merci a vous 2 pour votre aide et vos lumieres