Com afegir fonts web a un lloc web Next.js

Com afegir fonts web a un lloc web Next.js

Els tipus de lletra web són una manera fantàstica d'afegir tipus de lletra personalitzats al vostre lloc web. És possible que aquests tipus de lletra no estiguin disponibles al sistema d'un usuari, de manera que haureu d'incloure-los al vostre projecte allotjant-los o fent-los referència mitjançant un CDN.





Obteniu informació sobre com incloure fonts web en un lloc web Next.js mitjançant aquests dos mètodes.



MAKEUSEO VÍDEO DEL DIA

Ús de fonts autoallotjades a Next.js

Per afegir fonts autoallotjades a Next.js, cal que ho facis utilitzeu la regla CSS @font-face . Aquesta regla us permet afegir tipus de lletra personalitzats a una pàgina web.





com fer jailbreak a iOS 11 amb l'ordinador

Abans d'utilitzar font-face, heu de descarregar els tipus de lletra que voleu utilitzar. Hi ha molts llocs a Internet que ofereixen tipus de lletra gratuïts , inclosos els tipus de lletra de Google, fontspace i llocs web de dafont.

Un cop descarregueu els tipus de lletra web, convertiu-los a diferents formats de lletra per admetre diversos navegadors. Pots fer servir eines gratuïtes de conversió de fonts en línia per fer-ho. Els navegadors web moderns admeten els formats .woff i .woff2. Si necessiteu admetre navegadors heretats, també hauríeu de proporcionar els formats .eot i .ttf.



Creeu una nova carpeta anomenada tipus de lletra al directori del vostre lloc i deseu-hi els fitxers de tipus de lletra convertits.

El següent pas és incloure les cares de lletra al fitxer styles/global.css fitxer per posar-los a disposició de tot el lloc web. Aquest exemple mostra les cares del tipus de lletra de la sirena en negreta:



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

Un cop hàgiu inclòs els fitxers de tipus de lletra, podeu utilitzar aquests tipus de lletra en un fitxer CSS a nivell de component:

h1 { 
    font-family: Mermaid; 
}

Inclou fonts web a Next.js mitjançant un CDN

Alguns llocs web ofereixen tipus de lletra web mitjançant un CDN que podeu importar a la vostra aplicació. Aquest enfocament és fàcil de configurar perquè no cal que baixeu fonts ni creeu cares de lletra. A més, si utilitzeu fonts de Google o TypeKit, Next.js gestiona automàticament l'optimització.



Podeu afegir tipus de lletra des d'un CDN mitjançant l'etiqueta d'enllaç o la regla @import dins d'un fitxer CSS.

L'etiqueta d'enllaç sempre va dins de l'etiqueta head d'un document HTML. Per afegir una etiqueta de capçalera a Next.js, heu de crear un document personalitzat. Aquest document modifica l'etiqueta de capçalera i cos utilitzada per representar cada pàgina.

aplicació per canviar cares de dues fotos

Comenceu a utilitzar aquesta funció de document personalitzada creant el fitxer /pages/_document.js.

A continuació, incloeu l'enllaç al tipus de lletra a la capçalera del fitxer _document.js.

necessiteu Xbox Live per a Fortnite 
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;

Com utilitzar la regla @import per incloure fonts en un projecte Next.js

Una altra opció és utilitzar la regla @import al fitxer CSS que voleu utilitzar el tipus de lletra.

Per exemple, feu que el tipus de lletra estigui disponible a tot el projecte important el tipus de lletra web al fitxer styles/global.css dossier.

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

Ara podeu fer referència a la família de tipus de lletra a Selector CSS com això:

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

La regla @import us permet importar un tipus de lletra en un fitxer CSS contingut. L'ús de l'etiqueta d'enllaç fa que el tipus de lletra sigui accessible a tot el lloc.

Hauríeu d'allotjar tipus de lletra localment o importar-los mitjançant un CDN?

Els tipus de lletra allotjats localment solen ser més ràpids que els tipus de lletra importats des d'un CDN. Això es deu al fet que el navegador no ha de fer una sol·licitud addicional a la font CDN un cop carregada la pàgina web.

Si voleu utilitzar tipus de lletra importats, precarregueu-los per millorar el rendiment del lloc. Si els tipus de lletra estan disponibles a Google fonts o Typekit, podeu importar-los i aprofitar les funcions d'optimització de Next.js.