İnternette harika fontlar buldunuz ve bunları SwiftUI ile yazdığınız yeni projenizde kullanmak istiyorsunuz. Hemen bir dizayn rehberi hazırladınız. Başlıklar, altbaşlıklar ve gövde için yazı tipleri belirlediniz. Her şey hazır, başlayalım.
Ön Kontrol
Yazı tipleriyle çalışmadan önce bir şeyden emin olmalıyız. İndirdiğimiz yazı tiplerinin OpenType veya TrueType olup olmadığını kontrol edeceğiz.
Bunun için önce Font Book'a gidelim ve indirip yüklediğimiz yazı tipini bulalım. Details sekmesinin altında yer alan Format başlığının altında OpenType veya TrueType bilgilerinin yer aldığından emin olduktan sonra ilerleyebiliriz.
OpenType Font (.otf) veya TrueType Font (.ttf) uzantılı yazı tipi dosyalarımızı proje dizinimize ekleyelim. Ben karışıklıkların önüne geçmek adına bu dosyaları tek bir Font klasörü altında topluyorum.
Yazı tipini sürükle bırak ile eklerken açılan diyalog penceresinde Destination karşısındaki Copy items if needed ifadesine tik atmalıyız. Added folders içinse Create folder references'ı seçeceğiz. Son olarak add to target karşısındaki app targetimizi tikleyeceğiz. Bu pek çok hataya neden olup çoğu kez de atlanabiliyor, o nedenle dikkat edelim.
Proje dizininin en başından Xcode projemizi seçelim ve açılan pencereden app targetimizi seçelim. Info sekmesine yeni bir parametre ekleyeceğiz.
Bunun için herhangi bir satıra tıkladıktan sonra beliren "+" düğmesine basalım. Açılan drop-down pencereden Fonts provided by application'ı seçeceğiz.
Bu işlemin ardından Xcode otomatik olarak bize içinde yeni eklediğimiz bu parametreyi barındıran bir Info.plist dosyası üretecek, dilerseniz o dosyadan da devam edebilirsiniz çünkü iki taraf birbirinin kopyası olacak.
Projemize eklediğimiz her bir yazı tipi dosyasının adını, yeni bir item olarak parametremize ekleyeceğiz ama önce...
burada biraz duralım.
Benim karşılaşıp internette araştırırken çoğu kişinin de takıldığını fark ettiğim bir problemden ve çözümünden bahsedeceğim.
Bazen internetten indirdiğimiz OpenType Font veya TrueType Font dosyalarının isimlendirilişleri, fontun gerçek isminden farklı olabiliyor. Bu durumda bizim projemizin Info dosyasına parametre olarak eklediğimiz isimler Xcode tarafından bulunamıyor. Bunun önüne geçmenin aslında çok basit bir yolu var.
Font Book'u açalım ve indirdiğimiz yazı tipini seçelim.
Identifiers sekmesini açalım. Fark edeceğiniz üzere Family Name ile PostScript Name bilgileri farklılık gösteriyor. (Elbette bu iki isim sizin durumunuzda aynı olabilir. Biz farklı olduğunu kabul ettiğimiz bir senaryo için düşünelim.)
İşimize yarayacak olan, PostScript Name. Bunu kopyalayalım.
Artık Xcode'a geri dönebiliriz
Kolaylık sağlaması açısından kopyaladığımız bu ismi, projemize eklediğimiz dosyaların isimleriyle değiştirebiliriz. Şu ana kadar herhangi bir referansta bulunmadığımız için bir problemle karşılaşmayız.
Info altında eklediğimiz yeni key olan Font provided by application altına kopyaladığımız her bir ismi yeni birer item olarak ekleyelim.
Her şey hazır. Şimdi koda bakalım.
Yeni yazı tipini bir view ile kullanmak
SwiftUI custom fontlar ile çalışmayı epey kolay hale getiriyor.
Yazı tipini değiştirmek istediğimiz view için .font(.custom()) ekliyoruz. .custom() iki parametre alacak, name: String ve size: CGFloat.
Name, bizim Font Book'tan bulup Info'ya eklediğimiz PostScript Name'i olacak. Benim örneğimde bu "AntiqueSerie-Regular". Size ise custom olmayan fontlarda da kullandığımız şekliyle float bir değer alacak.
SwiftUI'da custom fontlar ile çalışmak aslında bu kadar kolay ancak bazı ufak detayları da atlamamak gerekiyor.
Her şey çok iyi. Peki ya variable fontlar? Tabii ya, variable fontlar! Tipografi dünyasına dair en çok heyecan duyduğum şeylerin ilk sırasında variable fontlar geliyor olabilir. O nedir diye soracak olursanız, Google Fonts sayfasında yer alan bilgi şu şekilde:
Variable fonts—officially known as OpenType Font Variations—remove the explicit distinctions between different weights and styles, which have existed since the early days of typesetting.
Meraklılar Google Font sayfasındaki ilgili makaleye göz atabilir.
Ne yazık ki SwiftUI variable font kullanımını desteklemiyor — yani kısmen. Variable fontları kullanmak için kendiniz geliştirebileceğiniz teknik yolların yanı sıra open-source dünyasında da çeşitli yöntemler bulunuyor. Ben bunlar arasından en kullanışlı ve pratik bulduğum yöntem olan vFont'u paylaşacağım.
Variable fontların projeye eklenmesi diğerleriyle aynı olduğu için lütfen yazı tipi dosyalarının projeye doğru şekilde eklendiğinden emin olun.
Not: Ben bu aşamada Swift Package Manager'ı kullanacağım ve onun üzerinden anlatım yapacağım ancak siz dilediğiniz paket yöneticisini kullanmakta özgürsünüz.
vFont'un GitHub sayfasına gidelim ve git bağlantısını kopyalayalım. Ben sizin için getirdim: https://github.com/dufflink/vfont.git
Xcode'a dönelim ve proje dizininde sağ tık -> Add Package Dependencies'i seçelim. Bu seçim bize Swift Package Manager'ı açacak.
Pencerenin sol üstünde yer alan arama barına kopyaladığımız git bağlantısını yapıştıralım.
Alttaki mavi Add Package düğmesine basalım. Artık vFont'u projemizde kullanabiliriz.
Ben proje düzeni açısından az sonra yapacağımız eklemeleri Fonts+AppName.swift olarak adlandırdığım bir dosyaya yapacağım. Siz de temiz kod prensibine bağlı kalmak ve daha sonra yapacağımız değişikliklerde işimizi kolaylaştırması adına bu yolu izleyebilirsiniz.
Öncelikle SwiftUI'ı vFont'u import edelim.
- Projeye eklediğimiz variable yazı tiplerini global olarak kullanmak istediğimiz için bu yazı tiplerini bir SwiftUI elemanı olan Font'a extension olarak ekleyeceğiz.
- Variable font dosyasının adıyla isimlendireceğimiz bir static fonksiyon yazacağız. Bahsettiğimiz gibi variable fontlar size, width ve weight açısından özgürce manipüle edilebiliyor. Dolayısıyla yeni yazacağımız fonksiyonun bu üç bilgiyi parametre olarak alması gerekecek. Elbette output tipi de Font olacak.
Fonksiyonun içini .vFont return edecek şekilde dolduracağız. .vFont üç parametre alacak: Variable fontun ismi, size (boyutu) ve axes (width ve weight değerleri). Width ve weight değerlerini geliştiricinin sağladığı default haliyle yazacağız.
Variable fontumuz kullanıma hazır. Artık bir view üzerinde test edebiliriz.
İşte bu kadar.
Ben bu örnekte çok beğendiğim open-source bir variable font olan Bricolage Grotesque'i kullandım. Kendisinin çok özel bir hikayesi ve müthiş bir internet sitesi de var. İlgilenenler buradan ulaşabilir.
Buraya kadar vakit ayırdığınız için teşekkür ederim. Umarım bugün bir probleminizi çözmeye yardımcı olabilmişimdir, olamadıysam bu yazıyı başkalarıyla paylaşarak belki onlara yardımcı olmamızı sağlayabilirsiniz. Teşekkürler!
LinkedIn'de bağlantı kurmak için burayı, Twitter/X üzerinden selam vermek için burayı ziyaret edebilirsiniz.