RobotoCondensed is not getting rendered

[branflake2267]

Steps to Reproduce

1. Apply this source
2. Notice the font RobotoCondensed family is not getting applied.

import 'package:flutter/material.dart';

const String letters = "​‌A​‌B​‌C​‌Ć​‌Č​‌D​‌Đ​‌E​‌F​‌G​‌H​‌I​‌J​‌K​‌L​‌M​‌N​‌O​‌P​‌Q​‌R​‌S​‌Š​‌T​‌U​‌V​‌W​‌X​‌Y​‌Z​‌Ž​‌a​‌b​‌c​‌č​‌ć​‌d​‌đ​‌e​‌f​‌g​‌h​‌i​‌j​‌k​‌l​‌m​‌n​‌o​‌p​‌q​‌r​‌s​‌š​‌t​‌u​‌v​‌w​‌x​‌y​‌z​‌ž​‌А​‌Б​‌В​‌Г​‌Ґ​‌Д​‌Ђ​‌Е​‌Ё​‌Є​‌Ж​‌З​‌Ѕ​‌И​‌І​‌Ї​‌Й​‌Ј​‌К​‌Л​‌Љ​‌М​‌Н​‌Њ​‌О​‌П​‌Р​‌С​‌Т​‌Ћ​‌У​‌Ў​‌Ф​‌Х​‌Ц​‌Ч​‌Џ​‌Ш​‌Щ​‌Ъ​‌Ы​‌Ь​‌Э​‌Ю​‌Я​‌а​‌б​‌в​‌г​‌ґ​‌д​‌ђ​‌е​‌ё​‌є​‌ж​‌з​‌ѕ​‌и​‌і​‌ї​‌й​‌ј​‌к​‌л​‌љ​‌м​‌н​‌њ​‌о​‌п​‌р​‌с​‌т​‌ћ​‌у​‌ў​‌ф​‌х​‌ц​‌ч​‌џ​‌ш​‌щ​‌ъ​‌ы​‌ь​‌э​‌ю​‌я​‌Α​‌Β​‌Γ​‌Δ​‌Ε​‌Ζ​‌Η​‌Θ​‌Ι​‌Κ​‌Λ​‌Μ​‌Ν​‌Ξ​‌Ο​‌Π​‌Ρ​‌Σ​‌Τ​‌Υ​‌Φ​‌Χ​‌Ψ​‌Ω​‌α​‌β​‌γ​‌δ​‌ε​‌ζ​‌η​‌θ​‌ι​‌κ​‌λ​‌μ​‌ν​‌ξ​‌ο​‌π​‌ρ​‌σ​‌τ​‌υ​‌φ​‌χ​‌ψ​‌ω​‌ά​‌Ά​‌έ​‌Έ​‌έ​‌Ή​‌ί​‌ϊ​‌ΐ​‌Ί​‌ό​‌Ό​‌ύ​‌ΰ​‌ϋ​‌Ύ​‌Ϋ​‌Ώ​‌Ă​‌Â​‌Ê​‌Ô​‌Ơ​‌Ư​‌ă​‌â​‌ê​‌ô​‌ơ​‌ư​‌1​‌2​‌3​‌4​‌5​‌6​‌7​‌8​‌9​‌0​‌‘​‌?​‌’​‌“​‌!​‌”​‌(​‌%​‌)​‌[​‌#​‌]​‌{​‌@​‌}​‌/​‌&​‌<​‌-​‌+​‌÷​‌×​‌=​‌>​‌®​‌©​‌\$​‌€​‌£​‌¥​‌¢​‌:​‌;​‌,​‌.​‌*";

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Fonts',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new FontsPage(),
    );
  }
}

class FontsPage extends StatefulWidget {
  @override
  _FontsPageState createState() => new _FontsPageState();
}

class _FontsPageState extends State<FontsPage> {
  @override
  Widget build(BuildContext context) {
    var robotoContainer = new Container(
      child: new Column(
        children: <Widget>[
          new Text(
            "Roboto",
          ),
          new Text(
            letters,
            textAlign: TextAlign.center,
            style: new TextStyle(
              fontFamily: "Roboto",
              color: Colors.black,
              decorationStyle: TextDecorationStyle.dashed,
              fontWeight: FontWeight.w900,
              fontStyle: FontStyle.normal,
              fontSize: 13.0,
            ),
          ),
        ],
      ),
      margin: const EdgeInsets.all(10.0),
      padding: const EdgeInsets.all(10.0),
      decoration: new BoxDecoration(
        color: Colors.grey.shade200,
        borderRadius: new BorderRadius.all(new Radius.circular(5.0)),
      ),
    );

    var robotoCondensedContainer = new Container(
      child: new Column(
        children: <Widget>[
          new Text(
            "Roboto Condensed",
          ),
          new Text(
            letters,
            textAlign: TextAlign.center,
            style: new TextStyle(
              fontFamily: "RobotoCondensed",
              fontWeight: FontWeight.w700,
              //fontStyle: FontStyle.italic,
              fontSize: 13.0,
              color: Colors.purple,
            ),
          ),
        ],
      ),
      margin: const EdgeInsets.all(10.0),
      padding: const EdgeInsets.all(10.0),
      decoration: new BoxDecoration(
        color: Colors.grey.shade200,
        borderRadius: new BorderRadius.all(new Radius.circular(5.0)),
      ),
    );

    String icons = "";

    // https://material.io/icons/#ic_accessible
    // accessible: &#xE914; or 0xE914 or E914
    icons += "\u{E914}";

    // https://material.io/icons/#ic_android
    // anroid: &#xE859; or 0xE859; or E859
    icons += "\u{E859}";

    // https://material.io/icons/#ic_fingerprint
    // fingerprint: &#xE90D; or 0xE90D; or E90D;
    icons += "\u{E90D}";

    var materialIconsContainer = new Container(
      child: new Column(
        children: <Widget>[
          new Text(
            "Material Icons",
          ),
          new Text(
            icons,
            textAlign: TextAlign.center,
            style: new TextStyle(
              inherit: false,
              fontFamily: "MaterialIcons",
              color: Colors.black,
              fontStyle: FontStyle.normal,
              fontSize: 64.0,
            ),
          ),
        ],
      ),
      margin: const EdgeInsets.all(10.0),
      padding: const EdgeInsets.all(10.0),
      decoration: new BoxDecoration(
        color: Colors.grey.shade200,
        borderRadius: new BorderRadius.all(new Radius.circular(5.0)),
      ),
    );

    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Included Material Design Fonts"),
      ),
      body: new ListView(
        children: <Widget>[
          robotoContainer,
          robotoCondensedContainer,
          materialIconsContainer,
        ],
      ),
    );
  }
}

https://gist.github.com/branflake2267/927f0d8c48b09da709b9b8aa3e08ab8b

Flutter Doctor

Brandons-MacBook-Pro:flontser branflake2267$ flutter doctor
[✓] Flutter (on Mac OS X 10.12.5 16F73, locale en-US, channel master)
    • Flutter at /Users/branflake2267/git/flutter
    • Framework revision c186d0df1c (2 hours ago), 2017-07-18 18:47:20 -0700
    • Engine revision c757fc7451
    • Tools Dart version 1.25.0-dev.4.0

[✓] Android toolchain - develop for Android devices (Android SDK 26.0.0)
    • Android SDK at /Users/branflake2267/Library/Android/sdk
    • Platform android-26, build-tools 26.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_112-release-b06)

[✓] iOS toolchain - develop for iOS devices (Xcode 8.3.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 8.3.3, Build version 8E3004b
    • ios-deploy 1.9.1
    • CocoaPods version 1.2.1

[✓] Android Studio (version 2.3)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Java version OpenJDK Runtime Environment (build 1.8.0_112-release-b06)

[✓] IntelliJ IDEA Community Edition (version 2017.2)
    • Flutter plugin version 15.1
    • Dart plugin version 172.3317.48

[✓] IntelliJ IDEA Ultimate Edition (version 2017.1.5)
    • Flutter plugin version 15.1
    • Dart plugin version 171.4694.29

[✓] Connected devices
    • Android SDK built for x86 • emulator-5554                        • android-x86 • Android 8.0.0 (API 26) (emulator)
    • iPhone 7                  • 458BC4FE-8205-4369-8718-193B9FC88C8B • ios         • iOS 10.3 (simulator)

[eseidelGoogle]

Is this iOS only? It works on Android? If so I suspect it's that Roboto Condensed exists on the Android system and not on iOS (so you'd have to bundle it in your app)

[eseidelGoogle]

https://fonts.google.com/specimen/Roboto+Condensed is a reference image

[branflake2267]

The screenshot above isn't any good because the fontweight is shifting the letters.

I'm using the included material fonts. I'm expecting when I use the included material fonts it doesn't matter which system I'm on, and the fonts should change accordingly. In this screenshot the bottom section labeled Roboto Condensed should look different, yet it looks exactly the same.

This screenshot and code build doesn't add style which shifts the letters. Instead condensed should include more letters per line.

Based on Google fonts, you can tell when you look at the R and letters per line.

import 'package:flutter/material.dart';

const String letters = "​‌A​‌B​‌C​‌Ć​‌Č​‌D​‌Đ​‌E​‌F​‌G​‌H​‌I​‌J​‌K​‌L​‌M​‌N​‌O​‌P​‌Q​‌R​‌S​‌Š​‌T​‌U​‌V​‌W​‌X​‌Y​‌Z​‌Ž​‌a​‌b​‌c​‌č​‌ć​‌d​‌đ​‌e​‌f​‌g​‌h​‌i​‌j​‌k​‌l​‌m​‌n​‌o​‌p​‌q​‌r​‌s​‌š​‌t​‌u​‌v​‌w​‌x​‌y​‌z​‌ž​‌А​‌Б​‌В​‌Г​‌Ґ​‌Д​‌Ђ​‌Е​‌Ё​‌Є​‌Ж​‌З​‌Ѕ​‌И​‌І​‌Ї​‌Й​‌Ј​‌К​‌Л​‌Љ​‌М​‌Н​‌Њ​‌О​‌П​‌Р​‌С​‌Т​‌Ћ​‌У​‌Ў​‌Ф​‌Х​‌Ц​‌Ч​‌Џ​‌Ш​‌Щ​‌Ъ​‌Ы​‌Ь​‌Э​‌Ю​‌Я​‌а​‌б​‌в​‌г​‌ґ​‌д​‌ђ​‌е​‌ё​‌є​‌ж​‌з​‌ѕ​‌и​‌і​‌ї​‌й​‌ј​‌к​‌л​‌љ​‌м​‌н​‌њ​‌о​‌п​‌р​‌с​‌т​‌ћ​‌у​‌ў​‌ф​‌х​‌ц​‌ч​‌џ​‌ш​‌щ​‌ъ​‌ы​‌ь​‌э​‌ю​‌я​‌Α​‌Β​‌Γ​‌Δ​‌Ε​‌Ζ​‌Η​‌Θ​‌Ι​‌Κ​‌Λ​‌Μ​‌Ν​‌Ξ​‌Ο​‌Π​‌Ρ​‌Σ​‌Τ​‌Υ​‌Φ​‌Χ​‌Ψ​‌Ω​‌α​‌β​‌γ​‌δ​‌ε​‌ζ​‌η​‌θ​‌ι​‌κ​‌λ​‌μ​‌ν​‌ξ​‌ο​‌π​‌ρ​‌σ​‌τ​‌υ​‌φ​‌χ​‌ψ​‌ω​‌ά​‌Ά​‌έ​‌Έ​‌έ​‌Ή​‌ί​‌ϊ​‌ΐ​‌Ί​‌ό​‌Ό​‌ύ​‌ΰ​‌ϋ​‌Ύ​‌Ϋ​‌Ώ​‌Ă​‌Â​‌Ê​‌Ô​‌Ơ​‌Ư​‌ă​‌â​‌ê​‌ô​‌ơ​‌ư​‌1​‌2​‌3​‌4​‌5​‌6​‌7​‌8​‌9​‌0​‌‘​‌?​‌’​‌“​‌!​‌”​‌(​‌%​‌)​‌[​‌#​‌]​‌{​‌@​‌}​‌/​‌&​‌<​‌-​‌+​‌÷​‌×​‌=​‌>​‌®​‌©​‌\$​‌€​‌£​‌¥​‌¢​‌:​‌;​‌,​‌.​‌*";

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Fonts',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new FontsPage(),
    );
  }
}

class FontsPage extends StatefulWidget {
  @override
  _FontsPageState createState() => new _FontsPageState();
}

class _FontsPageState extends State<FontsPage> {
  @override
  Widget build(BuildContext context) {
    var robotoContainer = new Container(
      child: new Column(
        children: <Widget>[
          new Text(
            "Roboto",
          ),
          new Text(
            letters,
            textAlign: TextAlign.center,
            style: new TextStyle(
              fontFamily: "Roboto",
              fontSize: 13.0,
            ),
          ),
        ],
      ),
      margin: const EdgeInsets.all(10.0),
      padding: const EdgeInsets.all(10.0),
      decoration: new BoxDecoration(
        color: Colors.grey.shade200,
        borderRadius: new BorderRadius.all(new Radius.circular(5.0)),
      ),
    );

    var robotoCondensedContainer = new Container(
      child: new Column(
        children: <Widget>[
          new Text(
            "Roboto Condensed",
          ),
          new Text(
            letters,
            textAlign: TextAlign.center,
            style: new TextStyle(
              fontFamily: "RobotoCondensed",
              fontSize: 13.0,
            ),
          ),
        ],
      ),
      margin: const EdgeInsets.all(10.0),
      padding: const EdgeInsets.all(10.0),
      decoration: new BoxDecoration(
        color: Colors.grey.shade200,
        borderRadius: new BorderRadius.all(new Radius.circular(5.0)),
      ),
    );

    String icons = "";

    // https://material.io/icons/#ic_accessible
    // accessible: &#xE914; or 0xE914 or E914
    icons += "\u{E914}";

    // https://material.io/icons/#ic_android
    // anroid: &#xE859; or 0xE859; or E859
    icons += "\u{E859}";

    // https://material.io/icons/#ic_fingerprint
    // fingerprint: &#xE90D; or 0xE90D; or E90D;
    icons += "\u{E90D}";

    var materialIconsContainer = new Container(
      child: new Column(
        children: <Widget>[
          new Text(
            "Material Icons",
          ),
          new Text(
            icons,
            textAlign: TextAlign.center,
            style: new TextStyle(
              inherit: false,
              fontFamily: "MaterialIcons",
              color: Colors.black,
              fontStyle: FontStyle.normal,
              fontSize: 64.0,
            ),
          ),
        ],
      ),
      margin: const EdgeInsets.all(10.0),
      padding: const EdgeInsets.all(10.0),
      decoration: new BoxDecoration(
        color: Colors.grey.shade200,
        borderRadius: new BorderRadius.all(new Radius.circular(5.0)),
      ),
    );

    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Included Material Design Fonts"),
      ),
      body: new ListView(
        children: <Widget>[
          robotoContainer,
          robotoCondensedContainer,
          materialIconsContainer,
        ],
      ),
    );
  }
}

Here is the android:

[branflake2267]

I forgot to include the included fonts yaml.
https://github.com/flutter/flutter/blob/master/packages/flutter_tools/schema/material_fonts.yaml

[Hixie]

What is your pubspec.yaml? Do you ship the fonts with your app?

On iOS, as far as I'm aware, Roboto is unavailable unless you provide it manually.
On Android, Roboto should be available by default but I don't know if Roboto Condensed is.

[branflake2267]

I have the default generated pubsec.yaml with material enabled. I have the impression that material design should be including the material fonts in the manifest. If that's incorrect, I'll have to rewrite the custom-fonts.md docs. :)

Are these fonts included with Material Design?
https://github.com/flutter/flutter/blob/master/packages/flutter_tools/schema/material_fonts.yaml

It looks like they get included here:
https://github.com/flutter/flutter/blob/master/packages/flutter_tools/lib/src/asset.dart#L196

pubsec.yaml

name: flontser
description: A new Flutter project.

dependencies:
  flutter:
    sdk: flutter

# For information on the generic Dart part of this file, see the
# following page: https://www.dartlang.org/tools/pub/pubspec

# The following section is specific to Flutter.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the Icons class.
  uses-material-design: true

[eturk1]

Also having this challenge on Android.
Am able to include my own fonts in pubspec.yaml, display those fontFamily, but using 'RobotoCondensed' for fontFamily is ignored.

Note: specifying a non-existent font doesn't throw any exception that I'm aware of.
ex= fontFamily: 'no-font-here', just defaults to Roboto on Android 7.
so maybe RobotoCondensed is just being ignored and OS's sans-serif being displayed for all matched fontFamily strings?

[eturk1]

I downloaded and added the fonts to pubspec.yaml as "Roboto-Condensed". Only way I could figure to get these fonts.

[jason-simmons]

The Roboto fonts are no longer included via the uses-material-design flag in pubspec.yaml. If an app needs these fonts, then they should be added as assets similar to other custom fonts.

Updated the documentation to reflect this.

[eturk1]

thanks @jason-simmons !
that's what we were looking for

which file contains the stock included fonts? could be useful to note in this thread for future explorers

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.