Annonce

**Yarflam** · 14 mai 2013, 22h43

Salut !

Code:

@font-face {
  font-family: 'MaPolice';
  src: url("police.ttf");
}

Test avec un fichier TTF.

Ou look ce site : http://fvsch.com/code/css-font-face/

src: url("super-fonte-regular.otf") format("opentype");

Ça me paraît manquant

**Yarflam** · 14 mai 2013, 23h03

Code:

<!doctype html>
  <head>
    <title>Test</title>
    <style type='text/css'>
      @font-face {
          font-family: Bellota-Bold;
          src: url("Bellota-Bold.otf");
      }

      p {
          font-family: Bellota-Bold;
      }
    </style>
  </head>
  <body>
    <p>Test</p>
  </body>
</html>

Ça marche très bien.

**gg97469** · 14 mai 2013, 23h04

Salut et merci de ta réponse !

Et après le @font-face, je met ça :

nav a
{ font-family: Bellota-Bold;
font-size: 1.3em;
color: #181818;
padding-bottom: 3px;
text-decoration: none;

ou l'autre ?

Merci beaucoup

**gg97469** · 14 mai 2013, 23h06

Envoyé par Yarflam Voir le message

Code:

<!doctype html>
  <head>
    <title>Test</title>
    <style type='text/css'>
      @font-face {
          font-family: 'Bellota-Bold';
          src: url("Bellota-Bold.otf");
      }

      p {
          font-family: 'Bellota-Bold';
      }
    </style>
  </head>
  <body>
    <p>Test</p>
  </body>
</html>

Ça marche très bien.

donc j'intègre le code directement dans la feuille HTML et pas dans la feuille CSS ?

**Yarflam** · 14 mai 2013, 23h08

Non, du tout !
C'est un exemple.

Je suis quasiment sur que ton problème de font-face est lié au chemin d'accès.

**Yodark** · 14 mai 2013, 23h10

Il faut insérer tous les formats pour que ça fonctionne sur tous les navigateurs.

Code:

@font-face {
    font-family: 'NomPolice';
    src: url('Polices/NomPolice.eot') format('eot'),
         url('Polices/NomPolice.woff') format('woff'),
         url('Polices/NomPolice.ttf') format('truetype'),
         url('Polices/NomPolice.svg') format('svg');
}

**gg97469** · 14 mai 2013, 23h20

Envoyé par Yarflam Voir le message

Non, du tout !
C'est un exemple.

Je suis quasiment sur que ton problème de font-face est lié au chemin d'accès.

Effectivement ça marche, merci !! Par contre, du coup l'un de mes deux codes plus haut est superflue non ?

Envoyé par Lastwissh Voir le message

Il faut insérer tous les formats pour que ça fonctionne sur tous les navigateurs.

Code:

@font-face {
    font-family: 'NomPolice';
    src: url('Polices/NomPolice.eot') format('eot'),
         url('Polices/NomPolice.woff') format('woff'),
         url('Polices/NomPolice.ttf') format('truetype'),
         url('Polices/NomPolice.svg') format('svg');
}

Salut,

Je ne l'ai trouvé qu'au format OTF, donc comment faire ?

Merci

**SAKAROV** · 14 mai 2013, 23h21

Le mieux pour utiliser une font spé est de passer par Google Fonts.

1. Ta font sera assurée d'être supportée.
2. La bibliothèque de polices est encore plus vaste que celle de DaFont.
3. Elle te fournit directement le code à implémenter dans ton CSS.

Tu vas donc ici :

http://www.google.com/fonts/

Pour la démo on va faire avec la première en haut. Donc tu clique sur l'icone 'petite flèche qui va vers la droite' : "Quick Use".

1. Tu paramètres ta police en fonction des aperçus.
2. Tu choisis ton charset (Latin).
3. Tu rentres la ligne de code (souhaitée, cf. options) pour appeler la font chez Google (3 options : HTML, CSS, JS : par défaut HTML).
4. Tu copies la ligne à mettre dans ton CSS.

Note : Tout le monde dit à tort (et à travers) HTML 5 et CSS 3, alors que la plupart du temps ils font du xHTML et du CSS2. Arrêtez, par pitié, de sortir "HTML5/CSS3" à tout bout de champ parce-que vous utilisez juste une seule petite balise/propriétés "exotiques". Surtout que là en l'occurrence, @font-face existe depuis bien longtemps. C'est juste qu'elle était mal prise en compte par les navigateurs.

**Yarflam** · 14 mai 2013, 23h26

Je ne peux pas t'aider, sans code.
La seule chose qui doit être important c'est l'import.

Code:

      @font-face {
          font-family: 'Bellota-Bold';
          src: url("Bellota-Bold.otf");
      }

Après tu mets le classique "font-family" pour utiliser la police en question.
Si ça marche pas, vérifies les points virgules / fermeture des accolades / syntaxes etc ...

@++

EDIT: Bonne idée Sakarov !

**gg97469** · 14 mai 2013, 23h38

Envoyé par Yarflam Voir le message

Je ne peux pas t'aider, sans code.
La seule chose qui doit être important c'est l'import.

Code:

      @font-face {
          font-family: 'Bellota-Bold';
          src: url("Bellota-Bold.otf");
      }

Après tu mets le classique "font-family" pour utiliser la police en question.
Si ça marche pas, vérifies les points virgules / fermeture des accolades / syntaxes etc ...

@++

EDIT: Bonne idée Sakarov !

Tant que ça fonctionne, c'est l'essentiel merci

.

Envoyé par SAKAROV Voir le message

Le mieux pour utiliser une font spé est de passer par Google Fonts.

1. Ta font sera assurée d'être supportée.
2. La bibliothèque de polices est encore plus vaste que celle de DaFont.
3. Elle te fournit directement le code à implémenter dans ton CSS.

Tu vas donc ici :

http://www.google.com/fonts/

Pour la démo on va faire avec la première en haut. Donc tu clique sur l'icone 'petite flèche qui va vers la droite' : "Quick Use".

1. Tu paramètres ta police en fonction des aperçus.
2. Tu choisis ton charset (Latin).
3. Tu rentres la ligne de code (souhaitée, cf. options) pour appeler la font chez Google (3 options : HTML, CSS, JS : par défaut HTML).
4. Tu copies la ligne à mettre dans ton CSS.

Note : Tout le monde dit à tort (et à travers) HTML 5 et CSS 3, alors que la plupart du temps ils font du xHTML et du CSS2. Arrêtez, par pitié, de sortir "HTML5/CSS3" à tout bout de champ parce-que vous utilisez juste une seule petite balise/propriétés "exotiques". Surtout que là en l'occurrence, @font-face existe depuis bien longtemps. C'est juste qu'elle était mal prise en compte par les navigateurs.

C'est excellent cette solution, merci beaucoup !!

**Yodark** · 15 mai 2013, 00h04

Sinon, tu importes ta police ici et ça te crée directement tout ce dont tu as besoin (formats + css)

Annonce

Problème integration de police HTML CSS

Problème integration de police HTML CSS

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire