[CSS] Police perso

Par Flohw, il y a 14 ans

Les bases HTML/CSS

Bonsoir,

J'ai récupéré une police que j'ai sur mon mac, en .ttf (elle s'appelle Skia) et je l'utilise sur un de mes sites (destiné à ma cousine en vrai). et j'ai un petit problème parce que dès que du texte est entre les balises <strong>, le texte n'est pas mis en gras, est ce normal ou ai je mal fait quelque chose ?

J'utilise la bootstrap de twitter et voici le css que j'ai mis pour utiliser cette police :

/* dans le fichier variables.less */
@font-face { font-family: Skia; src: url(Skia.ttf); }
/* et pour l'utiliser, même fichier */
@baseFontFamily: Skia, "Helvetica Neue", Helvetica, Arial, sans-serif;

Bien entendu, le fichier Skia.ttf se situe juste à coté du fichier .css généré par less puisque la police fonctionne en "normal" mais pas en "blod" (et le reste je ne sais pas, je eux vérifier si besoin)

6 réponses

Leny, il y a 14 ans

Hum...
Je crois, sans pouvoir m'avancer plus, qu'il faut qu'elles soient séparées pour les utiliser.
Je pense qu'il y avait un petit utilitaire mac qui s'appelle FontXChange, qui permet de convertir une typo en typos web (et qui générait donc les .eot, .woff et .svg pour la compatibilité avec les autres navigateurs), il est possible que cet utilitaire décompose aussi les fontes en plusieurs variantes.
Toutefois, je ne l'ai jamais testé, mais ça peut être une piste à creuser.

Ou trouver directement un "fontface kit", comme sur fontsquirrel, pour Skia. Mes rapides recherches dans Google n'ont rien donné pour ça, mais c'était vraiment du vite fait.

Leny, il y a 14 ans

La police en question existe-t-elle en gras ?
Pasque pour que du texte s'affiche en gras dans une police, il faut que cette police existe en gras...
Du coup, si la police existe, tu dois l'inclure aussi, en précisant qu'elle équivaut à la version bold de ta police.

Pour l'exemple, voici comment j'ai défini les variantes normales et grasses de OpenSans dans ma css :

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

 @font-face {
     font-family: 'OpenSans';
     src: url('OpenSans-Semibold-webfont.eot');
     src: url('OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
          url('OpenSans-Semibold-webfont.woff') format('woff'),
          url('OpenSans-Semibold-webfont.ttf') format('truetype'),
          url('OpenSans-Semibold-webfont.svg#OpenSansSemibold') format('svg');
     font-weight: bold;
     font-style: normal;
 }
Flohw, il y a 14 ans

oui elle existe en gras, dans le même fichier ttf : lorsque je l'ouvre avec mon mac, j'ai une liste déroulante avec 'Regular Light' (normal) 'Regular Bold' (Gras) et tout plein d'autres
mais je ne sais pas comment utiliser ces déclinaisaons

Flohw, il y a 14 ans

Bon et bien je suppose que la police n'existe pas en gras... J'ai cherché et je n'ai trouvé que Skia, Regular.
Ce qui est étrange, c'est qu'avec le livre de polices de Mac, (et OpenOffice) je peux la mettre en gras et ca fonctionne !
j'ai trouvé un converteur ttf2svf en ligne et je n'ai obtenu que la Regular

Qu'en penses tu ? parce que c'est la premiere fois que j'utilise une police perso et je suis pas un graphiste ou intégrateur à la base donc certaines choses ne sont pas tres acqises ou ne sont pas bien comprises :)

imagnum3, il y a 14 ans

Je confirme tu doit avoir un .ttf séparer pour pouvoir utiliser j'ai eut le même soucis.

Si ton fichier contient cette police en gras, il existe un site qui te formate tout ça je ne l'ai plus malheureusement dans mes favoris.

http://www.eotfast.com/documentation.php

Note : Quel navigateur utilise tu ? Car IE 8 est assez capricieux avec @font-face.

J’espère que ça peut être utile

Flohw, il y a 14 ans

à la base, on développe pas sous IE, on vérifie que ce qu'on a fait IE le fasse correctement (et à priori il le fait de mieux en mieux) :)
eotfast a l'air d'être pour windows non ?
ca n'a pas été utile pour moi parce que j'ai trouvé une police sur google font du coup ca va mieux :)

merci !