Ben bunun için HTML Head Items eklentisini kullanıyorum.
Öncelikle preconnect kullanarak hızlı şekilde fontları çekebiliriz. HTML Head Items eklentisine girmemiz gereken tag şu şekilde:
<link rel="preconnect" href="https://fonts.gstatic.com">
preconnect hakkında detaylı analiz: https://www.cdnplanet.com/blog/faster-google-webfonts-preconnect/
Daha sonra kullanmak istediğimiz fontu HTML Head Items eklentisine ekliyoruz. İsim olarak örneğin “Google Poppins Font” yazarsanız daha düzenli olur. Ben örnek olarak poppins fontunu kullanıyorum.
Şu şekilde:
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,600;1,400;1,600&display=swap" rel="stylesheet">
Bu kodları font seçiminize bağlı hazır olarak https://fonts.google.com/ adresinden edinebilirsiniz.
Daha sonra Görünüm > Özel Stiller bölümünden istediğiniz alanlarda fontunuzu değiştirebilirsiniz.
Örneğin tüm sitede değiştirmek için body tagini kullanabiliriz:
body{font-family: 'Poppins', sans-serif;}
Ne kadar font eklerseniz sayfanıza o kadar yük binecektir. Ancak başlıklar ve içerik için ayrı 2 font kullanmak sitenize görünüm açısından farklılık katacaktır.
google fonts kullanmak istemiyorsanız alternatif olarak adobe typekit kullanabilirsiniz: https://fonts.adobe.com/typekit
