Install @next/font

ก่อนอื่นเราต้อง Install @next/font ใส่ในโปรเจคเราก่อนเน้อครับ

npm install @next/font

เมื่อเรา Install เรียบร้อยแล้วตอนใช้งานให้เราไปเลือก font ใน Google Font ได้เลยครับ สามารถดู Font ต่าง ๆ ได้ที่ลิงค์นี้เลย

เราไปดูแค่ชื่อ Font อย่างเดียวพอนะครับ ไม่ต้องโหลดมา

อย่างเช่น เจมส์ต้องการใช้ Font ชื่อ Rubik Marker Hatch

ขั้นตอนการเรียกใช้งาน

วิธีที่เจมส์ใช้คือ สร้าง folder ชื่อ config ขึ้นมาก่อน แล้วก็สร้างไฟล์ชื่อว่า fonts.js ขึ้นมาครับอยู่ folder config เลย

โดยเจมส์จะใส่โค้ดสำหรับจัดการ font ไว้ประมาณนี้ครับ

import { Rubik_Marker_Hatch } from '@next/font/google'

const rubikMarkerHatch = Rubik_Marker_Hatch({
  subsets: ['latin'],
  weight: '400',
  style: ['normal'],
})

export {
  rubikMarkerHatch
}

เวลาที่เราจะเอาไปใช้ก็โดยการ import เข้ามา แล้วก็เรียกใช้งาน เช่น ไฟล์ pages/index.js ต้องการใช้งาน เราจะเรียกใช้งานดังนี้ครับ

import React from 'react'

import { rubikMarkerHatch } from '../config/fonts'

function IndexPage() {
  return (
    <div className={rubikMarkerHatch.className}>
      kajame.xyz
    </div>
  )
}

export default IndexPage

หวังว่าคุณผู้อ่านน่าจะพอจะเข้าใจเน้อครับ ยังไงสามารถศึกษาเพิ่มเติมได้ที่เกี่ยวกับการใช้งานในส่วนของ Optimizing Fonts เพิ่มเติมตามลิงค์ที่แปะไว้ได้เลยครับ