Flarum’da başlıklar ve gövde için ayrı ayrı Google Font veya özel font kullanabilirsiniz. Şimdi bunu nasıl yapacağınızı anlatayım.
Flarum’da Google Font Kullanımı
İlk olarak Google Fonts sitesinden bir font beğenin. Örneğin diyelim ki Roboto fontunu kullanmaya karar verdiniz.
Remove This Style butonuna tıklayın. Yandan bir bölme açılacak buradan da @import sekmesine tıklayın. ve sadece aşağıdaki bölümü kopyalayın.
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
Admin Panelde > Görünüm > Özel Stiller menüsüne tıklayın ve aşağıdaki bölümü buraya ekleyin
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
body {
font-family: 'Roboto', Helvetica, Arial, sans-serif;
}
Eğer benzer şekilde başlıklar içinde kullanmayı isterseniz aşağıdaki kısmı ekleyin. İsterseniz başlıklar ve gövde için ayrı ayrı fontlar belirleyebilirsiniz.
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
h1, h2, h3, h4, h5 {
font-family: Roboto, Helvetica, Arial, sans-serif;
}
Flarum’da Özel Font Kullanımı
Kullanmak istediğiniz fontu bulun ve bilgisayarınıza indirin. Sitede kullanacağımız fontun uzantısı Woff2 olmalı. Muhtemelen internetten otf ve tff uzantılı font indireceksiniz. Şimdi eğer elinizdeki font Woff2 formatında değilse bu siteyi kullanarak fontu woff2 formatına dönüştürebilirsiniz.
Şimdi elimizde Woff2 formatında bir yazı tipi var. Bu yazı tipini site dizininde assets klasörü içinde bulunan fonts klasörünün içine atın. (public/assets/fonts)
Şimdi Admin Panelde Görünüm > Özel Stiller bölümüne gelin ve aşağıdaki kısmı ekleyin. Örneğin FlarumTR’de başlıklar için museo font kullanılıyor. Bunun için eklemem gereken kod aşağıda. Sizde sadece font adını değiştirip ekleyebilirsiniz.
@font-face {
font-family: 'museo';
src: url(/assets/fonts/museo.woff2) format('woff2');
}
h1, h2, h3, h4, h5 {
font-family: museo, sans-serif;
}
