En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies pour vous proposer des contenus et services adaptés. Mentions légales.

Chez Papinou - Skins GuppY 5

 
 
 
 
 
 
Vous êtes ici :   Accueil » Utilisation @font-face
 
 
 
    Imprimer la page...
    Imprimer la section...

Utilisation @font-face

Utilisation de @font-face sur un site



Dans le répertoire de votre skin, vous avez un sous-répertoire font.
Dans ce sous répertoire vous mettez la fonte concernée dans ses différents formats:

- AnchorJack.ttf
- anchorjack-webfont.eot
- anchorjack-webfont.svg
- anchorjack-webfont.ttf
- anchorjack-webfont.woff
- stylesheet.css

Pour trouver ces fichiers, vos vous connectez sur le site Dafont  pour télécharger la fonte que vous souhaitez installer, ici AnchorJack.ttf.
Pour avoir les différents formats, vous utilisez ce site qui va vous les fournir à partir de AnchorJack.ttf


Dans le fichier fontstyle.css vous ajoutez :

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


 Pour l'afficher, par exemple dans le menu:

div.menuIcons ul li a span { /* lien */
  color: #fff;
  background-color: inherit;
  text-decoration: none;
  font-family: anchor_jackregular, sans-serif;
  font-size: 20px;
}


Pour la ligne font-family: anchor_jackregular, sans-serif; vous sélectionner anchor_jackregular, sans-serif dans config look, c'est tout.

Attention à bien choisir une fonte lisible et adaptée soit au titre soit au texte d'un document.
Dans le cas présent,je n'ai utilisé la fonte "AnchorJack" que pour le menu.

Pour toutes les questions concernant cet article, merci de poster sur mon forum, rubrique Plugins, forks, astuces GuppY.

Bonne visite Chez Papinou !!!



 


Date de création : 12/03/2016 @ 17:49
Catégorie : Astuces GuppY 5 - Générales
Page lue 7298 fois