[Flutter] Google 폰트 적용하기

준우·2023년 3월 6일

flutter

Flutter

목록 보기

1/1

1. 글꼴 다운로드

Google Fonts

https://fonts.google.com/

눈누

https://noonnu.cc/index
상업용으로 사용 가능한 한글 폰트 다수

2. 프로젝트 셋팅

폴더 생성 및 글꼴 이동

flutter 프로젝트 내 최상위 폴더에 assets/fonts 폴더를 만들고
그 안에 위에서 다운로드 받았던 ttf 파일을 넣어줍니다.

pubspec.yaml 수정

pubspec.yaml 60번째 줄 쪽에 주석되어있는 fonts- 부분의 주석을 풀어줍니다.(Ctrl+/)
그리고 다운로드 받은 폰트를 아래와 같이 알맞은 경로와 함께 적어줍니다.
참고로 weight값은 100 단위씩 입력 가능하며 100~900 범위 내에서만 지정할 수 있습니다.

  fonts:
    - family: Pretendard
      fonts:
        - asset: assets/fonts/Pretendard-Thin.ttf
          weight: 100
        - asset: assets/fonts/Pretendard-ExtraLight.ttf
          weight: 200
        - asset: assets/fonts/Pretendard-Light.ttf
          weight: 300
        - asset: assets/fonts/Pretendard-Regular.ttf
          weight: 400
        - asset: assets/fonts/Pretendard-Medium.ttf
          weight: 500
        - asset: assets/fonts/Pretendard-SemiBold.ttf
          weight: 600
        - asset: assets/fonts/Pretendard-Bold.ttf
          weight: 700
        - asset: assets/fonts/Pretendard-ExtraBold.ttf
          weight: 800
        - asset: fonts/Pretendard-Black.ttf
          weight: 900

3. 적용

전체 글꼴 적용

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const HomeScreen(),
      theme: ThemeData(fontFamily: 'Pretendard'),
      themeMode: ThemeMode.system,
    );
  }
}

일부 글꼴 적용

Text(
  "Test Text",
  style: TextStyle(
    fontFamily: 'Pretendard',
    fontSize: 18,
    fontWeight: FontWeight.bold,
  ),
),

종료 후 재시작!

꼭 핫로드 말고, 시뮬레이터까지 종료 후 다시 시작을 해주세요!

🤔 적용이 안된다면

pubspec.yaml 파일에 경로를 올바르게 입력했는지 확인하기.
최상위폴더에 생성한 폴더부터 시작하는 경로로 작성해야 합니다.

References

준우