[Flutter] 폰트 적용하는 법

기본으로 제공되는 폰트 말고 다른 폰트를 쓰려고 한다.

처음에 할 때 조금 헤맸어서 정리함

---

우선 원하는 폰트를 다운받기

개인적으로 눈누라는 사이트 매우 추천

 

https://noonnu.cc/

눈누

다운받을때 라이선스 확인 잘하기~~

 

나는 영덕다운체를 다운받을겨

 

다운로드 페이지로 이동 버튼을 클릭하면 각자 폰트마다 다운받을 수 있는 페이지로 이동하는데,

 

 

별다른 옵션 없이 한 번에 다운받게 돼있으면 그냥 다운받고,

이런 식으로 OTF TTF 따로따로 다운받게 돼있으면 TTF 를 다운받는다

 

한 번에 다운받아도 TTF가 포함돼 있어서 다운받은 파일 안에서 이용하면 됨

 

TTF랑 OTF 차이는 거의 없는데 일반적으로 TTF를 많이 사용하고

그래픽, 출판 인쇄 등 고해상도가 요구되는 작업을 할 때 OTF를 사용한다

 

 

다운받은 글꼴 파일을 플러터 프로젝트 assets/fonts 폴더에 복사해 준다

assets 폴더랑 fonts는 원래 없는 게 기본 상태고 그냥 새로 만들어주면 된다

플러터 자체에서 이렇게 사용하는 걸 추천해서 이왕이면  assets 폴더 이름은 임의로 바꾸지 말자

 

붙여 넣기하고 나서 밑에 pubspec.yaml 파일에 들어가서 몇 가지 작성해줘야 한다

들어가면 이런 화면 비슷하게 나올 텐데 밑에 쭉 내리다 보면 fonts가 주석처리 돼있는 걸 볼 수 있다

여기를 주석을 풀고 예시의 형태를 똑같이 맞춰서 입력해 주면 되는데 띄어쓰기 하나도 틀리면 안 된다

 

토씨 하나도 틀리면 안 됨!!!!!! 띄어쓰기 하나도 틀리면 안 됨!!!!!!!!!!

 

 

 

 

패밀리명은 아무거나 작성하면 된다

이왕이면 어디에 사용할 지에 맞춰서 작성하면 좋음

예를 들어 appbar 전용 폰트면 OnlyAppBar 이런 식으로

 

나는 테스트용이기 때문에 TEST로 작성했다

이제 글꼴을 바꾸고 싶은 Text 부분에서 TextStyle을 열고 fontFamily에서 아까 입력한 family명을 입력하면 된다.

이때 큰 따옴표 안에 입력해줘야 한다

 

이렇게 패밀리명을 입력해야 하기 때문에 아까 사용처별로 작명해 주는 게 좋다고 한 겨

이러면 끝인데, 아마 get dependence 인가 뭔가 알림이 뜰 건데 그거 get 해주면 된다.

 

 

원래 이랬던 폰트에서

 

 

이렇게 변한 걸 확인할 수 있다

끝!!!