Flutter Custom (Özel) Font Ekleme

Yapmış oldugumuz web sitelerine nasıl özel fontları indirip ekleye biliyorsak flutter’ada font ekleyebiliyoruz.

İlk olarak kullanmak istediğimiz fontu indirmemiz gerekiyor. Ben genelde google font’dan fontları indiriyorum geniş font yelpazesi bulunmakta. https://fonts.google.com/ adresinden istediğimiz fontu indirelim.

Fontumuzu indirdikten sonra projemizin ana dizininde assets diye bir klasör oluşturalım. Klasörün içerisinde projemizde kullanacağımız; font, image, video, mp3 dosyalarını tutabiliriz. Projemizde illla assets dosyası oluşturacağız diye bir kural yok kendiniz isterseniz dosyalarım veya başka bir isimde verebilirsiniz.

assets klasörünün altında fonts adında bir klasör daha oluşturuyorum ve projemde kullanacağım fontumu bu klasöre kopyalıyorum.

Fontspring_bold.otf ve Fontspring_regular.otf dosyalarını font olarak ekledim ben. Eklediğim font dosyaları instagram fontudur.

Fontlarımızı projemize eklemek için pubspec.yaml dosyamıze geçiyoruz, burada bir kaç ayar yapmamız gerekiyor.

Örnek olarak;

flutter:
  fonts:
    - family: InsFontu
      fonts:
        - asset: assets/fonts/Fontspring_regular.otf
        - asset: assets/fonts/Fontspring_bold.otf
          weight: bold

Fontuma yukarıda InsFontu adınu verdim. Çünkü fontum instagram fontu olduğundan.

Bu işlemleri yaptıktan sonra Pub Get dediğimizde. Fontumuzu artık projemizede kullanabiliriz.

Projelerimizde belirli alanlarda fontumuzun kullanım şekli;

Text(
"Instgram",
style: TextStyle(
color: Colors.black, fontSize: 25, fontFamily: 'InsFontu'),
),

Projemizin genelinde fontumuzu kullanmak istiyorsak.

MaterialApp(
  title: 'Custom Fonts',
  // Set Raleway as the default app font.
  theme: ThemeData(fontFamily: 'InsFontu'),
  home: MyHomePage(),
);

Flutter font kullanımıyla ilgili daha detaylı bilgiyi https://flutter.dev/docs/cookbook/design/fonts adresinden alabilirsiniz.