Dart (Flutter)

[Flutter] How to use Google Fonts in Flutter

llHoYall 2023. 6. 30. 22:26

이번 포스팅에서는 Flutter 앱에서 구글 폰트를 사용하는 방법에 대해 살펴보겠습니다.

Add Package

pubspec.yaml 파일을 열고, google_fonts를 추가해 줍니다.

dependencies:
  flutter:
    sdk: flutter

  google_fonts: ^5.1.0

Import Google Fonts

다음으로 구글 폰트를 사용할 파일 상단에 다음과 같이 import 해줍니다.

import 'package:google_fonts/google_fonts.dart';

Setting Up for MacOS

예제를 macOS로 작성 중이라 추가로 HTTP fetching에 대한 설정이 필요합니다.

macos/Runner/DebugProfile.entitlements 파일을 열어 다음 key-value를 추가해 줍니다.

Usage

이제 다음과 같이 사용을 해 봅니다.

Text('Oswald', style: GoogleFonts.oswald()),
Text('Oswald Big', style: GoogleFonts.oswald(fontSize: 24)),
Text('NotoSans', style: GoogleFonts.notoSans(color: Colors.amber)),

기존에 Flutter에서 TextStyle을 사용하듯이 사용하면 되요.

Wrap Up

이번에는 Flutter에서  구글 폰트를 사용하는 방법에 대해 살펴보았습니다.

적절한 폰트의 사용은 앱을 좀 더 세련되어 보이게 도와주므로 꼭 필요한 기능입니다. ^^