title | description | i18nReady |
---|---|---|
Utiliser des polices personnalisées |
Vous souhaitez ajouter des polices d'écritures personnalisées à un site Astro ? Utilisez Google Fonts avec Fontsource ou ajoutez une police de votre choix. |
true |
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; import { Steps } from '@astrojs/starlight/components'
Ce guide vous montrera comment ajouter des polices web à votre projet et les utiliser dans vos composants.
Cet exemple démontre l'ajout d'une police personnalisée en utilisant le fichier de police DistantGalaxy.woff
.
```css
/* Enregistrer notre famille de polices personnalisée et indiquer au navigateur où la trouver. */
@font-face {
font-family: 'DistantGalaxy';
src: url('/fonts/DistantGalaxy.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
```
-
Utilisez la valeur
font-family
de l'instruction@font-face
pour styliser les éléments de votre composant ou de votre mise en forme (layout). Dans cet exemple, le titre<h1>
aura la police personnalisée appliquée, alors que le paragraphe<p>
ne l'aura pas.--- --- <h1>Dans une galaxie très, très lointaine...</h1> <p>Les polices personnalisées rendent mes en-têtes beaucoup plus cool !</p> <style> h1 { font-family: 'DistantGalaxy', sans-serif; } </style>
Le projet Fontsource simplifie l'utilisation de Google Fonts et d'autres polices open source. Il fournit les modules npm que vous pouvez installer pour les polices que vous souhaitez utiliser.
1. Trouvez la police que vous souhaitez dans le [catalogue Fontsource](https://fontsource.org/fonts). Pour cet exemple, on utilisera la police [Twinkle Star](https://fontsource.org/fonts/twinkle-star). 2. Installez le paquet pour la police que vous avez choisie.<PackageManagerTabs>
<Fragment slot="npm">
```shell
npm install @fontsource/twinkle-star
```
</Fragment>
<Fragment slot="pnpm">
```shell
pnpm add @fontsource/twinkle-star
```
</Fragment>
<Fragment slot="yarn">
```shell
yarn add @fontsource/twinkle-star
```
</Fragment>
</PackageManagerTabs>
:::tip
Vous trouverez le nom du paquet correct dans la section « Quick Installation » (installation rapide) de chaque page de police sur le site de Fontsource. Il commence par `@fontsource/` ou `@fontsource-variable/` suivi du nom de la police.
:::
-
Importez le paquet de polices dans le composant où vous souhaitez utiliser la police. Généralement, vous voudrez le faire dans un composant de mise en forme commun pour vous assurer que la police est disponible sur l'ensemble de votre site.
L'importation ajoutera automatiquement les règles
@font-face
nécessaires pour configurer la police.--- import '@fontsource/twinkle-star'; ---
-
Utilisez le nom de la police comme indiqué dans l'exemple
body
sur sa page Fontsource comme valeurfont-family
. Cela fonctionnera partout où vous pouvez écrire du CSS dans votre projet Astro.h1 { font-family: "Twinkle Star", cursive; }
Si vous utilisez l'intégration Tailwind, vous pouvez utiliser l'une ou l'autre des méthodes précédentes de cette page pour installer votre police, avec quelques modifications. Vous pouvez soit ajouter une déclaration @font-face
pour une police locale ou utiliser la stratégie Fontsource's import
pour installer votre police.
Pour enregistrer votre police dans Tailwind :
1. Suivez l'un ou l'autre des guides ci-dessus, mais sautez l'étape finale qui consiste à ajouter `font-family` à votre CSS. 2. Ajoutez le nom de la police à `tailwind.config.cjs`.Cet exemple ajoute `Inter` à la pile de polices sans-serif, avec les polices de repli par défaut de Tailwind CSS.
```js title="tailwind.config.cjs" ins={1,7-9}
const defaultTheme = require("tailwindcss/defaultTheme");
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
theme: {
extend: {
fontFamily: {
sans: ['Inter', ...defaultTheme.fontFamily.sans],
},
},
},
plugins: [],
}
```
Maintenant, tout le texte sans-serif (le texte par défaut de Tailwind) dans votre projet utilisera la police choisie et la classe `font-sans` appliquera également la police Inter.
Voir la documentation de Tailwind sur l'ajout de polices personnalisées pour plus d'information.
- Apprendre comment fonctionnent les polices web dans le Guide des polices web de MDN.
- Générez du CSS pour votre police avec Font Squirrel's Webfont Generator.