By continuing your navigation on this site, you accept the use of cookies to offer you contents and adapted services. Legal Notice.

SKINS TUTO

GuppY Help Center


PRESENTATION
BOXES
SERVICES
JQUERY
BULK
EXAMPLES
Currently...

 121905 visitors

 1 visitor online

Il existe deux possibilités pour insérer une police de caractères.

  • Dans le dossier de la skin
  • Avec Google Fonts

Assurez-vous d'avoir le droit d'utiliser cette police.

Vous pouvez allez sur le site Font Squirrel qui a un générateur de caractères pour internet (webfont generator).

Exemple avec la police ALLURA.

1. Cliquer sur la police puis sur Webfont Kit

font1.png

En cliquant sur WEBFONT KIT, vous arrivez sur cette page (voir)

2. Après avoir choisi la langue (en français pour avoir les accents), télécharger le Zip.

3. Décompresser le Zip dans le dossier de la skin

4. Nommer le dossier "font"

5. Ouvrir le fichier "stylesheet"

font3.png

6. Copier les lignes suivantes :

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

}

7. Coller ces lignes au début du fichier style.css (après la section " body ")

8. Ajouter le dossier "font" dans les url (en rouge) :

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

}

Pour utiliser la police, indiquer :

 .titre { /*titre des boîtes centrales*/
  background: url(img/titre.png) no-repeat;
  padding-left: 22px;
  white-space: nowrap;
  font: 30px AlluraRegular;
  color: #fff;
  text-align: left;
  height: 40px;
  line-height: 28px;
}

Aller sur le site Google Fonts

Exemple avec la police ALLURA

fontG1.png

Vous pouvez choisir une ou plusieurs polices de caractères en cliquant sur ADD TO COLLECTION (en bleu, à droite)

1. Quand votre choix est fait, cliquez sur USE (tout en bas, à droite)

2. Copiez la ligne indiquée à la section 3 :

fontG3.png

4. Allez dans fichier skin.inc :

5. Ajoutez la ligne: $headinc       = " ";

6. Collez la ligne copiée entre les guillemets :

$mod_css       = "off";                         // off: no change permitted in css and skin look
$skn_logo      = $meskin."img/logo.png";           // Specific logo
$headinc       = "(<)link href='http://fonts.googleapis.com/css?family=Allura' rel='stylesheet' type='text/css'>";
$skinCopyright = 'Skin copyright GuppYTeam'; // Copyright de la skin
$boxid         = 0;

7. Pour utiliser la police, dans style.css , suivez les instructions de la section 4 :

fontG4.png

 .titre { /*titre des boîtes centrales*/
  background: url(img/titre.png) no-repeat;
  padding-left: 22px;
  white-space: nowrap;
  font: 30px Allura, cursive;
  color: #fff;
  text-align: left;
  height: 40px;
  line-height: 28px;
}


Creation date : 01/07/2013 08:02
Last update : 01/07/2013 08:11
Page read 4720 times


You are here :   Home » Fonts (additions)