Flutter How to Use Custom Fonts & Google Fonts

Flutter Knowledge Sharing #40

Flutter Custom Fonts & Google Fonts

We use different font types in our application. How we add a custom font type or google font type to our application?. This article is the answer to that question. Often we need to follow these steps when we use fonts. This is my 40th step in Flutter knowledge sharing journey.

First I will show you how to add Google fonts to our applications. Let’s get started by going to the https://fonts.google.com/ sit first. There you can see different text style. Also, you can see the variations of different text styles. If you want to see your point of view, you can search in your own words. Then you can choose the one you like.

Image: Google Fonts

Then I am going to use the font in our application. First, add the dependencies ad follows.

dependencies:
  flutter:
    sdk: flutter
  google_fonts: ^2.1.0

Then create a Text style by using the selected font type. Here I showing the changes that happen in the text.

Image: Google Fonts in Flutter

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final style = TextStyle(fontSize: 62, fontWeight: FontWeight.bold);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                "Geno Tech: Flutter Tutorial",
                style: GoogleFonts.oswald(
                  textStyle: style
                ),
              ),
            ],
          )
        ),
      ),
    );
  }
}

You can see some of the font styles are supported directly. However, Some are not. also, you can use different colours, and styles with Google fonts. These are all attributes there we can use.

String,
  TextStyle Function({
TextStyle? textStyle,
Color? color,
Color? backgroundColor,
double? fontSize,
FontWeight? fontWeight,
FontStyle? fontStyle,
double? letterSpacing,
double? wordSpacing,
TextBaseline? textBaseline,
double? height,
Locale? locale,
Paint? foreground,
Paint? background,
List<ui.Shadow>? shadows,
List<ui.FontFeature>? fontFeatures,
TextDecoration? decoration,
Color? decorationColor,
TextDecorationStyle? decorationStyle,
double? decorationThickness,

Then will discuss how to use custom font styles. You need to download the .ttf of the font family first and add it to the assets folder. Finally, go to the pubspec.yaml file. Then register the file name thereby using the family name and the asset location.

fonts:
   - family: EncodeSansSC
     fonts:
        - asset: assets/EncodeSansSC-Medium.ttf

In that way, you can use custom font styles that not only in fonts.google.

Text(
  "Custom Font",
  style: TextStyle(
    fontFamily: 'EncodeSansSC',
    fontSize: 48,
  ),
),

Conclusion

This story gives you the knowledge of how to use font styles in your Flutter application. Please feel free to ask any question you will face in the response section below.
Happy Coding !!!!
Found this post useful? Kindly tap the 👏 button below! :)