Tutoriel Comment intégrer une police personnalisé à votre site ?

1899

Ancien staff
Inscription
10 Août 2012
Messages
9 798
Réactions
4 482
Points
29 037
https://reality-gaming.fr/attachments/header-psd-png.65429/?temp_hash=ca59f08ce2d8ed87f93abf4cca9fa925

Bonjour à tous ,

Aujourd'hui je vais vous apprendre à intégrer une police personnalisé à votre site, c'est à dire une police autre que Arial, Tahoma, Trebuchet MS et les autres police installé de base.

https://reality-gaming.fr/attachments/separateur-orange-png.65430/?temp_hash=ca59f08ce2d8ed87f93abf4cca9fa925

Alors, pour ce faire, trouver une police hébergé sur internet et conçu pour internet, pour ma part je vais utiliser OpenSansCondensed, une police faite par google et hébergé sur les serveurs de google.
Cette police est notamment cette utilisé par RealityGaming, et elle n'est pas du tout difficile de l'installer comme toute les autres polices :)

Pour trouver vos polices, allez sur google font par exemple :

~

Dans votre balise <head> :
HTML:
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>Tutoriel</title>
</head>
Il va falloir intégrer le lien de la police dans la balise, à l'aide d'un code, le même pour rattacher un fichier .css au document html, c'est à dire :
Code:
  <link href=' ' rel='stylesheet' type='text/css'>

Entre la balise href, mettez y le lien de votre police, pour ma part cela me donne ceci :
Code:
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700,300italic' rel='stylesheet' type='text/css'>

Et généralement, sur google font, vous avez directement la balise à intégrer dans votre <head>

Voici le code fini :​
HTML:
<head>
  <meta charset="utf-8">
  <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700,300italic' rel='stylesheet' type='text/css'>
  <title>Tutoriel</title>
</head>

https://reality-gaming.fr/attachments/separateur-orange-png.65430/?temp_hash=ca59f08ce2d8ed87f93abf4cca9fa925

Et maintenant pour l'utiliser, allez dans votre fichier css et ajouter :
Code:
font-family: 'Open Sans Condensed' sans-serif;

Il faut l'ajouter à une class, tel que .titre, #titre, p, h3 etc... ;)
Code:
.shop {
  font-size: 24px;
  text-align: center;
  font-family: 'Open Sans Condensed' sans-serif;
  text-shadow: 0px 0px 3px black;
  margin-right: 50px;
}

Tuto terminé, en espérant qu'il vous ai été utile :D
 

WhiiTe'

Administateur
Ancien staff
Inscription
22 Octobre 2011
Messages
14 706
Réactions
8 492
Points
32 425
Merci du tutoriel même si je connaissais déjà :D

Roboto > ALL :d:
 

Streexz

Premium
Inscription
2 Janvier 2015
Messages
1 002
Réactions
353
Points
12 146
https://reality-gaming.fr/attachments/header-psd-png.65429/?temp_hash=ca59f08ce2d8ed87f93abf4cca9fa925

Bonjour à tous ,

Aujourd'hui je vais vous apprendre à intégrer une police personnalisé à votre site, c'est à dire une police autre que Arial, Tahoma, Trebuchet MS et les autres police installé de base.

https://reality-gaming.fr/attachments/separateur-orange-png.65430/?temp_hash=ca59f08ce2d8ed87f93abf4cca9fa925

Alors, pour ce faire, trouver une police hébergé sur internet et conçu pour internet, pour ma part je vais utiliser OpenSansCondensed, une police faite par google et hébergé sur les serveurs de google.
Cette police est notamment cette utilisé par RealityGaming, et elle n'est pas du tout difficile de l'installer comme toute les autres polices :)

Pour trouver vos polices, allez sur google font par exemple :

~

Dans votre balise <head> :
HTML:
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>Tutoriel</title>
</head>
Il va falloir intégrer le lien de la police dans la balise, à l'aide d'un code, le même pour rattacher un fichier .css au document html, c'est à dire :
Code:
  <link href=' ' rel='stylesheet' type='text/css'>

Entre la balise href, mettez y le lien de votre police, pour ma part cela me donne ceci :
Code:
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700,300italic' rel='stylesheet' type='text/css'>

Et généralement, sur google font, vous avez directement la balise à intégrer dans votre <head>

Voici le code fini :​
HTML:
<head>
  <meta charset="utf-8">
  <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700,300italic' rel='stylesheet' type='text/css'>
  <title>Tutoriel</title>
</head>

https://reality-gaming.fr/attachments/separateur-orange-png.65430/?temp_hash=ca59f08ce2d8ed87f93abf4cca9fa925

Et maintenant pour l'utiliser, allez dans votre fichier css et ajouter :
Code:
font-family: 'Open Sans Condensed' sans-serif;

Il faut l'ajouter à une class, tel que .titre, #titre, p, h3 etc... ;)
Code:
.shop {
  font-size: 24px;
  text-align: center;
  font-family: 'Open Sans Condensed' sans-serif;
  text-shadow: 0px 0px 3px black;
  margin-right: 50px;
}

Tuto terminé, en espérant qu'il vous ai été utile :D
On voit pas les images. D:
 
Haut