Ionic projesine font eklemek
Merhaba, bugün sizlere ionic 4 projesi için font yükleme adımlarını göstereceğim. Yüklemek istediğiniz fontu aşağıdaki adımları uygulayarak yükleyebilirsiniz. Projenin çoktan oluşturulduğunu düşünüyorum. Eğer ionic ile herhangi bir bilginiz yok ise buradan gerekli adımları izleyip bilgi edinebilirsiniz.
Ben fontum’u yüklemek için Google Fonts kullandım. Sizler de hemen hemen bütün fontlara buradan ulaşabilirsiniz.
İlk olarak Google Fonts ‘ tan istediğim fontu seçiyorum.
A-) İstediğim fontu ekle butonuna tıklayarak seçiyorum.
B-) Birden fazla font da seçebileceğimizi hatırlatmak istedim. Bunun için istediğiniz fontu ekle butonuna basarak seçebilirsiniz.
Daha sonra google bana fontu nasıl projeye eklemem gerektiğini söylüyor bizde bu adımlara uyacağız.
Burada load time yani yüklenme süresi önemli. Çünkü projemizden fontu çekmek için istek yaptığımız zaman fontu çekme süresinin fazla olmaması gerekiyor. Tabii ki bu eğer cdn’den -yani yukarıdaki gibi url’den- çekeceğimiz zaman geçerli eğer fontu indirirsek böyle bir olaya ihtiyacımız kalmıyor.
Şimdi projemize geçiyoruz.
Projeye font eklenmediği zaman bile ionic için yine web uygulamalarında olduğu gibi yüklenen bazı fontları kullanabilirsiniz. Eklenmeden önceki halini aşağıda görebilirsiniz.
Fontları global.scss dosyasından yükleyeceğiz ve ben tüm proje için kullanacağım için variables.scss ‘ den :root olarak ekleyeceğim. Bu işlemleri yapmadan önceki hali aşağıda göründüğü gibi.
Daha sonra Google’ın bana verdiği linki kullanarak font’u projeme import ediyorum ve :root olarak fontu ekliyorum.
Ve bunları ekledikten sonra ki hali aşağıda gibi oluyor.
Fontu eklediğim zaman ki önceden yazdığım şeylerin ne olduğunu buradan bakabilirsiniz.
