28172 sujets

CSS et mise en forme, CSS3

[résolu] @font-face

Bonjour!
Voici mon problème avec @font-face :
je ne parviens pas à utiliser les versions bold et lighter d'une même font.
Firefox ne prend en compte que la version normale alors que je lui indique d'utiliser la version lighter.
Je bosse sur drupal

voici mon code :

@font-face {
	font-family: "petita";
	font-weight : lighter;
	src: url("font/PetitaLight.ttf") ;
}

@font-face {
	font-family: "petita";
	font-weight : normal;
	src: url("font/PetitaMedium.ttf") ;
}

@font-face {
	font-family: "petita";
	font-weight : bold;
	src: url("font/PetitaBold.ttf") ;
}

body {
  margin: 0;
    font:  petita, "Helvetica Neue", helvetica, Arial, sans-serif;
}

#site-slogan{
margin: 0 0 0 313px;
font-family: "petita";
font-weight : lighter;
color : #fbf9f8;
font-size: 2.1em;
}

#site-slogan devrait d'après moi apparaitre avec la version lighter de la font alors qu'il apparait en version normal.

Une idée?

merci
Modifié par Lepote (27 Dec 2010 - 18:12)
Salut et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

Bonne continuation Smiley smile

upload/1-code.gif
Salut,

Tu as une page en ligne qui nous permettrait de vérifier :
- Que tes chemins sont corrects,
- Qu'il n'y a pas d'élément imbriqué dans #site-slogan pouvant influer sur la mise en forme (une balise <hx>, <strong>, <cite>, etc.),
- Que le problème ne vient pas de la configuration de ton navigateur ou de l'installation physique des polices sur ton disque dur.

Ça ne marche pas pour le bold non plus c'est ça ? En tout cas dans ce que tu montres je ne vois rien d'aberrant.

Perso, j'avais déjà essayé de faire fonctionner un font-weight:lighter d'une typo intégrée via @font-face, il me semble que ça n'a jamais fonctionné...
Bonjour,

Ceci est mon premier message sur Alsacreations, un site qui plait beaucoup au grand débutant que je suis...

J'ai moi aussi un problème avec la fonction @font-face, qui serait merveilleuse si elle marchait ! Je voudrais mettre sur mon blog la police Zapfino (oui je sais : vu le poids du fichier c'est un peu ridicule en regard de l'optimisation, mais bon... ce n'est pas un site pro).

Avant d'aller plus loin voici la page d'accueil de mon site : Christus.

J'ai donc convertit cette police dans les format .otf et .eot que j'ai mis à la racine du site (sinon il parait que IE ne prendrait pas en compte la fonction, mais ça, je ne suis pas encore en mesure de vérifier). Ensuite dans ma feuille de style j'ai tapé ce code :

@font-face
{
	font-family:"Zapfino";
	src:url("Zapfino.otf") format("opentype");
	src:url("Zapfino.eot");
}


bien sûr je n'ai pas oublié de mettre une "valeur" (c'est comme ça qu'on dit?) "Zapfino" pour les éléments que je veux stiler, en l'occurence les titres :

/*titres et sous-titres
-------------------------------------------------------------- */
h1,h2,h3,h4,h5,h6
{
	color:#571206;
	font-family:Zapfino,Georgia,Serif;
	text-shadow:1px 1px 3px #AAA;
}


Bien sûr, ça marche sur mon Mac étant donné qu'il possède la police incriminée, il peut donc suivre les directives CSS sur la mise en forme à partir de son fichier font...

À votre avis, qu'ai-je oublié ?

PS : si vous allez voir ma feuille de style, je précise que j'ai actuellement désactivé la fonction par des /* */.
Attention, la fonte zafpino n'est pas une fonte libre, tu n'as pas le droit de l'utiliser sur le net. Smiley cligne

À la rigueur, pour les possesseur de machines Apple, tu peux la mettre dans la cascade (sans l'installer sur ton site)… Comme dans ton code :

/*titres et sous-titres 
-------------------------------------------------------------- */ 
h1,h2,h3,h4,h5,h6 
{ 
    color:#571206; 
    font-family:Zapfino,Georgia,Serif; 
    text-shadow:1px 1px 3px #AAA; 
}

Modifié par Patidou (24 Dec 2010 - 18:43)
@ Patidou,

D'accord merci.

En aparté : comment sait-on si oui ou non une police est libre ? Je vais essayer de mieux m'expliquer : après votre remarque je suis allé voir dans le fichier de la font, et il y a effectivement un copyright "All rights reserved", mais c'est aussi le cas des polices les plus communes (Arial, Comic sans MS...).

Alors comment puis-je faire pour connaître les polices que je peux vraiment utiliser et les autres ? En consultant des sites comme "Dafont" ?

Après votre mise en garde je suis allé faire un tour sur le net et je suis tombé sur le site assez connu "dafont"... où ils vendent cette police plus de 40 euros ! Elle est indiquée "police commerciale". Qu'est-ce que cela signifie ? Qu'une personne ayant payé cette somme aurait le droit de l'exploiter publiquement sur le net par exemple ?

Bref, du coup je crois que je vais laisser tomber cet histoire de @font-face, si c'est pour mettre une police plus "commune" cela ne vaux pas tellement la peine que l'on se donnerait pour la mettre...
Il y a plusieurs sites qui proposent des solutions : google font directory (gratuit), fontsquirrel (gratuit), typekit (kit de base gratuit sous conditions). Bien vérifier si les accents sont disponibles dans les échantillons. Smiley cligne


Il ne faut jamais copier des polices systèmes sur son site (sauf peut-être celles dans les OS libres).
Modifié par Patidou (24 Dec 2010 - 19:13)
Et bien dites donc vous êtes rapide !

"Il ne faut jamais copier les polices système", merci pour ces précisions. Je reviens juste de chercher des polices gratuites, il y en a qui sont quand même bien, du coup je ne renonce pas encore pour l'instant.

Du coup je ramène ma première question sur le devant de la scène : Auriez-vous une idée d'où le bas blesse dans mon code @font-face ?
Olivier C a écrit :
Bonjour,

Ceci est mon premier message sur Alsacreations, un site qui plait beaucoup au grand débutant que je suis...


Bonjour,

Le mieux serait de créer ton propre sujet, en effet toutes les utilisations de @font-face n'apportent pas les mêmes questionnements que ce sujet Smiley cligne
Salut,
BeliG a écrit :
Perso, j'avais déjà essayé de faire fonctionner un font-weight:lighter d'une typo intégrée via @font-face, il me semble que ça n'a jamais fonctionné...

Effectivement.

Une solution pour contourner ce problème serait de procéder comme suit :

@font-face {
 font-family: "petita lighter";
 font-weight : normal;
 font-style : normal;
 src: url(font/PetitaLight.ttf);
}

#site-slogan {
  font-family: "petita lighter";
  /* Pas de déclaration avec font-weight */
}
Merci Victor, très intéressant,

Finalement j'ai abandonné l'utilisation du @font-face pour ma typo dans la mesure où le rendu des navigateurs est loin d'être aussi satisfaisant que sur mon .psd (lettres déformées).

Merci encore
Sujet clos
Aller à