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.
Next.js'de Kendi Kendine Barındırılan Yazı Tiplerini Kullanma
Next.js'de şirket içinde barındırılan yazı tipleri 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 yazı tiplerini 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ğlamanız gerekir.
adlı yeni bir klasör oluşturun. yazı tipleri site dizininizde ve dönüştürülen yazı tipi dosyalarınızı oraya kaydedin.
Bir sonraki adım, yazı tipi yüzlerini stiller/global.css tüm web sitesinde kullanılabilir hale getirmek için dosya. Bu örnek, deniz kızı yazı tipi için yazı tipi yüzlerini kalın olarak gösterir:
@yazı tipi-yüz {
font ailesi: 'Deniz Kızı';
kaynak: url('Mermaid-Bold.eot');
kaynak: url('Mermaid-Bold.eot?#iefix') biçim('gömülü açık tip'),
url('Denizkızı-Bold.woff2') biçim('woff2'),
url('Mermaid-Bold.woff') biçim('havlamak'),
url('Mermaid-Bold.ttf') biçim('gerçek tip');
yazı tipi ağırlığı: kalın;
yazı tipi stili: normal;
yazı tipi ekranı: takas;
}
Yazı tipi dosyalarını ekledikten sonra, bu yazı tiplerini bileşen düzeyinde bir CSS dosyasında kullanabilirsiniz:
h1 {
yazı tipi ailesi: Denizkızı;
}Bir CDN aracılığıyla Next.js'ye Web Yazı Tiplerini Dahil Etme
Bazı web siteleri, uygulamanıza aktarabileceğiniz bir CDN aracılığıyla web yazı tipleri sunar. Bu yaklaşımın kurulumu kolaydır çünkü yazı tiplerini indirmeniz veya yazı tipi yüzleri oluşturmanız gerekmez. Ayrıca, Google yazı tiplerini veya TypeKit'i kullanıyorsanız, Next.js optimizasyonu otomatik olarak gerçekleştirir.
Bir CSS dosyası içindeki bağlantı etiketini veya @import kuralını kullanarak bir CDN'den yazı tipleri ekleyebilirsiniz.
Bağlantı etiketi her zaman bir HTML belgesinin baş etiketinin içine girer. Next.js'de bir baş etiketi eklemek için özel bir belge oluşturmanız gerekir. Bu belge, her sayfayı oluşturmak için kullanılan baş ve gövde 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.
içe aktarmak Belge, { Html, Head, Main, NextScript } itibaren "Sonraki/belge";
sınıfDokümanımuzanırbelge{
statikzaman uyumsuz getInitialProps (ctx) {
sabit İlkProps = beklemek Document.getInitialProps (ctx);
geri dönmek { ...initialProps };
}
render() {
geri dönmek (
<html>
<KAFA>
<bağlantı
href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&ekran=takas"
rel="stil sayfası"
/>
</Head>
<vücut>
<Ana />
<NextScript />
</body>
</Html>
);
}
}
ihracatvarsayılan Dokümanım;Bir Next.js Projesine Yazı Tiplerini Dahil Etmek İçin @import Kuralını Kullanma
Diğer bir seçenek de yazı tipini kullanmak istediğiniz CSS dosyasında @import kuralını kullanmaktır.
Örneğin, web yazı tipini içe aktararak yazı tipinin tüm projede kullanılabilir olmasını sağlayın. stiller/global.css dosya.
@url'yi içe aktar('https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&ekran=takas');
Artık yazı tipi ailesine bir CSS seçici bunun gibi:
h1 {
font ailesi:'Ücretsiz Caslon Ekranı', serif;
}@import kuralı, içerilen bir CSS dosyasındaki bir yazı tipini içe aktarmanıza olanak tanır. Bağlantı etiketinin kullanılması, yazı tipinin tüm site genelinde erişilebilir olmasını sağlar.
Yazı Tiplerini Yerel Olarak mı Barındırmalısınız yoksa Bir CDN aracılığıyla İçe mi 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.
