[Flutter] 텍스트 폰트 설정하기 (Pretendard폰트)

 

 

 

 

 

 

안녕하세요. 오늘은 Flutter에서 텍스트 폰트를 설정하는 방법을 알아보겠습니다. 다양한 폰트가 존재하고 설정방법은 크게 다르지 않습니다. 이번에는 전 세계에서 가장 대중적으로 사용되는 Pretendard폰트를 적용해 보겠습니다.

 

 

 

1. 폰트 다운로드

https://cactus.tistory.com/306

Pretendard

 

해당 사이트에서 Pretendard폰트를 다운로드하여 줍니다. Pretendard폰트 말고 다른 폰트를 적용하고 싶다면 적용하고 싶은 폰트를 다운로드하여 주면 됩니다. 그 이후 적용방법은 같습니다.

 

 

 

다운로드한 뒤에 압축을 풀어주면 해당 폴더들이 나옵니다. public > static > alternative로 이동하면 Flutter에서 폰트를 적용시킬 파일인. ttf파일을 확인할 수 있습니다.

 

 

 

 

2. 프로젝트에 폰트 가져오기

 

 

프로젝트 assets폴더 하위에 fonts폴더를 만들어 줍니다. 그리고 위에서 다운로드한 글꼴의. ttf 파일을 전부 복사해서 fonts폴더에 붙여 넣어 줍니다.

 

 

 

 

 

3. 프로젝트 폰트 등록

fonts폴더에 폰트파일들을 가져왔으면 프로젝트에 등록시켜줘야 합니다. 이미지를 등록시켜 주는 방법과 유사합니다.

 

 

pubspec 파일에 사진상 77번째 코드를 보면 fonts를 설정하는 주석으로 된 예시가 있습니다. 해당 예시처럼 아까 가져온 폰트를 등록시켜줘야 합니다.

 

  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: assets/fonts/Pretendard-Black.ttf
          weight: 900

 

해당코드를 아래와 같이 복사해서 넣으시면 됩니다. 주의할 점은 코드 들여 쓰기를 사진과 같이 잘 맞춰야 합니다. 그리고 pubget을 해줍니다.

 

 

 

 

4. 폰트 사용하기

        Text(
          "Hello",
          style: TextStyle(
            fontFamily: "Pretendard",
            fontWeight: FontWeight.w500,
          ),
        );

 

위에서 pubspec파일에 등록한 fontFamily 이름을 넣어주고 fontWeight은 본인의 텍스트에 맞게 설정해 주시면 됩니다.

하지만 이렇게 일일이 TextStyle을 설정하기에는 너무 번거로우니 앱의 전체적인 텍스트 스타일을 Pretendard로 맞춰주겠습니다.

 

 

 

5.  앱 기본폰트 변경

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        fontFamily: "Pretendard"
      ),
      home: Scaffold(
        body: Center(
          child: Text("안녕하세요",),
        ),
      ),
    );
  }
}

 

 해당 코드처럼 MaterialApp theme 옵션에 fontFamily를 설정해 주시면 앱의 모든 텍스트에 설정한 Pretendard가 적용됩니다. 만약에 다른 폰트를 설정하고 싶으면 해당 부분에 그 폰트를 설정해 주면 되겠죠?