Merhaba arkadaşlar, bugün başımı çok ağrıtan bir sorunu ve nasıl çözdüğümü anlatacağım. Projelerimde Tailwind CSS kullanmayı seviyorum ama custom font eklerken font-weight'lar (kalınlık değerleri) bir türlü doğru çalışmıyordu. Örneğin, font-weight: 700 yazdığımda tarayıcı bana otomatik olarak kalınlaştırılmış, çirkin bir font gösteriyordu. Bu hatayı ilk gördüğümde kafayı yemiştim çünkü tasarım tamamen bozuluyordu.
Araştırdım ve sorunun kaynağının, font dosyalarını @font-face kuralıyla yüklerken her bir font-weight ve font-style kombinasyonu için ayrı bir kural tanımlamamak olduğunu fark ettim. Tarayıcı, eksik tanımlanan ağırlıkları kendi "synthetic bold" özelliğiyle oluşturuyor ve bu da berbat bir görüntüye sebep oluyordu.
Karşılaştığım Sorun ve Yanlış Yöntem
İlk başta, font'u tek bir @font-face kuralıyla, sadece normal ağırlık (400) için yüklüyordum. Tailwind config'inde de fontFamily extend edip bırakıyordum. İşte o hatalı yaklaşım:
Tailwind config'imde:
Bu durumda, font-bold class'ını (font-weight: 700) kullandığımda, tarayıcı normal (400) font'u alıp kalınlaştırarak gösteriyordu. Sonuç: bulanık, okunması zor metinler.
Doğru Çözüm: Her Ağırlık İçin Ayrı Font-Face
Çözüm, kullanacağınız her bir font-weight değeri için ayrı bir @font-face kuralı yazmak. Eğer font'unuzun italik (italic) versiyonu da varsa, onun için de ayrı kurallar (font-style: italic) yazmalısınız. İşte benim kullandığım en temiz çözüm:
Bu tanımlamalardan sonra, Tailwind config'inizde font-family'yi extend ettiğinizde artık her şey kusursuz çalışacak. font-light (300), font-normal (400), font-bold (700) ve italic class'ları, ilgili gerçek font dosyasını sorunsuzca yükleyecek.
Pro Tip: Font Dosyalarınızı Optimize Edin
Bir de küçük bir tavsiye: Font dosyalarınızı mümkün olduğunca .woff2 formatında kullanın. En modern ve en iyi sıkıştırmaya sahip format. Ayrıca, font-display: swap kullanmak, font yüklenene kadar sistem fontunun gösterilmesini sağlar ve "FOIT" (Flash of Invisible Text) sorununu önler, kullanıcı deneyimini artırır.
Sonuç olarak, custom font eklerken sadece font-family tanımlamak yetmiyor. Tüm varyantları (weight, style) doğru şekilde @font-face kurallarıyla sisteme tanıtmak gerekiyor. Bu sayede hem tasarımınız bozulmaz hem de performans ve görsel kalite artar.
Siz Tailwind projelerinizde custom font eklerken benzer bir sorunla karşılaştınız mı? Ya da font optimizasyonu için farklı bir yöntem, harika bir tool kullanıyor musunuz? Yorumlarda paylaşalım!
Araştırdım ve sorunun kaynağının, font dosyalarını @font-face kuralıyla yüklerken her bir font-weight ve font-style kombinasyonu için ayrı bir kural tanımlamamak olduğunu fark ettim. Tarayıcı, eksik tanımlanan ağırlıkları kendi "synthetic bold" özelliğiyle oluşturuyor ve bu da berbat bir görüntüye sebep oluyordu.
Karşılaştığım Sorun ve Yanlış Yöntemİlk başta, font'u tek bir @font-face kuralıyla, sadece normal ağırlık (400) için yüklüyordum. Tailwind config'inde de fontFamily extend edip bırakıyordum. İşte o hatalı yaklaşım:
CSS:
/ Yanlış: Sadece normal ağırlık yüklendi /
@font-face {
font-family: 'CustomFont';
src: url('/fonts/custom-font-regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}Tailwind config'imde:
JavaScript:
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'custom': ['CustomFont', 'sans-serif'],
},
},
},
}Bu durumda, font-bold class'ını (font-weight: 700) kullandığımda, tarayıcı normal (400) font'u alıp kalınlaştırarak gösteriyordu. Sonuç: bulanık, okunması zor metinler.
Doğru Çözüm: Her Ağırlık İçin Ayrı Font-FaceÇözüm, kullanacağınız her bir font-weight değeri için ayrı bir @font-face kuralı yazmak. Eğer font'unuzun italik (italic) versiyonu da varsa, onun için de ayrı kurallar (font-style: italic) yazmalısınız. İşte benim kullandığım en temiz çözüm:
CSS:
/ CSS dosyanıza (örneğin styles/globals.css) ekleyin /
/ Her ağırlık ve stil için ayrı kural /
/ Normal (400) /
@font-face {
font-family: 'CustomFont';
src: url('/fonts/custom-font-regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
/ Kalın (700) /
@font-face {
font-family: 'CustomFont';
src: url('/fonts/custom-font-bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
/ İnce (300) - Eğer dosyanız varsa /
@font-face {
font-family: 'CustomFont';
src: url('/fonts/custom-font-light.woff2') format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap;
}
/ İtalik Normal (400 italic) /
@font-face {
font-family: 'CustomFont';
src: url('/fonts/custom-font-italic.woff2') format('woff2');
font-weight: 400;
font-style: italic;
font-display: swap;
}
/ İtalik Kalın (700 italic) /
@font-face {
font-family: 'CustomFont';
src: url('/fonts/custom-font-bold-italic.woff2') format('woff2');
font-weight: 700;
font-style: italic;
font-display: swap;
}Bu tanımlamalardan sonra, Tailwind config'inizde font-family'yi extend ettiğinizde artık her şey kusursuz çalışacak. font-light (300), font-normal (400), font-bold (700) ve italic class'ları, ilgili gerçek font dosyasını sorunsuzca yükleyecek.
Pro Tip: Font Dosyalarınızı Optimize EdinBir de küçük bir tavsiye: Font dosyalarınızı mümkün olduğunca .woff2 formatında kullanın. En modern ve en iyi sıkıştırmaya sahip format. Ayrıca, font-display: swap kullanmak, font yüklenene kadar sistem fontunun gösterilmesini sağlar ve "FOIT" (Flash of Invisible Text) sorununu önler, kullanıcı deneyimini artırır.
Sonuç olarak, custom font eklerken sadece font-family tanımlamak yetmiyor. Tüm varyantları (weight, style) doğru şekilde @font-face kurallarıyla sisteme tanıtmak gerekiyor. Bu sayede hem tasarımınız bozulmaz hem de performans ve görsel kalite artar.
Siz Tailwind projelerinizde custom font eklerken benzer bir sorunla karşılaştınız mı? Ya da font optimizasyonu için farklı bir yöntem, harika bir tool kullanıyor musunuz? Yorumlarda paylaşalım!