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

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

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

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 @font-face CSS kuralını kullanmanız gerekir . Bu kural, bir web sayfasına özel yazı tipleri eklemenizi sağlar.

Font-face’i kullanmadan önce kullanmak istediğiniz fontları indirmelisiniz. Google yazı tipleri, yazı tipi alanı ve dafont web siteleri dahil olmak üzere internette ücretsiz yazı tipleri sunan birçok site vardır .

Web yazı tiplerini indirdikten sonra, birden çok tarayıcıyı desteklemek için bunları farklı yazı tipi biçimlerine dönüştürün. Bunu yapmak için ücretsiz çevrimiçi yazı tipi dönüştürme araçlarını kullanabilirsiniz. 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.

Site dizininizde fontlar adlı yeni bir klasör oluşturun ve dönüştürülen font dosyalarınızı oraya kaydedin.

Sonraki adım, tüm web sitesinde kullanılabilir hale getirmek için font yüzlerini style/global.css dosyasına eklemektir. 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.

Bir Bağlantı Etiketi Kullanarak Fontları Next.js Projesine Nasıl Aktarılır

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.

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

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 style/global.css dosyasına aktararak yazı tipini tüm projede kullanılabilir hale getirin.

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

Artık bir CSS seçicide yazı tipi ailesine şu şekilde başvurabilirsiniz :

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.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir