# Installer une nouvelle police sur son site-web sur La Forge <aside style="font-size:0.75em">et s'affranchir de Google Font</aside>
## Téléchargement et hébergement
**Exemple avec la police *Roboto Mono***
1. Téléchargez votre fichier de police au format `.woff2` ou `.ttf`.
2. Hébergez-le dans votre dépôt de projet sur La Forge.
3. Exemple d'URL relative dans le dépôt : `/fonts/RobotoMono-Regular.woff2`.
## Chargement de la police dans votre page HTML
### Étape 1 : Dans votre fichier styles.css
Vous allez d'abord déclarer la police dans votre fichier CSS externe (ex. `styles.css`).
~~~css
/* Déclaration de la police Roboto Mono avec différents formats */
@font-face {
font-family: 'Roboto Mono';
src: url('/fonts/RobotoMono-Regular.woff2') format('woff2'),
url('/fonts/RobotoMono-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Roboto Mono';
src: url('/fonts/RobotoMono-Italic.woff2') format('woff2'),
url('/fonts/RobotoMono-Italic.ttf') format('truetype');
font-weight: 400;
font-style: italic;
}
/* Déclaration des variables CSS pour faciliter l'usage */
:root {
--md-text-font: 'Roboto Mono', sans-serif;
--md-code-font: 'Roboto Mono', monospace;
}
/* Application des polices dans les éléments HTML */
body {
font-family: var(--md-text-font);
}
~~~
### Étape 2 : Dans votre fichier HTML (ex. `mapage.html`)
Dans votre fichier HTML, vous allez inclure le fichier `styles.css` dans la balise `<head>`, afin d'appliquer les styles et les polices à votre page.
~~~html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemple d'utilisation de la police</title>
<!-- Lien vers la feuille de styles -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Bienvenue sur mon site</h1>
<p>Voici un exemple de texte avec la police <strong>Roboto Mono</strong>.</p>
<pre><code>Exemple de code affiché avec la police monospace.</code></pre>
</body>
</html>
~~~
## Bonnes pratiques :
1. **Hébergement local** : En hébergeant vos polices localement (`/fonts/`), vous ne dépendez pas de serveurs externes, ce qui améliore la vitesse de chargement et la confidentialité.
2. **Multiples formats** : Fournir les polices en plusieurs formats (`woff2` et `ttf`) garantit la compatibilité avec un maximum de navigateurs.
3. **Variables CSS** : Utiliser des variables CSS (dans `:root`) permet de facilement changer la police sur tout le site en ne modifiant qu'un seul endroit.