flutter 프로젝트에 커스텀 폰트(font) 적용하기

플러터 프로젝트에 원하는 프로젝트 적용하기

본 글에서는 네이버 나눔글꼴을 플러터(flutter) 프로젝트에 적용하는 방법에 대해 소개합니다.

• https://hangeul.naver.com/font/nanum

네이버 글꼴 모음

 

물론 어떤 폰트를 사용하더라도 적용하는 방법은 동일합니다.

 

우선, 적용할 폰트를 다운로드 받은 뒤에 프로젝트에 옮깁니다. 본 글에서는 프로젝트 root에 assets/fonts 라는 디렉토리를 생성하도록 하겠습니다.

그리고, 해당 폴더에 다운로드 받은 폰트를 넣습니다.

다운로드 받은 폰트를 assets/fonts 디렉토리에 옮김

 

pubspec.yaml 폰트 설정

이미지든 폰트든 리소스 파일을 사용하려면 pubspec.yaml 파일에 정의해햐 합니다.

 

플러터 프로젝트 설정 파일 pubspec.yaml 파일 하단에 적용한 fonts 의 디렉토리 위치와 폰트 굵기에 따른 폰트 파일을 매핑합니다.
여기서 주의할 점은 yaml 파일은 파이썬과 같이 들여쓰기(indent)가 중요하므로 들여쓰기가 제대로 들어갔는지 확인해야 합니다.

flutter:
  # ...

  fonts:
    - family: NanumSquareRound
      fonts:
        - asset: assets/fonts/NanumSquareRoundOTFEB.otf
          weight: 800
        - asset: assets/fonts/NanumSquareRoundOTFB.otf
          weight: 700
        - asset: assets/fonts/NanumSquareRoundOTFR.otf
          weight: 400
        - asset: assets/fonts/NanumSquareRoundOTFL.otf
          weight: 300

 

사용할 폰트 명시

이제 프로젝트 코드 내에서 위에서 설정한 폰트를 사용할 수 있습니다.

 

MaterialApp > theme 에 ThemeData를 추가하고, ThemeData > fontFamily 에 사용할 폰트를 추가합니다.
여기에 추가하는 폰트 이름은 pubspec.yaml 파일에서 명시한 fonts > family 이름과 동일해야합니다.

 

본 글에서는 NanumSquareRound 로 명시했으므로 동일하게 ThemeData > fontFamily 에 넣어줍니다.

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        fontFamily: "NanumSquareRound",
        useMaterial3: true,
      ),
      // ...
    );
  }
}

 

프로젝트를 실행해보면 폰트가 적용된 것을 확인 할 수 있습니다.

 

같이 보면 좋은 글

폰트 두께에 대해 궁금한 점이 있다면 아래 링크를 참고해주세요.

2023.10.16 - [FE/WEB] - 웹 폰트 굵기(font weight)에 대해서

 

폰트 모음 사이트

제가 폰트를 찾을때 자주 참고하는 사이트를 추천드립니다.

• https://www.sandollcloud.com/
• https://noonnu.cc/
• https://www.cookierunfont.com/

쿠키런 폰트

눈누

산돌구름