승상의 코딩 블로그

[Flutter] 폰트(font) 추가하기 본문

Flutter (플러터)

[Flutter] 폰트(font) 추가하기

양승상 2024. 7. 13. 21:30

폰트 적용하기

어떤 폰트를 사용하느냐에 따라 어플의 가독성이 달라진다.

폰트는 감정이나 분위기를 전달하는데 사용될 수 있다.

더 나아가 상품이나 브랜드의 아이덴티니를 형성시켜주는 요소로써 활용할 수 있다. 

 

플러터에 폰트를 추가해서 적용해보자.


폰트 다운 및 추가 방법

1. 아래 링크(구글 폰트)에서 폰트를 다운 받습니다.

https://fonts.google.com/

 

Browse Fonts - Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

폰트 다운

 

저는 Noto Sans 폰트를 다운 받았습니다.

 

2. 플러터 프로젝트에 assets/fonts 를 만든 뒤, 다운받은 폰트중에 사용할 폰트(.ttf) 를 복사합니다. 

좌. 다운받은 폰트 우.플러터 프로젝트 폰트 폴더

3. pubspec.yaml 파일에 추가한 폰트 파일에 대한 정보를 추가합니다.

pubspec.yaml 에 폰트 정보를 추가한다.

 

 💡 시뮬레이터를 재시작해야 pubspec.yaml 의 수정사항이 정상적으로 반영된다.

 

폰트 파일이 Light, Regular, Semibold 등 다양하다.

Light, Regular, Semibold 등은 플러터 내에서 Weight 로 판별된다. 

ttf 파일 내부에 weight 가 저장되어 있기 때문에, weight 를 적지 않아도 되지만 명시적으로 적어주도록 한다. 

구글 폰트에서 폰트 다운받기전 화면에서 스크롤을 내리면, 폰트 Weight 가 표기되어 있으므로 참고해서 기입한다.




사용방법

전체 앱에 폰트 적용하기

 

개별 텍스트에 폰트 적용하기

 

 

참고 - 라이센스

항상 어딘가에서 가져다 쓰는 경우, 라이센스를 잘 체크 해봐야한다. 

"Noto Sans 의 라이센스는 Open Font Lisence 이다. 

이 폰트는 인쇄, 디지털, 상업적 목적으로 제품이나 프로젝트에 적용할 수 있다.

이것은 법적인 조언이 아니며,  변호사와 라이센스 전체를 상세히 보고 상담해봐라"

Noto Sans Liscense

반응형
Comments