Les polices par défaut, comme Times New Roman, peuvent rendre un site web peu attrayant et générique.
Un site visuellement peu engageant peut détourner les utilisateurs et affaiblir l’identité de votre marque.
Découvrez comment personnaliser les polices avec CSS et Google Fonts pour créer un site plus attrayant et professionnel.
Lancez votre carrière de développeur web avec une formation pratique.
Introduction aux Polices CSS
Les polices ont un rôle important dans l’apparence de votre site web, par défaut la police de votre texte est Times New Roman , vous pouvez personnaliser les polices inclut le choix des styles , tailles espacement ,etc.
Les polices permettent de rendre le texte plus agréable à lire, ajoutent une identité visuelle a votre contenu et attire l’attention de l’utilisateur.
Propriétés CSS : Font-Family et Plus
Vous pouvez changer la police en utilisant la propriété font-family, et spécifiez plusieurs valeurs en cascade, c’est à dire si la première valeur n’est pas disponible sur votre appareil, les autres seront utilisés.
h1{
font-family: Arial, Helvetica, sans-serif;
}
Vous pouvez modifier la taille de la police avec la propriété font-size , qui controle la taille du texte . Elle prend en valeurs des unités absolues (px) , ou unités relatives ( % , em , etc ) .
h1{
font-family: Arial, Helvetica, sans-serif;
font-size: 55px;
}
Vous pouvez également modifier le style d’une police, et le mettre soit en oblique , en italique , ou normal ( valeur par défaut ) , en utilisant la propriété font-style .
h1{
font-family: Arial, Helvetica, sans-serif;
font-size: 55px;
font-style: italic;
}
Pour un site plus lisible et attirant, il est conseillé d’utiliser les polices personnalisées à partir de services comme Google Fonts.
- Accéder à ce lien :https://fonts.google.com/
-
Choisissez une police, cliquer sur get embed code.
Figure 4 : choisir un font
- Copiez le lien <link> fourni et Intégrez ce lien dans votre fichier HTML dans la partie <head>, ou cliquez sur @import et intégrer le lien dans le début de votre code CSS. Puis utilisez la police dans votre CSS comme elle est indiqué dans l’image ci-dessous .
- Utiliser des polices personnalisées avec Google Fonts :
Exemple :
HTML :
<head>
<title>index</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.jet-image-accordion__item-loader span{--wpr-bg-b5f84ee5-f0b7-432a-b1bd-0f52e4b9e5ba: url('https://blog.alphorm.com/wp-content/plugins/jet-tabs/assets/images/spinner-32.svg');}.rll-youtube-player .play{--wpr-bg-b2b936dc-786c-4e02-9ea7-98081dbed56f: url('https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".jet-image-accordion__item-loader span","style":".jet-image-accordion__item-loader span{--wpr-bg-b5f84ee5-f0b7-432a-b1bd-0f52e4b9e5ba: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/jet-tabs\/assets\/images\/spinner-32.svg');}","hash":"b5f84ee5-f0b7-432a-b1bd-0f52e4b9e5ba","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/jet-tabs\/assets\/images\/spinner-32.svg"},{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-b2b936dc-786c-4e02-9ea7-98081dbed56f: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"b2b936dc-786c-4e02-9ea7-98081dbed56f","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<h1>Titre de la page</h1>
<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>
CSS :
h1{
font-family: "Bokor", system-ui;
font-size: 55px;
font-style: italic;
}
Résultat :
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.
FAQ
Comment changer la police par défaut sur un site web?
Quels sont les avantages d'utiliser Google Fonts?
Comment intégrer Google Fonts dans un fichier CSS?
Comment ajuster la taille des polices en CSS?
Comment appliquer un style de police italique en CSS?
Conclusion
En utilisant les polices CSS et Google Fonts, vous pouvez améliorer considérablement l’apparence de votre site web. Quelles autres techniques envisagez-vous pour dynamiser votre design?
