28172 sujets

CSS et mise en forme, CSS3

[Résolu] Mettre en place font avec plusieurs styles et poids

Bonjour,
J'ai une police qui contient :
Luciole -Regular
Luciole-Italic
Luciole-Bold
et Luciole-BoldItalic
Soit en fait 4 polices.
J'essaye de les faire fonctionner avec dans le style.css :
/* font locale : Luciole */
@font-face {
	font-family: Luciole;
	src: 
		url(/wp-content/themes/twentyseventeen-enfant/fonts/Luciole-Regular.woff2) format(woff2),
		url(/wp-content/themes/twentyseventeen-enfant/fonts/Luciole-Regular.woff) format(woff);
}
@font-face {
	font-family: Luciole-Italic;
	src:
		url(/wp-content/themes/twentyseventeen-enfant/fonts/Luciole-Italic.woff2) format(woff2),		url(/wp-content/themes/twentyseventeen-enfant/fonts/Luciole-Italic.woff) format(woff);
}
@font-face {
	font-family: Luciole-Bold;
	src: 
		url(/wp-content/themes/twentyseventeen-enfant/fonts/Luciole-Bold.woff2) format(woff2),
		url(/wp-content/themes/twentyseventeen-enfant/fonts/Luciole-Bold.woff) format(woff);
}
@font-face {
	font-family: Luciole-BoldItalic;
	src: 
		url(/wp-content/themes/twentyseventeen-enfant/fonts/Luciole-BoldItalic.woff2) format(woff2),
		url(/wp-content/themes/twentyseventeen-enfant/fonts/Luciole-BoldItalic.woff) format(woff);,
}
body {
	font-family: Luciole, sans-serif !important;

Mais je n'arrive pas à appeler la police souhaitée, par exemple pour mettre le Titre2 <h2> en italique !!!
Merci de m'indiquer mon erreur.
Modérateur
Salut,

Je pense que tes url ne sont pas bonnes. Ton style.css devrait etre dans
/wp-content/themes/twentyseventeen-enfant

si je me trompe pas. Du coup ton url relative ne serait que :
/fonts/Luciole-BoldItalic.woff2

idem pour les autres.
Modifié par _laurent (23 Jul 2020 - 16:24)
Modérateur
Et sinon au passage tu peux configurer les variantes de ta font pour n'avoir qu'un seul et meme nom de font :

@font-face {
	font-family: Luciole;
	src: 
		url(/fonts/Luciole-Regular.woff2) format(woff2),
        url(/fonts/Luciole-Regular.woff) format(woff);
    font-style: normal;
    font-weight: normal;
}
@font-face {
	font-family: Luciole;
	src:
		url(/fonts/Luciole-Italic.woff2) format(woff2),
        url(/fonts/Luciole-Italic.woff) format(woff);
    font-style: italic;
    font-weight: normal;
}
@font-face {
	font-family: Luciole;
	src: 
		url(/fonts/Luciole-Bold.woff2) format(woff2),
		url(/fonts/Luciole-Bold.woff) format(woff);
    font-style: normal;
    font-weight: bold;
}
@font-face {
	font-family: Luciole;
	src: 
		url(/fonts/Luciole-BoldItalic.woff2) format(woff2),
		url(/fonts/Luciole-BoldItalic.woff) format(woff);
    font-style: italic;
    font-weight: bold;
}
Meilleure solution
Mon url complète est : C:\wamp64\www\TraditionTibetaineVG17\wp-content\themes\ttvg17 car je suis en local.
J'avais essayé en donnant toujours le même nom à font-family, je n'avais pas précisé les font-style et font-weight, si bien que quel que soit la police choisie, c'est toujours la bold-italic (la dernière) qui était prise en compte...
La solution de Laurent fonctionne correctement.
Je vais de ce pas enfiler mon bonnet d'âne.
Merci de votre coopération,
jack
Pour info :
Ce site utilise le caractère typographique Luciole, conçu spécifiquement pour les personnes malvoyantes. Ce projet est le résultat de plus de deux années de collaboration entre le Centre Technique Régional pour la Déficience Visuelle en Rhône-Alpes et le studio typographies.fr. Le projet a bénéficié d’une bourse de la Fondation suisse Ceres et de l’appui du laboratoire DIPHE de l’Université Lumière-Lyon 2. >> Voir le site http://luciole-vision.com/
Cerise sur le gâteau : la police est gratuite Smiley smile , sympa et très lisible
Sujet clos
Aller à