Как да добавите уеб шрифтове към уебсайт Next.js

Уеб шрифтовете са чудесен начин да добавите персонализирани шрифтове към уебсайта си. Тези шрифтове може да не са налични в системата на потребителя, така че трябва да ги включите във вашия проект, като ги хоствате или препращате към тях чрез CDN.

как да печелите пари с кодиране

Научете как да включите уеб шрифтове в уебсайт Next.js, като използвате тези два метода.

MAKEUSEOF ВИДЕО НА ДЕНЯ

Използване на самостоятелно хоствани шрифтове в Next.js

За да добавите самостоятелно хоствани шрифтове в Next.js, трябва използвайте CSS правилото @font-face . Това правило ви позволява да добавяте персонализирани шрифтове към уеб страница.

Преди да използвате font-face, трябва да изтеглите шрифтовете, които искате да използвате. Има много сайтове в интернет, които предлагат безплатни шрифтове , включително уебсайтовете на Google fonts, fontspace и dafont.

След като изтеглите уеб шрифтовете, конвертирайте ги в различни формати на шрифтове, за да поддържате множество браузъри. Можеш да използваш безплатни онлайн инструменти за конвертиране на шрифтове да го направя. Съвременните уеб браузъри поддържат формати .woff и .woff2. Ако трябва да поддържате наследени браузъри, трябва също да предоставите формати .eot и .ttf.

Създайте нова папка, наречена шрифтове в директорията на вашия сайт и запазете преобразуваните файлове с шрифтове там.

Следващата стъпка е да включите лицата на шрифта в styles/global.css файл, за да ги направите достъпни за целия уебсайт. Този пример показва лицата на шрифта за русалка с удебелен шрифт:

@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; 
}

След като включите файловете с шрифтове, можете да използвате тези шрифтове в CSS файл на ниво компонент:

h1 { 
    font-family: Mermaid; 
}

Включване на уеб шрифтове към Next.js чрез CDN

Някои уебсайтове обслужват уеб шрифтове чрез CDN, които можете да импортирате в приложението си. Този подход е лесен за настройка, защото не е необходимо да изтегляте шрифтове или да създавате лица на шрифтове. Освен това, ако използвате шрифтове на Google или TypeKit, Next.js автоматично обработва оптимизацията.

Можете да добавяте шрифтове от CDN, като използвате етикета за връзка или правилото @import вътре в CSS файл.

Как да импортирате шрифтове в проект Next.js с помощта на етикет за връзка

Тагът за връзка винаги влиза в тага за глава на HTML документ. За да добавите head таг в Next.js, трябва да създадете персонализиран документ. Този документ променя етикета head и body, използван за изобразяване на всяка страница.

Започнете да използвате тази функция за персонализиран документ, като създадете файла /страници/_document.js.

След това включете връзката към шрифта в главата на файла _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;

Как да използвате правилото @import за включване на шрифтове в проект Next.js

Друг вариант е да използвате правилото @import в CSS файла, в който искате да използвате шрифта.

Например, направете шрифта достъпен в целия проект, като импортирате уеб шрифта в styles/global.css файл.

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

Вече можете да посочите фамилията шрифтове в a CSS селектор като този:

h1 { 
    font-family:'Libre Caslon Display', serif; 
}

Правилото @import ви позволява да импортирате шрифт в съдържащ се CSS файл. Използването на етикета за връзка прави шрифта достъпен в целия сайт.

Трябва ли да хоствате шрифтове локално или да ги импортирате чрез CDN?

Шрифтовете, хоствани локално, обикновено са по-бързи от шрифтовете, импортирани от CDN. Това е така, защото браузърът не трябва да прави допълнителна заявка към CDN на шрифта, след като уеб страницата се зареди.

Ако искате да използвате импортирани шрифтове, заредете ги предварително, за да подобрите ефективността на сайта. Ако шрифтовете са налични в Google fonts или Typekit, можете да ги импортирате и да се възползвате от функциите за оптимизация на Next.js.