Next.js Web Sitesine Web Fontları Nasıl Eklenir

Next.js Web Sitesine Web Fontları Nasıl Eklenir

Web yazı tipleri, web sitenize özel yazı tipleri eklemenin harika bir yoludur. Bu yazı tipleri bir kullanıcının sisteminde bulunmayabilir, bu nedenle onları barındırarak veya bir CDN aracılığıyla referans vererek projenize dahil etmeniz gerekir.





Bu iki yöntemi kullanarak bir Next.js web sitesine web yazı tiplerini nasıl ekleyeceğinizi öğrenin.



GÜNÜN YAPILAN VİDEOSU

Next.js'de Kendi Kendine Barındırılan Yazı Tiplerini Kullanma

Next.js'de kendi kendine barındırılan yazı tiplerini eklemek için şunları yapmanız gerekir: @font-face CSS kuralını kullanın . Bu kural, bir web sayfasına özel yazı tipleri eklemenizi sağlar.





Font-face'i kullanmadan önce kullanmak istediğiniz fontları indirmelisiniz. Çok var İnternette ücretsiz yazı tipi sunan siteler Google yazı tipleri, yazı tipi alanı ve dafont web siteleri dahil.

Web yazı tiplerini indirdikten sonra, birden çok tarayıcıyı desteklemek için bunları farklı yazı tipi biçimlerine dönüştürün. Kullanabilirsiniz ücretsiz çevrimiçi yazı tipi dönüştürme araçları böyle yaparak. Modern web tarayıcıları .woff ve .woff2 biçimlerini destekler. Eski tarayıcıları desteklemeniz gerekiyorsa .eot ve .ttf biçimlerini de sağlamalısınız.



adlı yeni bir klasör oluşturun. yazı tipleri site dizininizde ve dönüştürülmüş yazı tipi dosyalarınızı oraya kaydedin.

Bir sonraki adım, yazı tipi yüzlerini stiller/global.css Dosyayı tüm web sitesinde kullanılabilir hale getirmek için. Bu örnek, denizkızı yazı tipinin yazı tipi yüzlerini kalın olarak gösterir:



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

Yazı tipi dosyalarını ekledikten sonra, bu yazı tiplerini bileşen düzeyinde bir CSS dosyasında kullanabilirsiniz:

h1 { 
    font-family: Mermaid; 
}

Bir CDN aracılığıyla Next.js'ye Web Yazı Tiplerini Ekleme

Bazı web siteleri, uygulamanıza aktarabileceğiniz bir CDN aracılığıyla web yazı tiplerini sunar. Yazı tiplerini indirmenize veya yazı tipi yüzleri oluşturmanıza gerek olmadığı için bu yaklaşımın kurulumu kolaydır. Ayrıca, Google yazı tiplerini veya TypeKit'i kullanıyorsanız, Next.js optimizasyonu otomatik olarak gerçekleştirir.



Bir CSS dosyasındaki bağlantı etiketini veya @import kuralını kullanarak bir CDN'den yazı tipleri ekleyebilirsiniz.

Bağlantı etiketi her zaman bir HTML belgesinin head etiketinin içine girer. Next.js'de bir başlık etiketi eklemek için özel bir belge oluşturmanız gerekir. Bu belge, her sayfayı oluşturmak için kullanılan head ve body etiketini değiştirir.

Dosyayı oluşturarak bu özel belge özelliğini kullanmaya başlayın /pages/_document.js.

Ardından, _document.js dosyasının başlığına yazı tipinin bağlantısını ekleyin.

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;

Bir Next.js Projesine Yazı Tiplerini Dahil Etmek için @import Kuralı Nasıl Kullanılır

Başka bir seçenek de yazı tipini kullanmak istediğiniz CSS dosyasında @import kuralını kullanmaktır.

Örneğin, web yazı tipini projeye içe aktararak yazı tipini tüm projede kullanılabilir hale getirin. stiller/global.css dosya.

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

Artık yazı tipi ailesine bir CSS seçici bunun gibi:

adobe flash player gerektirmeyen oyunlar 
h1 { 
    font-family:'Libre Caslon Display', serif; 
}

@import kuralı, içerilen bir CSS dosyasındaki bir yazı tipini içe aktarmanıza olanak tanır. Bağlantı etiketini kullanmak, yazı tipini sitenin tamamında erişilebilir hale getirir.

Yazı Tiplerini Yerel Olarak mı Barındırmalısınız yoksa Bir CDN aracılığıyla mı İçe Aktarmalısınız?

Yerel olarak barındırılan yazı tipleri genellikle bir CDN'den içe aktarılan yazı tiplerinden daha hızlıdır. Bunun nedeni, web sayfası yüklendikten sonra tarayıcının CDN yazı tipine ek bir istekte bulunması gerekmemesidir.

İçe aktarılan yazı tiplerini kullanmak istiyorsanız, sitenin performansını artırmak için bunları önceden yükleyin. Yazı tipleri Google yazı tiplerinde veya Typekit'te mevcutsa, bunları içe aktarabilir ve Next.js'nin optimizasyon özelliklerinden yararlanabilirsiniz.