커스텀 폰트 사용법 완벽 가이드

Flutter는 기본적으로 Android와 iOS에서 제공하는 고품질 시스템 폰트를 사용하지만, 디자이너들이 제공한 커스텀 폰트를 사용하는 경우도 많습니다. 커스텀 폰트를 적용함으로써 앱의 UI를 더욱 풍부하게 꾸밀 수 있습니다. 이번 포스트에서는 Flutter에서 커스텀 폰트를 사용하는 방법을 단계별로 설명하겠습니다. Flutter 프로젝트에서 커스텀 폰트를 적용하는 과정을 쉽게 이해할 수 있도록 각 단계별 코드와 설명을 제공하니 참고해 주세요.

폰트 파일 선택

Flutter에서는 TrueType(.ttf), OpenType(.otf)과 같은 폰트 파일을 지원합니다. 이를 통해 다양한 스타일의 폰트를 앱에 적용할 수 있으며, 폰트 파일 형식을 선택할 때는 성능과 지원하는 언어 등을 고려해야 합니다. 주로 Google Fonts와 같은 오픈소스 폰트 사이트에서 다양한 무료 폰트를 다운로드할 수 있습니다.

폰트 파일 프로젝트에 추가하기

Flutter에서 커스텀 폰트를 사용하려면 먼저 해당 폰트 파일을 프로젝트에 포함해야 합니다. 다음은 폰트 파일을 프로젝트에 추가하는 방법입니다.

프로젝트 구조:

/custom_fonts_project
  /fonts
    /Raleway-Regular.ttf
    /RobotoMono-Bold.ttf
  /lib
    main.dart
  pubspec.yaml

1. 프로젝트 루트 디렉토리에 fonts 폴더를 만듭니다.
2. 다운로드한 폰트 파일을 fonts 폴더에 복사합니다.

mkdir fonts
cp ~/Downloads/Raleway-Regular.ttf ./fonts
cp ~/Downloads/RobotoMono-Bold.ttf ./fonts

pubspec.yaml 파일에 폰트 선언

Flutter는 앱의 리소스를 선언하는 방식으로 폰트를 로드합니다. 이를 위해 프로젝트의 pubspec.yaml 파일에 폰트를 선언해야 합니다.

pubspec.yaml에 폰트 추가:

flutter:
  fonts:
    - family: Raleway
      fonts:
        - asset: fonts/Raleway-Regular.ttf
    - family: RobotoMono
      fonts:
        - asset: fonts/RobotoMono-Bold.ttf
          weight: 700

위의 설정은 Raleway 폰트와 RobotoMono의 Bold 폰트를 정의합니다. 각각의 폰트를 사용하려면 fontFamily 속성을 통해 지정할 수 있습니다.

기본 폰트 설정

앱 전체에 커스텀 폰트를 적용하려면 ThemeData를 사용하여 전체 테마에서 기본 폰트를 설정할 수 있습니다. 아래 코드는 Raleway 폰트를 앱의 기본 폰트로 설정하는 방법을 보여줍니다.

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',
      theme: ThemeData(
        fontFamily: 'Raleway',  // 기본 폰트 설정
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Custom Fonts Example'),
      ),
      body: const Center(
        child: Text('This is Raleway font as default'),
      ),
    );
  }
}

특정 위젯에 커스텀 폰트 적용

앱 전체가 아닌 특정 텍스트 위젯에만 다른 폰트를 적용하고 싶을 때는 TextStyle을 사용하여 fontFamily 속성을 설정할 수 있습니다. 아래 코드는 RobotoMono 폰트를 특정 텍스트 위젯에 적용하는 방법을 보여줍니다.

import 'package:flutter/material.dart';

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Custom Fonts Example')),
      body: const Center(
        child: Text(
          'Roboto Mono Bold',
          style: TextStyle(
            fontFamily: 'RobotoMono',  // 특정 폰트 적용
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );
  }
}

폰트 스타일과 굵기 적용

폰트 스타일은 fontStyle과 fontWeight 속성으로 관리할 수 있습니다. pubspec.yaml 파일에서 폰트의 스타일(italic)과 굵기(weight)를 설정해 두고, 이를 코드에서 사용하면 더욱 다양한 텍스트 스타일을 적용할 수 있습니다.

스타일 적용 예시:

Text(
  'Styled Text',
  style: TextStyle(
    fontFamily: 'Raleway',
    fontStyle: FontStyle.italic,  // 기울임꼴 적용
    fontWeight: FontWeight.w700,  // 굵은 글씨 적용
  ),
)

결론

Flutter에서 커스텀 폰트를 사용하는 방법은 간단하지만, 앱의 디자인을 강화하는 강력한 도구입니다. pubspec.yaml 파일에서 폰트를 정의하고, TextStyle로 위젯에 폰트를 적용하는 과정은 Flutter의 유연한 UI 시스템 덕분에 쉽고 직관적입니다. 폰트 스타일과 굵기를 적절히 사용하여 앱의 텍스트를 더욱 매력적으로 꾸밀 수 있습니다.