google_fonts in a ThemeData - fonts not being applied

Question

I'm trying to add a couple of google_fonts to a ThemeData. All of my theme is being applied, except that the google fonts are not. Why is this? Here is my project setup:

The theme:

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

import 'theme_utils.dart';

MaterialColor primaryColorShades = generateMaterialColor(primaryColor);
MaterialColor accentColorShades = generateMaterialColor(accentColor);

const Color primaryColor = Color(0xFF62d9d5);
const Color accentColor = Color(0xFF27a562);
const Color blueText = Color(0xFF409491);

ThemeData blueTheme = ThemeData(
  colorScheme: const ColorScheme(
      brightness: Brightness.light,
      primary: primaryColor,
      secondary: accentColor,
      surface: Colors.white,
      background: primaryColor,
      error: Colors.red,
      onBackground: Colors.white,
      onError: Colors.white,
      onPrimary: Colors.white,
      onSecondary: Colors.white,
      onSurface: blueText,
      primaryVariant: Colors.white,
      secondaryVariant: Colors.white),
  visualDensity: VisualDensity.standard,
  canvasColor: primaryColor,
  textTheme: GoogleFonts.varelaRoundTextTheme().copyWith(
    headline1: const TextStyle(
        fontSize: 30.0, fontWeight: FontWeight.bold, color: Colors.white),
    subtitle1: TextStyle(
        fontSize: 18.0,
        fontWeight: FontWeight.bold,
        color: Colors.white.withOpacity(0.7)),
    button: GoogleFonts.hind(
        textStyle: const TextStyle(
            fontSize: 12.0, fontWeight: FontWeight.w500, color: blueText)),
  ),
);

main.dart:

import 'package:flutter/material.dart';
import 'package:get/get.dart';

import 'app/routes/app_pages.dart';
import 'app/theme/theme.dart';

void main() {
  runApp(GetMaterialApp(
    title: 'Application',
    initialRoute: AppPages.INITIAL,
    getPages: AppPages.routes,
    theme: blueTheme,
  ));
}

And use them in my view like so:

Text('Hi there, \nI\'m Vepo',
                style: Theme.of(context).textTheme.headline1,
                textAlign: TextAlign.center),

Text('I can help you find vegan things in your local area',
     style: Theme.of(context).textTheme.subtitle1,
     textAlign: TextAlign.center),

RaisedButton(padding: const EdgeInsets.symmetric(
             vertical: 10, horizontal: 60),
             elevation: 20.00,
             shape: RoundedRectangleBorder(
             borderRadius: BorderRadius.circular(40.0)),
             child: Text(
             'COOL, SIGN ME UP!',
             style: Theme.of(context).textTheme.button,
             ),
             onPressed: () {}),

in my pubspec.yaml:

flutter:
    uses-material-design: true
    assets:
        - assets/images/
        - google_fonts/

In the root of my project:

Why are the fonts not being applied?

From the google_fonts pub page, it seems like I might need to reference the context from within the ThemeData, but I don't have access since it is a different file, and I don't really want to change the ThemeData to be inline like on their docs:

MaterialApp(
  theme: ThemeData(
    textTheme: GoogleFonts.latoTextTheme(
      Theme.of(context).textTheme,
    ),
  ),
);

Have you define the fonts in your pubspec file ? https://stackoverflow.com/a/64237403/5882307 — OMi Shah, Oct 17 '20 at 10:29
@OMiShah I don't think I need to. From [google_fonts](https://pub.dev/packages/google_fonts) "Note: Since these files are listed as assets, there is no need to list them in the fonts section of the pubspec.yaml. This can be done because the files are consistently named from the Google Fonts API (so be sure not to rename them!)" — BeniaminoBaggins, Oct 17 '20 at 10:32

score 1 · Answer 1 · answered Oct 17 '20 at 22:50

I thought I had to do things the google_fonts way, however, I don't. The google_fonts way seems to need context for certain things in the ThemeData. Changing to the flutter way:

in pubspec.yaml:

flutter:
    uses-material-design: true
    fonts:
        - family: VarelaRound
          fonts:
              - asset: assets/fonts/VarelaRound-Regular.ttf

In my theme:

import 'package:flutter/material.dart';

import 'theme_utils.dart';

MaterialColor primaryColorShades = generateMaterialColor(primaryColor);
MaterialColor accentColorShades = generateMaterialColor(accentColor);

const Color primaryColor = Color(0xFF62d9d5);
const Color accentColor = Color(0xFF27a562);
const Color blueText = Color(0xFF409491);

ThemeData blueTheme = ThemeData(
  colorScheme: const ColorScheme(
      brightness: Brightness.light,
      primary: primaryColor,
      secondary: accentColor,
      surface: Colors.white,
      background: primaryColor,
      error: Colors.red,
      onBackground: Colors.white,
      onError: Colors.white,
      onPrimary: Colors.white,
      onSecondary: Colors.white,
      onSurface: blueText,
      primaryVariant: Colors.white,
      secondaryVariant: Colors.white),
  visualDensity: VisualDensity.standard,
  canvasColor: primaryColor,
  fontFamily: 'varelaRound',
  textTheme: TextTheme(
    headline1: const TextStyle(
        fontSize: 30.0,
        fontWeight: FontWeight.bold,
        color: Colors.white,
        fontFamily: 'varelaRound'),
    subtitle1: TextStyle(
        fontSize: 18.0,
        fontWeight: FontWeight.bold,
        fontFamily: 'varelaRound',
        color: Colors.white.withOpacity(0.7)),
    caption: TextStyle(
        fontSize: 14.0,
        fontWeight: FontWeight.w600,
        fontFamily: 'hind',
        color: Colors.white.withOpacity(0.7)),
    button: const TextStyle(
        fontSize: 12.0,
        fontWeight: FontWeight.w500,
        color: blueText,
        fontFamily: 'hind'),
  ),
);

Then use in the view like so:

Text('Hi there, \nI\'m Vepo',
     style: Theme.of(context).textTheme.headline1,
     textAlign: TextAlign.center),
),

Do you still use this approach or have you found a way to make google_fonts work? — rupinderjeet, Dec 02 '21 at 13:09
@rupinderjeet Still using it this way. Kinda feel like it might be better this way because it is generic flutter so can use any fonts etc. — BeniaminoBaggins, Dec 02 '21 at 17:22
I think this is a "GetMaterialApp" issue, not google_fonts issue. Because I'm also facing the same issue with different fonts. If I use "MaterialApp" it is working fine, but not with GetMaterialApp — Sanjay TM, Apr 08 '22 at 14:33

google_fonts in a ThemeData - fonts not being applied

1 Answers1