Next.js వెబ్‌సైట్‌కి వెబ్ ఫాంట్‌లను ఎలా జోడించాలి

Next.js వెబ్‌సైట్‌కి వెబ్ ఫాంట్‌లను ఎలా జోడించాలి

మీ వెబ్‌సైట్‌కి అనుకూల ఫాంట్‌లను జోడించడానికి వెబ్ ఫాంట్‌లు గొప్ప మార్గం. ఈ ఫాంట్‌లు వినియోగదారు సిస్టమ్‌లో అందుబాటులో ఉండకపోవచ్చు, కాబట్టి మీరు వాటిని హోస్ట్ చేయడం ద్వారా లేదా CDN ద్వారా వాటిని సూచించడం ద్వారా వాటిని మీ ప్రాజెక్ట్‌లో చేర్చాలి.





ఈ రెండు పద్ధతులను ఉపయోగించి Next.js వెబ్‌సైట్‌లో వెబ్ ఫాంట్‌లను ఎలా చేర్చాలో తెలుసుకోండి.



రోజు యొక్క వీడియోను తయారు చేయండి

Next.jsలో స్వీయ-హోస్ట్ చేసిన ఫాంట్‌లను ఉపయోగించడం

Next.jsలో స్వీయ-హోస్ట్ చేసిన ఫాంట్‌లను జోడించడానికి, మీరు అవసరం @font-face CSS నియమాన్ని ఉపయోగించండి . ఈ నియమం వెబ్ పేజీకి అనుకూల ఫాంట్‌లను జోడించడానికి మిమ్మల్ని అనుమతిస్తుంది.





ఫాంట్-ఫేస్‌ని ఉపయోగించే ముందు, మీరు ఉపయోగించాలనుకుంటున్న ఫాంట్‌లను తప్పనిసరిగా డౌన్‌లోడ్ చేసుకోవాలి. అక్కడ చాలా ఉన్నాయి ఉచిత ఫాంట్‌లను అందించే ఇంటర్నెట్‌లోని సైట్‌లు , Google ఫాంట్‌లు, ఫాంట్‌స్పేస్ మరియు డాఫాంట్ వెబ్‌సైట్‌లతో సహా.

మీరు వెబ్ ఫాంట్‌లను డౌన్‌లోడ్ చేసిన తర్వాత, బహుళ బ్రౌజర్‌లకు మద్దతు ఇవ్వడానికి వాటిని విభిన్న ఫాంట్ ఫార్మాట్‌లకు మార్చండి. మీరు ఉపయోగించవచ్చు ఉచిత ఆన్‌లైన్ ఫాంట్ మార్పిడి సాధనాలు అలా చేయడానికి. ఆధునిక వెబ్ బ్రౌజర్‌లు .woff మరియు .woff2 ఫార్మాట్‌లకు మద్దతు ఇస్తాయి. మీరు లెగసీ బ్రౌజర్‌లకు మద్దతు ఇవ్వాల్సిన అవసరం ఉంటే, మీరు .eot మరియు .ttf ఫార్మాట్‌లను కూడా అందించాలి.



అనే కొత్త ఫోల్డర్‌ని సృష్టించండి ఫాంట్‌లు మీ సైట్ డైరెక్టరీలో మరియు మీ మార్చబడిన ఫాంట్ ఫైల్‌లను అక్కడ సేవ్ చేయండి.

కంప్యూటర్ విండోస్ 10 ని మేల్కొనదు

ఫాంట్ ముఖాలను చేర్చడం తదుపరి దశ 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; 
}

CDN ద్వారా Next.jsకి వెబ్ ఫాంట్‌లతో సహా

కొన్ని వెబ్‌సైట్‌లు మీరు మీ యాప్‌కి దిగుమతి చేసుకోగల CDN ద్వారా వెబ్ ఫాంట్‌లను అందిస్తాయి. మీరు ఫాంట్‌లను డౌన్‌లోడ్ చేయనవసరం లేదా ఫాంట్ ముఖాలను సృష్టించాల్సిన అవసరం లేనందున ఈ విధానాన్ని సెటప్ చేయడం సులభం. అదనంగా, మీరు Google ఫాంట్‌లు లేదా TypeKitని ఉపయోగిస్తే, Next.js స్వయంచాలకంగా ఆప్టిమైజేషన్‌ని నిర్వహిస్తుంది.



మీరు లింక్ ట్యాగ్ లేదా CSS ఫైల్ లోపల @import నియమాన్ని ఉపయోగించి CDN నుండి ఫాంట్‌లను జోడించవచ్చు.

ప్లేస్టేషన్ నెట్‌వర్క్ పాస్‌వర్డ్ రీసెట్ పని చేయడం లేదు

లింక్ ట్యాగ్ ఎల్లప్పుడూ HTML డాక్యుమెంట్ యొక్క హెడ్ ట్యాగ్ లోపలకి వెళ్తుంది. Next.jsలో హెడ్ ట్యాగ్‌ని జోడించడానికి, మీరు తప్పనిసరిగా అనుకూల పత్రాన్ని సృష్టించాలి. ఈ పత్రం ప్రతి పేజీని రెండర్ చేయడానికి ఉపయోగించే తల మరియు శరీర ట్యాగ్‌ని సవరిస్తుంది.

ఫైల్‌ను సృష్టించడం ద్వారా ఈ అనుకూల పత్ర లక్షణాన్ని ఉపయోగించడం ప్రారంభించండి /pages/_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;

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

@దిగుమతి నియమం కలిగి ఉన్న CSS ఫైల్‌లో ఫాంట్‌ను దిగుమతి చేసుకోవడానికి మిమ్మల్ని అనుమతిస్తుంది. లింక్ ట్యాగ్‌ని ఉపయోగించడం వల్ల ఫాంట్ మొత్తం సైట్‌లో అందుబాటులో ఉంటుంది.

మీరు ఫాంట్‌లను స్థానికంగా హోస్ట్ చేయాలా లేదా CDN ద్వారా వాటిని దిగుమతి చేయాలా?

స్థానికంగా హోస్ట్ చేయబడిన ఫాంట్‌లు సాధారణంగా CDN నుండి దిగుమతి చేయబడిన ఫాంట్‌ల కంటే వేగంగా ఉంటాయి. ఎందుకంటే వెబ్ పేజీ లోడ్ అయిన తర్వాత బ్రౌజర్ ఫాంట్ CDNకి అదనపు అభ్యర్థన చేయనవసరం లేదు.

మీరు దిగుమతి చేసుకున్న ఫాంట్‌లను ఉపయోగించాలనుకుంటే, సైట్ పనితీరును మెరుగుపరచడానికి వాటిని ప్రీలోడ్ చేయండి. Google ఫాంట్‌లు లేదా Typekitలో ఫాంట్‌లు అందుబాటులో ఉంటే, మీరు వాటిని దిగుమతి చేసుకోవచ్చు మరియు Next.js ఆప్టిమైజేషన్ ఫీచర్‌ల ప్రయోజనాన్ని పొందవచ్చు.