[flutter] 플러터 폰트 적용하기 (feat. 구글 로그인)

 

Roboto - Google Fonts

구글 로그인을 구현할때 가이드라인이 있습니다. [구글 - Google's Sign-In Branding Guidelines]
해당 가이드라인에서 구글은 Roboto 폰트를 요구합니다.

가이드 라인도 맞출겸 이번엔 플러터에서 폰트를 적용하는 두 가지 방법에 대해 알아보겠습니다.

1. Google_fonts 패키지 사용

1. 구글 폰트 패키지 설치 [pub.dev - google_fonts] 
2. flutter pub add google_fonts

 

2. 텍스트 스타일에서 GoogleFonts. 를 활용하여 호출

import 'package:google_fonts/google_fonts.dart';

Text(
  "Google Login",
  style: GoogleFonts.roboto(color: Colors.white),
),

 

3. 기본 폰트를 해당 폰트로 변경:  MaterialApp 에서 Theme 수정

return MaterialApp(
  title: '나만의 폰트',
  theme: ThemeData(fontFamily: GoogleFonts.roboto().fontFamily,),
  home: MyHomePage(),
);

 

 

2.  폰트 파일을 활용한 구현 

1. 디자인 사이트에서 폰트를 다운로드 [ 구글 공식 디자인 사이트 - Roboto Font ] 
2. ttf 폰트 파일을 플러터 프로젝트 디렉토리로 이동 /fonts/[font-패밀리명] 
3. pubspec.yaml - fonts에 아래와 같이 호출

  fonts:
    - family: Roboto
      fonts:
        - asset: fonts/Roboto/Roboto-Medium.ttf
        - asset: fonts/Roboto/Roboto-Light.ttf
        - asset: fonts/Roboto/Roboto-Bold.ttf

 

4. 사용할 위젯에서 위 pubspec.yaml 에서 사용한 폰트패밀리 입력

child: Text(
  'Roboto sample',
  style: TextStyle(fontFamily: 'Roboto'),
),

 

5. 기본 폰트를 해당 폰트로 변경: MaterialApp 에서 Theme 수정

return MaterialApp(
  title: '나만의 폰트',
  theme: ThemeData(fontFamily: Roboto'),
  home: MyHomePage(),
);

 

패키지 혹은 폰트 파일을 사용하는 방법, 두가지 방법 중 필요에 따라 사용하시면 되겠습니다.

links: [구글 공식 fonts 쿡북 Use a custom font | Flutter]