Używanie niestandardowych czcionek

Ten przewodnik pokaże Ci, jak dodać czcionki internetowe do swojego projektu i używać ich w swoich komponentach.

Używanie lokalnego pliku czcionki

Dział zatytułowany Używanie lokalnego pliku czcionki

Ten przykład zademonstruje dodanie niestandardowej czcionki za pomocą pliku czcionki DistantGalaxy.woff.

1. Dodaj swój plik czcionki do public/fonts/.

2. Dodaj następującą deklarację @font-face do swojego CSS. Może to być w globalnym pliku .css, który importujesz, w bloku <style is:global>, lub w bloku <style> w konkretnym układzie graficznym lub komponencie, w którym chcesz użyć tej czcionki.

   /* Zarejestruj swoją niestandardową czcionkę i powiedz przeglądarce, gdzie ją znaleźć. */
   @font-face {
     font-family: 'DistantGalaxy';
     src: url('/fonts/DistantGalaxy.woff') format('woff');
     font-weight: normal;
     font-style: normal;
     font-display: swap;
   }

3. Użyj wartości font-family z deklaracji @font-face, aby stylizować elementy w swoim komponencie lub układzie graficznym. W tym przykładzie nagłówek <h1> będzie miał zastosowaną niestandardową czcionkę, podczas gdy akapit <p> nie.

   src/pages/example.astro

   ---
   ---
   
   <h1>W odległej, dalekiej galaktyce...</h1>
   
   <p>Niestandardowe czcionki sprawiają, że moje nagłówki są o wiele fajniejsze!</p>
   
   <style>
   h1 {
     font-family: 'DistantGalaxy', sans-serif;
   }
   </style>

Używanie Fontsource

Dział zatytułowany Używanie Fontsource

Projekt Fontsource upraszcza używanie Google Fonts i innych czcionek open-source. Dostarcza on moduły npm, które możesz zainstalować dla czcionek, których chcesz używać.

1. Znajdź czcionkę, której chcesz użyć, w katalogu Fontsource. Ten przykład użyje Twinkle Star.

2. Zainstaluj pakiet dla wybranej czcionki.

   npm

   npm install @fontsource/twinkle-star

   pnpm

   pnpm add @fontsource/twinkle-star

   Yarn

   yarn add @fontsource/twinkle-star

   Wskazówka

   Poprawną nazwę paczki znajdziesz w sekcji „Quick Installation” na stronie każdej czcionki w witrynie Fontsource. Zaczyna się ona od @fontsource/ lub @fontsource-variable/ i danej nazwy czcionki.

3. Zaimportuj paczkę czcionki w komponencie, w którym chcesz użyć czcionki. Zazwyczaj chcesz to zrobić w wspólnym komponencie layoutu, aby upewnić się, że czcionka jest dostępna w całej witrynie.

   Import automatycznie doda niezbędne reguły @font-face potrzebne do ustawienia czcionki.

   src/layouts/BaseLayout.astro

   ---
   import '@fontsource/twinkle-star';
   ---

4. Użyj nazwy czcionki, jak pokazano w przykładzie body na stronie Fontsource, jako wartości font-family. To zadziała wszędzie tam, gdzie możesz pisać CSS w swoim projekcie Astro.

   h1 {
     font-family: "Twinkle Star", cursive;
   }

Aby zoptymalizować czasy renderowania Twojej witryny, możesz chcieć preładować czcionki, które są niezbędne do początkowego wyświetlenia strony. Zobacz przewodnik Fontsource dotyczący preładowania czcionek po więcej informacji na temat jego zastosowania.

Rejestrowanie czcionek w Tailwind

Dział zatytułowany Rejestrowanie czcionek w Tailwind

Jeśli używasz integracji Tailwind, możesz użyć dowolnej z poprzednich metod na tej stronie, aby zainstalować swoją czcionkę, z pewnymi modyfikacjami. Możesz albo dodać deklarację @font-face dla lokalnej czcionki albo użyć strategii import Fontsource, aby zainstalować swoją czcionkę.

Aby zarejestrować swoją czcionkę w Tailwind:

1. Postępuj zgodnie z jednym z powyższych przewodników, ale pomiń ostatni krok dodawania font-family do swojego CSS.

2. Dodaj nazwę kroju pisma do tailwind.config.mjs.

   Ten przykład dodaje Inter do stosu czcionek sans-serif, z domyślnymi czcionkami zapasowymi z Tailwind CSS.

   tailwind.config.mjs

   import defaultTheme from 'tailwindcss/defaultTheme'
   
   /** @type {import('tailwindcss').Config} */
   export default {
       content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
       theme: {
           extend: {
               fontFamily: {
                   sans: ['Inter', ...defaultTheme.fontFamily.sans],
               },
           },
       },
       plugins: [],
   }

   Teraz cały tekst sans-serif (domyślny w Tailwind) w Twoim projekcie będzie używał wybranej przez Ciebie czcionki, a klasa font-sans również zastosuje czcionkę Inter.

Zobacz dokumentację Tailwind dotyczącą dodawania niestandardowych czcionek po więcej informacji.

Więcej zasobów

Dział zatytułowany Więcej zasobów

• Dowiedz się, jak działają czcionki internetowe w przewodniku MDN po czcionkach internetowych..
• Wygeneruj CSS dla swojej czcionki za pomocą Generatora Webfont Font Squirrel.