কিভাবে একটি Next.js ওয়েবসাইটে ওয়েব ফন্ট যোগ করবেন

কিভাবে একটি Next.js ওয়েবসাইটে ওয়েব ফন্ট যোগ করবেন

ওয়েব ফন্টগুলি আপনার ওয়েবসাইটে কাস্টম ফন্ট যুক্ত করার একটি দুর্দান্ত উপায়। এই ফন্টগুলি ব্যবহারকারীর সিস্টেমে উপলব্ধ নাও হতে পারে, তাই আপনাকে সেগুলি হোস্ট করে বা CDN এর মাধ্যমে রেফারেন্স করে আপনার প্রকল্পে অন্তর্ভুক্ত করতে হবে৷





আমি বিনা মূল্যে সঙ্গীত কোথায় ডাউনলোড করতে পারি?

এই দুটি পদ্ধতি ব্যবহার করে একটি Next.js ওয়েবসাইটে কীভাবে ওয়েব ফন্ট অন্তর্ভুক্ত করবেন তা শিখুন।



দিনের মেকইউজের ভিডিও

Next.js-এ স্ব-হোস্টেড ফন্ট ব্যবহার করা

Next.js-এ স্ব-হোস্টেড ফন্ট যোগ করতে, আপনাকে করতে হবে @ফন্ট-ফেস সিএসএস নিয়ম ব্যবহার করুন . এই নিয়মটি আপনাকে একটি ওয়েব পেজে কাস্টম ফন্ট যোগ করতে দেয়।





ফন্ট-ফেস ব্যবহার করার আগে, আপনি যে ফন্টগুলি ব্যবহার করতে চান তা ডাউনলোড করতে হবে। এখানে অনেক ইন্টারনেটে যে সাইটগুলো বিনামূল্যে ফন্ট অফার করে , Google ফন্ট, ফন্টস্পেস এবং ড্যাফন্ট ওয়েবসাইট সহ।

একবার আপনি ওয়েব ফন্টগুলি ডাউনলোড করলে, একাধিক ব্রাউজার সমর্থন করার জন্য সেগুলিকে বিভিন্ন ফন্ট ফর্ম্যাটে রূপান্তর করুন৷ তুমি ব্যবহার করতে পার বিনামূল্যে অনলাইন ফন্ট রূপান্তর সরঞ্জাম তাই না. আধুনিক ওয়েব ব্রাউজার .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; 
}

একটি 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 ফাইলে @import নিয়মটি ব্যবহার করা।

উদাহরণস্বরূপ, তে ওয়েব ফন্ট আমদানি করে পুরো প্রকল্প জুড়ে ফন্টটি উপলব্ধ করুন৷ styles/global.css ফাইল

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

আপনি এখন একটি ফন্ট পরিবার উল্লেখ করতে পারেন CSS নির্বাচক এটার মত:

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

@import নিয়ম আপনাকে একটি অন্তর্ভুক্ত CSS ফাইলে একটি ফন্ট আমদানি করতে দেয়। লিঙ্ক ট্যাগ ব্যবহার করে পুরো সাইট জুড়ে ফন্ট অ্যাক্সেসযোগ্য করে তোলে।

আপনার কি স্থানীয়ভাবে ফন্ট হোস্ট করা উচিত বা CDN এর মাধ্যমে আমদানি করা উচিত?

স্থানীয়ভাবে হোস্ট করা ফন্টগুলি সাধারণত CDN থেকে আমদানি করা ফন্টের চেয়ে দ্রুত হয়। এর কারণ হল ওয়েব পেজ লোড হয়ে গেলে ব্রাউজারকে ফন্ট সিডিএন-এ অতিরিক্ত অনুরোধ করতে হবে না।

আপনি যদি আমদানি করা ফন্টগুলি ব্যবহার করতে চান তবে সাইটের কার্যকারিতা উন্নত করতে সেগুলি প্রিলোড করুন৷ যদি ফন্টগুলি Google ফন্ট বা Typekit-এ উপলব্ধ থাকে, আপনি সেগুলি আমদানি করতে পারেন এবং Next.js-এর অপ্টিমাইজেশন বৈশিষ্ট্যগুলির সুবিধা নিতে পারেন৷