3.1 Polices Web
Connecter des polices sur des pages web joue un rôle clé dans la création d'un design unique et attrayant. Les polices Web permettent d'utiliser des polices qui ne sont pas installées sur l'ordinateur de l'utilisateur, en les chargeant depuis un serveur. Google Fonts est l'un des services les plus populaires pour utiliser des polices Web. Voyons plus en détail comment connecter les polices Web et Google Fonts sur les pages web.
Les polices Web sont des polices qui se chargent à partir d'un serveur distant et apparaissent sur une page web, même si elles ne sont pas installées sur l'appareil de l'utilisateur. Cela offre une plus grande flexibilité dans le choix des polices et permet de créer un design plus attrayant.
Connexion des polices Web
Exemple de connexion des polices Web avec @font-face :
D'abord, il est nécessaire de télécharger les fichiers de police sur votre serveur. Ce sont généralement des fichiers aux formats .woff, .woff2,
.ttf, .eot, et .svg.
Étape 2. Utilisation de @font-face en CSS :
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/MyCustomFont.woff2') format('woff2'),
url('fonts/MyCustomFont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'MyCustomFont', sans-serif;
}
Les avantages de l'utilisation de @font-face :
- Contrôle: contrôle total sur le choix et l'utilisation des polices
- Compatibilité: support de différents formats de polices pour garantir la compatibilité avec différents navigateurs
- WOFF (Web Open Font Format): format largement pris en charge pour les polices Web
- WOFF2: version améliorée de WOFF avec une meilleure compression
- TTF (TrueType Font): format standard pour les polices, pris en charge par la plupart des navigateurs
- EOT (Embedded OpenType): format pris en charge par Internet Explorer
- SVG: format pour l'utilisation des polices dans les graphiques SVG
3.2 Google Fonts
Google Fonts offre une collection de polices gratuites qui peuvent être intégrées facilement à votre site web. L'avantage d'utiliser Google Fonts est la simplicité de connexion et la variété des polices disponibles.
Connexion des polices avec Google Fonts :
1. Choisir une police sur le site Google Fonts :
Allez sur Google Fonts et choisissez la police que vous souhaitez utiliser.
2. Obtenir le lien pour la connexion :
Sur la page de la police choisie, sélectionnez les variantes et styles nécessaires. Ensuite, Google Fonts généra un lien pour connecter la police.
3. Insérer le lien dans le document HTML :
Copiez le lien généré et collez-le dans la section <head> de votre document HTML.
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
1. Application de la police en CSS :
Utilisez la propriété font-family pour appliquer la police aux éléments sur la page.
body {
font-family: 'Roboto', sans-serif;
}
h1 {
font-family: 'Roboto', sans-serif;
font-weight: 700;
}
Exemple d'utilisation de Google Fonts via HTML :
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Fonts</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
}
</style>
</head>
<body>
<p>Ce texte s'affiche en utilisant la police Roboto.</p>
</body>
</html>
3.3 Utilisation de CSS @import
Les polices Google peuvent aussi être connectées avec la règle @import en CSS.
Exemple d'utilisation de Google Fonts via @import :
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
body {
font-family: 'Roboto', sans-serif;
}
Les avantages de l'utilisation de Google Fonts :
- Simplicité d'utilisation: intégrer facilement des polices avec une seule ligne de code
- Large choix: accès à un grand nombre de polices de différents styles et catégories
- Optimisation des performances: les polices se chargent depuis les serveurs haute performance de Google
L'attribut display="swap" dans le code pour connecter les polices Web de Google Fonts améliore les performances et l'expérience utilisateur. Lorsque vous connectez des polices Web, le navigateur doit d'abord charger et afficher la police avant de pouvoir afficher le texte. Cela peut causer un délai, surtout avec une connexion Internet lente. display="swap" résout ce problème en indiquant au navigateur d'utiliser la police système par défaut pendant le chargement de la police Web. Une fois la police Web chargée, le navigateur la remplace par celle-ci.
Impact sur les performances :
Lors de l'utilisation de polices Web, il est important de considérer leur impact sur la performance de la page Web. Charger un grand nombre de polices ou de variantes peut augmenter le temps de chargement de la page. Pour minimiser cet impact, suivez les recommandations suivantes :
- Utilisez le minimal de variantes nécessaires: choisissez seulement les variantes dont vous avez vraiment besoin
- Utilisez l'attribut
display="swap": cela garantit l'affichage du texte avec la police système pendant le chargement de la police Web, ce qui améliore la perception des performances par l'utilisateur - Optimisation de la livraison des polices: utilisez le cache et le préchargement (preload) pour améliorer les performances
GO TO FULL VERSION