Jak dodać czcionki internetowe do witryny Next.js?

Jak dodać czcionki internetowe do witryny Next.js?

Czcionki internetowe to świetny sposób na dodawanie niestandardowych czcionek do Twojej witryny. Czcionki te mogą nie być dostępne w systemie użytkownika, więc musisz uwzględnić je w swoim projekcie, hostując je lub odwołując się do nich za pośrednictwem sieci CDN.





Dowiedz się, jak dołączyć czcionki internetowe do witryny Next.js, korzystając z tych dwóch metod.



MAKEUSEOF WIDEO DNIA

Korzystanie z samodzielnie hostowanych czcionek w Next.js

Aby dodać czcionki hostowane samodzielnie w Next.js, musisz użyj reguły CSS @font-face . Ta reguła umożliwia dodawanie niestandardowych czcionek do strony internetowej.





Przed użyciem font-face, musisz pobrać fonty, których chcesz użyć. Jest wiele witryny w Internecie, które oferują bezpłatne czcionki , w tym czcionki Google, fontspace i witryny dafont.

Po pobraniu czcionek internetowych przekonwertuj je na różne formaty czcionek, aby obsługiwać wiele przeglądarek. Możesz użyć darmowe narzędzia do konwersji czcionek online aby to zrobić. Nowoczesne przeglądarki internetowe obsługują formaty .woff i .woff2. Jeśli potrzebujesz obsługi starszych przeglądarek, powinieneś również dostarczyć formaty .eot i .ttf.



Utwórz nowy folder o nazwie czcionki w katalogu witryny i zapisz tam przekonwertowane pliki czcionek.

prędkość internetu rośnie i maleje

Następnym krokiem jest uwzględnienie krojów czcionek w style/global.css plik, aby udostępnić je całej witrynie. Ten przykład pokazuje pogrubione kroje czcionki syreny:



@font-face { 
    font-family: 'Mermaid'; 
    src: url('Mermaid-Bold.eot'); 
    src: url('Mermaid-Bold.eot?#iefix') format('embedded-opentype'), 
        url('Mermaid-Bold.woff2') format('woff2'), 
        url('Mermaid-Bold.woff') format('woff'), 
        url('Mermaid-Bold.ttf') format('truetype'); 
    font-weight: bold; 
    font-style: normal; 
    font-display: swap; 
}

Po dołączeniu plików czcionek możesz użyć tych czcionek w pliku CSS na poziomie komponentu:

h1 { 
    font-family: Mermaid; 
}

Dołączanie czcionek internetowych do Next.js za pośrednictwem CDN

Niektóre witryny udostępniają czcionki internetowe za pośrednictwem sieci CDN, które można zaimportować do swojej aplikacji. Takie podejście jest łatwe do skonfigurowania, ponieważ nie trzeba pobierać czcionek ani tworzyć krojów czcionek. Dodatkowo, jeśli używasz czcionek Google lub TypeKit, Next.js automatycznie obsługuje optymalizację.



najlepsze bezpłatne witryny do pobrania pełnej wersji oprogramowania

Możesz dodać czcionki z sieci CDN, używając tagu link lub reguły @import w pliku CSS.

Znacznik linku zawsze znajduje się wewnątrz znacznika head dokumentu HTML. Aby dodać tag head w Next.js, musisz utworzyć własny dokument. Ten dokument modyfikuje tagi head i body używane do renderowania każdej strony.

Zacznij korzystać z tej niestandardowej funkcji dokumentu, tworząc plik /strony/_dokument.js.

Następnie dołącz link do czcionki w nagłówku pliku _document.js.

import Document, { Html, Head, Main, NextScript } from "next/document"; 
class MyDocument extends Document { 
  static async getInitialProps(ctx) { 
    const initialProps = await Document.getInitialProps(ctx); 
    return { ...initialProps }; 
  } 
  render() { 
    return ( 
      <Html> 
        <Head> 
          <link 
            href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&display=swap" 
            rel="stylesheet" 
          /> 
        </Head> 
        <body> 
          <Main /> 
          <NextScript /> 
        </body> 
      </Html> 
    ); 
  } 
} 
export default MyDocument;

Jak korzystać z reguły @import, aby uwzględnić czcionki w projekcie Next.js

Inną opcją jest użycie reguły @import w pliku CSS, w którym chcesz użyć czcionki.

Na przykład udostępnij czcionkę w całym projekcie, importując czcionkę internetową w style/global.css plik.

@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&display=swap');

Możesz teraz odwoływać się do rodziny czcionek w a Selektor CSS lubię to:

czy Gmail ma aplikację komputerową? 
h1 { 
    font-family:'Libre Caslon Display', serif; 
}

Reguła @import pozwala zaimportować czcionkę z zawartego pliku CSS. Użycie tagu link sprawia, że ​​czcionka jest dostępna w całej witrynie.

Czy powinieneś hostować czcionki lokalnie, czy importować je przez CDN?

Czcionki hostowane lokalnie są zwykle szybsze niż czcionki importowane z sieci CDN. Dzieje się tak, ponieważ przeglądarka nie musi wysyłać dodatkowego żądania do CDN czcionek po załadowaniu strony internetowej.

Jeśli chcesz użyć zaimportowanych czcionek, załaduj je wstępnie, aby poprawić wydajność witryny. Jeśli czcionki są dostępne w czcionkach Google lub Typekit, możesz je zaimportować i skorzystać z funkcji optymalizacji Next.js.