TUTO SKINS

Centre d'Aide GuppY


PRÉSENTATION
SERVICES
JQUERY
EN VRAC
EXEMPLES
En ce moment...

 98840 visiteurs

 2 visiteurs en ligne

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;
}


Date de création : 01/07/2013 08:02
Dernière modification : 01/07/2013 08:11
Page lue 3710 fois


Vous êtes ici :   Accueil » Fonts (ajouts)