Usar una fuente personalizada

Aunque Android e iOS ofrecen fuentes del sistema de alta calidad, los diseñadores quieren soporte para fuentes personalizadas. Es posible que tengas una fuente personalizada creada por un diseñador, o tal vez hayas descargado una fuente de Google Fonts.

Una familia tipográfica (typeface) es el conjunto de glifos o formas que componen un estilo de letra determinado. Una fuente es una representación de esa familia tipográfica con un peso o variación específicos. Roboto es una familia tipográfica y Roboto Bold es una fuente.

Flutter te permite aplicar una fuente personalizada a toda una aplicación o a Widgets individuales. Esta receta crea una aplicación que utiliza fuentes personalizadas con los siguientes pasos.

1. Elige tus fuentes.
2. Importa los archivos de fuentes.
3. Declara la fuente en el pubspec.
4. Establece una fuente como la predeterminada.
5. Usa una fuente en un Widget específico.

No necesitas seguir cada paso a medida que avanzas. La guía ofrece archivos de ejemplo completados al final.

Tu elección de fuente debería ser más que una preferencia. Considera qué formatos de archivo funcionan con Flutter y cómo la fuente podría afectar a las opciones de diseño y al rendimiento de la aplicación.

Flutter admite los siguientes formatos de fuente:

• Colecciones de fuentes OpenType: .ttc
• Fuentes TrueType: .ttf
• Fuentes OpenType: .otf

Flutter no admite fuentes en el formato Web Open Font Format, .woff y .woff2, en plataformas de escritorio.

Pocas fuentes coinciden en qué tipo de archivo de fuente es o cuál utiliza menos espacio. La diferencia clave entre los tipos de archivos de fuente radica en cómo el formato codifica los glifos en el archivo. La mayoría de los archivos de fuentes TrueType y OpenType tienen capacidades similares, ya que se copiaron entre sí a medida que los formatos y las fuentes mejoraban con el tiempo.

La fuente que debes usar depende de las siguientes consideraciones.

• ¿Cuánta variación necesitas para las fuentes en tu aplicación?
• ¿Qué tamaño de archivo puedes aceptar que utilicen las fuentes en tu aplicación?
• ¿Cuántos idiomas necesitas admitir en tu aplicación?

Investiga qué opciones ofrece una fuente determinada, como más de un peso o estilo por archivo de fuente, capacidad de fuente variable, la disponibilidad de múltiples archivos de fuente para múltiples pesos de fuente, o más de un ancho por fuente.

Elige el tipo de letra o la familia tipográfica que satisfaga las necesidades de diseño de tu aplicación.

Para trabajar con una fuente, importa sus archivos de fuente a tu proyecto de Flutter.

Para importar archivos de fuentes, realiza los siguientes pasos.

1. Si es necesario, para que coincida con los pasos restantes de esta guía, cambia el nombre de tu aplicación Flutter a custom_fonts.

   $ mv /path/to/my_app /path/to/custom_fonts
   

   content_copy

2. Navega a la raíz de tu proyecto de Flutter.

   $ cd /path/to/custom_fonts
   

   content_copy

3. Crea un directorio fonts en la raíz de tu proyecto de Flutter.

   $ mkdir fonts
   

   content_copy

4. Mueve o copia los archivos de fuentes en una carpeta fonts o assets en la raíz de tu proyecto de Flutter.

   $ cp ~/Downloads/*.ttf ./fonts
   

   content_copy

La estructura de carpetas resultante debería ser similar a la siguiente:

custom_fonts/
|- fonts/
  |- Raleway-Regular.ttf
  |- Raleway-Italic.ttf
  |- RobotoMono-Regular.ttf
  |- RobotoMono-Bold.ttf

Después de descargar una fuente, incluye una definición de fuente en el archivo pubspec.yaml. Esta definición de fuente también especifica qué archivo de fuente debe utilizarse para representar un peso o estilo determinado en tu aplicación.

Para añadir archivos de fuentes a tu aplicación Flutter, completa los siguientes pasos.

1. Abre el archivo pubspec.yaml en la raíz de tu proyecto de Flutter.

   $ vi pubspec.yaml
   

   content_copy

2. Pega el siguiente bloque YAML después de la declaración flutter.

   yaml

     fonts:
       - family: Raleway
         fonts:
           - asset: fonts/Raleway-Regular.ttf
           - asset: fonts/Raleway-Italic.ttf
             style: italic
       - family: RobotoMono
         fonts:
           - asset: fonts/RobotoMono-Regular.ttf
           - asset: fonts/RobotoMono-Bold.ttf
             weight: 700
   

   content_copy

Este archivo pubspec.yaml define el estilo itálica para la familia tipográfica Raleway como el archivo de fuente Raleway-Italic.ttf. Cuando estableces style: TextStyle(fontStyle: FontStyle.italic), Flutter intercambia Raleway-Regular con Raleway-Italic.

El valor family establece el nombre de la familia tipográfica. Utilizas este nombre en la propiedad fontFamily de un objeto TextStyle.

El valor de un asset es una ruta relativa desde el archivo pubspec.yaml al archivo de fuente. Estos archivos contienen los contornos de los glifos de la fuente. Al compilar la aplicación, Flutter incluye estos archivos en el asset bundle de la aplicación.

Diferentes familias tipográficas implementan los archivos de fuentes de diferentes maneras. Si necesitas una familia tipográfica con una variedad de pesos y estilos de fuente, elige e importa los archivos de fuentes que representen esa variedad.

Cuando importas un archivo de fuente que no incluye múltiples fuentes en su interior ni capacidades de fuente variable, no utilices las propiedades style o weight para ajustar cómo se muestran. Si utilizas esas propiedades en un archivo de fuente normal, Flutter intentará simular el aspecto. El resultado visual será bastante diferente al de utilizar el archivo de fuente correcto.

Flutter no deduce el peso o el estilo de una fuente a partir del nombre de su archivo. Para usar un peso o estilo específico, debes declarar explícitamente la propiedad weight o style para ese archivo de fuente en tu pubspec.yaml.

La propiedad weight especifica el peso de los contornos en el archivo como un número entero múltiplo de 100, entre 100 y 900. Estos valores corresponden a FontWeight y se pueden utilizar en la propiedad fontWeight de un objeto TextStyle.

En el archivo pubspec.yaml que se muestra en esta guía, definiste RobotoMono-Bold como el peso 700 de la familia tipográfica. Para usar la fuente RobotoMono-Bold que añadiste a tu aplicación, establece fontWeight en FontWeight.w700 en tu Widget TextStyle.

Si no hubieras añadido RobotoMono-Bold a tu aplicación y declarado su peso, Flutter intentará hacer que la fuente normal se vea en negrita. El texto podría parecer algo más oscuro.

No puedes usar la propiedad weight para anular el peso de la fuente. No puedes configurar RobotoMono-Bold con ningún otro peso que no sea 700. Si estableces TextStyle(fontFamily: 'RobotoMono', fontWeight: FontWeight.w900), la fuente mostrada aún se representará con la negrita que tenga RobotoMono-Bold.

La propiedad style especifica si los glifos del archivo de fuente se muestran como italic o normal. Estos valores corresponden a FontStyle. Puedes usar estos estilos en la propiedad fontStyle de un objeto TextStyle.

En el archivo pubspec.yaml que se muestra en esta guía, definiste Raleway-Italic en el estilo italic. Para usar la fuente Raleway-Italic que añadiste a tu aplicación, establece style: TextStyle(fontStyle: FontStyle.italic). Flutter intercambia Raleway-Regular por Raleway-Italic al renderizar.

Si no hubieras añadido Raleway-Italic a tu aplicación y declarado su estilo, Flutter intentará hacer que la fuente regular se vea itálica. El texto podría parecer inclinado hacia la derecha.

No puedes usar la propiedad style para anular los glifos de una fuente. Si estableces TextStyle(fontFamily: 'Raleway', fontStyle: FontStyle.normal), la fuente mostrada aún se representará como itálica. El estilo regular de una fuente itálica es itálica.

Para aplicar una fuente al texto, puedes establecer la fuente como la predeterminada de la aplicación en su theme.

Para establecer una fuente predeterminada, configura la propiedad fontFamily en el theme de la aplicación. Haz coincidir el valor de fontFamily con el nombre family declarado en el archivo pubspec.yaml.

El resultado sería similar al siguiente código.

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

Para aprender más sobre los temas (themes), consulta la receta Using Themes to share colors and font styles.

Para aplicar la fuente a un Widget específico como un Widget Text, proporciona un TextStyle al Widget.

Para esta guía, intenta aplicar la fuente RobotoMono a un solo Widget Text. Haz coincidir el valor de fontFamily con el nombre family declarado en el archivo pubspec.yaml.

El resultado sería similar al siguiente código.

child: Text(
  'Roboto Mono sample',
  style: TextStyle(fontFamily: 'RobotoMono'),
),

Descarga los archivos de fuentes Raleway y RobotoMono desde Google Fonts.

1. Abre el archivo pubspec.yaml en la raíz de tu proyecto de Flutter.

   $ vi pubspec.yaml
   

   content_copy

2. Reemplaza su contenido con el siguiente YAML.

   yaml

   name: custom_fonts
   description: An example of how to use custom fonts with Flutter
   ​
   dependencies:
     flutter:
       sdk: flutter
   ​
   dev_dependencies:
     flutter_test:
       sdk: flutter
   ​
   flutter:
     fonts:
       - family: Raleway
         fonts:
           - asset: fonts/Raleway-Regular.ttf
           - asset: fonts/Raleway-Italic.ttf
             style: italic
       - family: RobotoMono
         fonts:
           - asset: fonts/RobotoMono-Regular.ttf
           - asset: fonts/RobotoMono-Bold.ttf
             weight: 700
     uses-material-design: true
   

   content_copy

1. Abre el archivo main.dart en el directorio lib/ de tu proyecto de Flutter.

   $ vi lib/main.dart
   

   content_copy

2. Reemplaza su contenido con el siguiente código de Dart.

   dart

   import 'package:flutter/material.dart';
   ​
   void main() => runApp(const MyApp());
   ​
   class MyApp extends StatelessWidget {
     const MyApp({super.key});
   ​
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'Custom Fonts',
         // Set Raleway as the default app font.
         theme: ThemeData(fontFamily: 'Raleway'),
         home: const MyHomePage(),
       );
     }
   }
   ​
   class MyHomePage extends StatelessWidget {
     const MyHomePage({super.key});
   ​
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         // The AppBar uses the app-default Raleway font.
         appBar: AppBar(title: const Text('Custom Fonts')),
         body: const Center(
           // This Text widget uses the RobotoMono font.
           child: Text(
             'Roboto Mono sample',
             style: TextStyle(fontFamily: 'RobotoMono'),
           ),
         ),
       );
     }
   }
   

   content_copy

La aplicación de Flutter resultante debería mostrar la siguiente pantalla.