Custom Fonts in Your Flutter App

[Ko]

 

Custom Fonts in Your Flutter App

 

 - Cactus의 font를 인터넷에서 다운로드 받은 custom font로 바꾸어 봅시다.

 - custom fonts 다운로드

https://fonts.google.com/

 - pacifico font를 다운로드

 - 프로젝트 폴더에 images 폴더를 생성해서 다운로드 받은 font를 넣고, pubspec.yaml의 fonts에 등록 --> 폰트 등록시 indentation에 주의해야 하며, pubspec.yaml에 원래 있던 주석 또는 flutter 공식 사이트의 custom font 적용 예시 code를 복사해서 사용하자.

 - fonts 등록 후에는 app을 중지-재실행하자. (핫리로딩만으로는 image, font 등이 적용되지 않음.)

 - 다른 font도 다운로드해서 바로 밑의 글자에 적용하자 (font : Source Sans Pro)

 - pubspec.yaml 파일의 Fonts에 등록한 family명과 main.dart의 fontFamily에 사용하는 명칭은 정확하게 일치해야 함.

 - final code

              Text(

                'Flutter Developer',

                style: TextStyle(

                  fontFamily: 'Source Sans Pro',

                  fontSize: 20.0,

//                  color: Colors.teal[100],

                  color: Colors.teal.shade100,

                  letterSpacing: 2.5,

                  fontWeight: FontWeight.bold,

                ),

 

==================================================================

 

[En]

 

Custom Fonts in Your Flutter App

 

 - Download custom fonts
https://fonts.google.com/
 - Download pacifico font
 - Create the images folder in the project folder, put the downloaded font, register in the fonts of pubspec.yaml-> pay attention to indentation when registering the font, and apply the original comment in the pubspec.yaml or custom font of flutter official site example code Let's copy and use.
 - After registering fonts, stop and restart the app. (Images, fonts, etc. are not applied only by hot reloading.)
 - Download another font and apply it directly to the text below (font: Source Sans Pro)
 - The family name registered in Fonts of pubspec.yaml file and the name used for fontFamily of main.dart must match exactly.

 - final code

              Text(

                'Flutter Developer',

                style: TextStyle(

                  fontFamily: 'Source Sans Pro',

                  fontSize: 20.0,

//                  color: Colors.teal[100],

                  color: Colors.teal.shade100,

                  letterSpacing: 2.5,

                  fontWeight: FontWeight.bold,

                ),