플러터 폰트 적용

flutter font

 

일단 폰트를 다운 받는다.

구글에서 제공하는 폰트는 하단의 사이트에서 다운 가능

https://fonts.google.com/

상업 사용가능한 글꼴이 많은 눈누도 좋다.

https://noonnu.cc/index

 

어디서 다운 받든지 받기 전에 저작권 확인하기

 

OTF TTF 둘다 적용되니 

글꼴을 디자인용으로 수정할 것 아니면 더 가벼운 TTF로 다운 받는게 좋아보임

 

 

 

안드로이드 스튜디오을 이용하여

프로젝트 파일 루트 부분에

assets / fonts 폴더를 만든 후

fonts 폴더 안에 다운 받은 글꼴 파일을 옮겨 넣는다.

 

 

 

assets / fonts 폴더 아니여도

fonts 폴더나 프로젝트 파일 어딘가에 넣으면 되지만 

플러터에서 추천하는 위치에 넣는 것이 추후 자동으로 파일 위치 잡아주는 등의 상황에서 버그를 피할 수 있는 방법 인듯?

 

 

 

파일을 넣었으면 pubspec.yaml 파일을 열고 

주석처리가 되어 있는 fonts 부분의 글에 주석을 푼다.

 

 

# 을 지우면 되는데

 

여기서 조심해야할 점은  # 외에 띄어쓰기를 지우면 버그로 인식하니 띄어쓰기는 유지할 것

 

family 부분에 나중에 코드에서 사용할 닉네임 이름을 자유롭게 넣고, 

asset 부분에 폴더와 파일 이름을 아까 옮겨 넣은 fonts 파일 이름에 맞게 넣고 

weight 부분에 굵기에 맞게 숫자를 넣는다. 

 

From the docs we get this list of constants:

w100 Thin, the least thick
w200 Extra-light
w300 Light
w400 Normal / regular / plain
w500 Medium
w600 Semi-bold
w700 Bold
w800 Extra-bold
w900 Black, the most thick

cf. https://stackoverflow.com/questions/53687104/flutter-not-picking-custom-fonts-based-on-fontweight

 

숫자는 임의로 넣어도 되지만 중복되어서는 안되는 것 같다.

이 숫자는 나중에 코드에서 font family 를 닉네임을 이용해 불러왔을 때

패밀리에 등록된 저 많은 폰트 중 어떤 것을 불러올 것인가 결정하는 숫자로,

Text 함수에 weight 를 따로 등록하지 않으면 적용된 family  의 폰트 중 weight  가 400인 폰트를 자동으로 적용하는 것 같으며

만약에  Text 함수에 특정 weight를 입력하면 해당 weight의 asset 폰트를 보여주는 것 같다.

패밀리에 폰트 하나면 weight 안써도 됨

 

family 과 하단의 asset weight 부분은 yaml 파일 안에 여러개 있어도 됨

닉네임만 다르게 한다면

닉네임으로 상황 별로 다른 family를 등록해서 써도 됨

 

 

 

 

 

폰트 적용

 

 

글로벌로 전역 적용 

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter',
      theme: ThemeData(
        fontFamily: 'Noto_Serif_KR',
        primarySwatch: Colors.blueGrey,
      ),
      home: HomePage(),
    );
  }
}

 

fontFamily 부분에 yaml 파일에 등록한 family 폰트의 닉네임을 쓴다. 

 

 

특정 텍스트 함수에 적용하기

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'text',
          style: TextStyle(fontFamily: 'NotoSans'),
        ),
      ),
    );
  }

텍스트 함수의 style: TextStyle 안에 

fontFamily: 'NotoSans' 을 넣어서 등록한 폰트 패밀리를 여기만 적용 가능