[Flutter] 폰트 적용 하기

1. 폰트 다운로드

Pretendard
여기어때 잘난체

2. 프로젝트 파일에 tft 또는 otf 파일 추가

otf 확장자
Open Type Font의 약자로 1990년 마이크로소프트와 어도비가 공동으로 개발한 폰트 저장 형식으로 OTF는 그래픽 출력에 유리한 확장자 입니다.

tft 확장자
True Type Font의 약자로 1980년 애플에서 만든 폰트 저장 형식으로 보편화된 문서를 작성할때 쓰이는 확장자 입니다.

project > assets > fonts에 tft 또는 otf 파일 추가

3. pubspec.yaml 파일 수정

fonts:
    - family: Pretendard
      fonts:
        - asset: assets/fonts/Pretendard/Pretendard-Thin.otf
          weight: 100
        - asset: assets/fonts/Pretendard/Pretendard-ExtraLight.otf
          weight: 200
        - asset: assets/fonts/Pretendard/Pretendard-Light.otf
          weight: 300
        - asset: assets/fonts/Pretendard/Pretendard-Regular.otf
          weight: 400
        - asset: assets/fonts/Pretendard/Pretendard-Medium.otf
          weight: 500
        - asset: assets/fonts/Pretendard/Pretendard-SemiBold.otf
          weight: 600
        - asset: assets/fonts/Pretendard/Pretendard-Bold.otf
          weight: 700
        - asset: assets/fonts/Pretendard/Pretendard-ExtraBold.otf
          weight: 800
        - asset: assets/fonts/Pretendard/Pretendard-Black.otf
          weight: 900
    - family: Jalnan
      fonts:
        - asset: assets/fonts/Jalnan/JalnanOTF.otf

4. 폰트 사용 방법

1) 앱 기본 폰트 변경

import 'package:flutter/material.dart';
import 'package:flutter_velog/select_screen.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();

  runApp(
    MaterialApp(
      theme: ThemeData(fontFamily: 'Pretendard'), //앱 기본 폰트 변경
      debugShowCheckedModeBanner: false,
      home: const SelectWidget(),
    ),
  );
}

2) 특정 텍스트 폰트 변경

import 'package:flutter/material.dart';
import 'package:gap/gap.dart';

class FontWidget extends StatelessWidget {
  const FontWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Font'),
      ),
      body: const Column(
        children: [
          Text(
            '프리텐다드',
            style: TextStyle(
              fontFamily: 'Pretendard',
              fontWeight: FontWeight.w100,
            ),
          ),
          Text(
            '안녕하세요 우루성 입니다.',
            style: TextStyle(
              fontFamily: 'Pretendard',
              fontWeight: FontWeight.w100,
            ),
          ),
          Text(
            '안녕하세요 우루성 입니다.',
            style: TextStyle(
              fontFamily: 'Pretendard',
              fontWeight: FontWeight.w200,
            ),
          ),
          Text(
            '안녕하세요 우루성 입니다.',
            style: TextStyle(
              fontFamily: 'Pretendard',
              fontWeight: FontWeight.w300,
            ),
          ),
          Text(
            '안녕하세요 우루성 입니다.',
            style: TextStyle(
              fontFamily: 'Pretendard',
              fontWeight: FontWeight.w400,
            ),
          ),
          Text(
            '안녕하세요 우루성 입니다.',
            style: TextStyle(
              fontFamily: 'Pretendard',
              fontWeight: FontWeight.w500,
            ),
          ),
          Text(
            '안녕하세요 우루성 입니다.',
            style: TextStyle(
              fontFamily: 'Pretendard',
              fontWeight: FontWeight.w600,
            ),
          ),
          Text(
            '안녕하세요 우루성 입니다.',
            style: TextStyle(
              fontFamily: 'Pretendard',
              fontWeight: FontWeight.w700,
            ),
          ),
          Text(
            '안녕하세요 우루성 입니다.',
            style: TextStyle(
              fontFamily: 'Pretendard',
              fontWeight: FontWeight.w800,
            ),
          ),
          Text(
            '안녕하세요 우루성 입니다.',
            style: TextStyle(
              fontFamily: 'Pretendard',
              fontWeight: FontWeight.w900,
            ),
          ),
        ],
      ),
    );
  }
}

5. 전체 코드

import 'package:flutter/material.dart';
import 'package:gap/gap.dart';

class FontWidget extends StatelessWidget {
  const FontWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Font'),
      ),
      body: const Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Column(
                children: [
                  Text(
                    '프리텐다드',
                    style: TextStyle(
                      fontFamily: 'Pretendard',
                      fontWeight: FontWeight.w100,
                    ),
                  ),
                  Text(
                    '안녕하세요 우루성 입니다.',
                    style: TextStyle(
                      fontFamily: 'Pretendard',
                      fontWeight: FontWeight.w100,
                    ),
                  ),
                  Text(
                    '안녕하세요 우루성 입니다.',
                    style: TextStyle(
                      fontFamily: 'Pretendard',
                      fontWeight: FontWeight.w200,
                    ),
                  ),
                  Text(
                    '안녕하세요 우루성 입니다.',
                    style: TextStyle(
                      fontFamily: 'Pretendard',
                      fontWeight: FontWeight.w300,
                    ),
                  ),
                  Text(
                    '안녕하세요 우루성 입니다.',
                    style: TextStyle(
                      fontFamily: 'Pretendard',
                      fontWeight: FontWeight.w400,
                    ),
                  ),
                  Text(
                    '안녕하세요 우루성 입니다.',
                    style: TextStyle(
                      fontFamily: 'Pretendard',
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                  Text(
                    '안녕하세요 우루성 입니다.',
                    style: TextStyle(
                      fontFamily: 'Pretendard',
                      fontWeight: FontWeight.w600,
                    ),
                  ),
                  Text(
                    '안녕하세요 우루성 입니다.',
                    style: TextStyle(
                      fontFamily: 'Pretendard',
                      fontWeight: FontWeight.w700,
                    ),
                  ),
                  Text(
                    '안녕하세요 우루성 입니다.',
                    style: TextStyle(
                      fontFamily: 'Pretendard',
                      fontWeight: FontWeight.w800,
                    ),
                  ),
                  Text(
                    '안녕하세요 우루성 입니다.',
                    style: TextStyle(
                      fontFamily: 'Pretendard',
                      fontWeight: FontWeight.w900,
                    ),
                  ),
                ],
              ),
              Column(
                children: [
                  Text(
                    '기본',
                    style: TextStyle(
                      fontWeight: FontWeight.w100,
                    ),
                  ),
                  Text(
                    '안녕하세요 우루성 입니다.',
                    style: TextStyle(
                      fontWeight: FontWeight.w100,
                    ),
                  ),
                  Text(
                    '안녕하세요 우루성 입니다.',
                    style: TextStyle(
                      fontWeight: FontWeight.w200,
                    ),
                  ),
                  Text(
                    '안녕하세요 우루성 입니다.',
                    style: TextStyle(
                      fontWeight: FontWeight.w300,
                    ),
                  ),
                  Text(
                    '안녕하세요 우루성 입니다.',
                    style: TextStyle(
                      fontWeight: FontWeight.w400,
                    ),
                  ),
                  Text(
                    '안녕하세요 우루성 입니다.',
                    style: TextStyle(
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                  Text(
                    '안녕하세요 우루성 입니다.',
                    style: TextStyle(
                      fontWeight: FontWeight.w600,
                    ),
                  ),
                  Text(
                    '안녕하세요 우루성 입니다.',
                    style: TextStyle(
                      fontWeight: FontWeight.w700,
                    ),
                  ),
                  Text(
                    '안녕하세요 우루성 입니다.',
                    style: TextStyle(
                      fontWeight: FontWeight.w800,
                    ),
                  ),
                  Text(
                    '안녕하세요 우루성 입니다.',
                    style: TextStyle(
                      fontWeight: FontWeight.w900,
                    ),
                  ),
                ],
              ),
            ],
          ),
          Gap(18),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Column(
                children: [
                  Text(
                    'Pretendard',
                    style: TextStyle(
                      fontFamily: 'Pretendard',
                      fontWeight: FontWeight.w100,
                    ),
                  ),
                  Text(
                    "Hello, Im Urusung.",
                    style: TextStyle(
                      fontFamily: 'Pretendard',
                      fontWeight: FontWeight.w100,
                    ),
                  ),
                  Text(
                    "Hello, Im Urusung.",
                    style: TextStyle(
                      fontFamily: 'Pretendard',
                      fontWeight: FontWeight.w200,
                    ),
                  ),
                  Text(
                    "Hello, Im Urusung.",
                    style: TextStyle(
                      fontFamily: 'Pretendard',
                      fontWeight: FontWeight.w300,
                    ),
                  ),
                  Text(
                    "Hello, Im Urusung.",
                    style: TextStyle(
                      fontFamily: 'Pretendard',
                      fontWeight: FontWeight.w400,
                    ),
                  ),
                  Text(
                    "Hello, Im Urusung.",
                    style: TextStyle(
                      fontFamily: 'Pretendard',
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                  Text(
                    "Hello, Im Urusung.",
                    style: TextStyle(
                      fontFamily: 'Pretendard',
                      fontWeight: FontWeight.w600,
                    ),
                  ),
                  Text(
                    "Hello, Im Urusung.",
                    style: TextStyle(
                      fontFamily: 'Pretendard',
                      fontWeight: FontWeight.w700,
                    ),
                  ),
                  Text(
                    "Hello, Im Urusung.",
                    style: TextStyle(
                      fontFamily: 'Pretendard',
                      fontWeight: FontWeight.w800,
                    ),
                  ),
                  Text(
                    "Hello, Im Urusung.",
                    style: TextStyle(
                      fontFamily: 'Pretendard',
                      fontWeight: FontWeight.w900,
                    ),
                  ),
                ],
              ),
              Column(
                children: [
                  Text(
                    'Default',
                    style: TextStyle(
                      fontWeight: FontWeight.w100,
                    ),
                  ),
                  Text(
                    "Hello, Im Urusung.",
                    style: TextStyle(
                      fontWeight: FontWeight.w100,
                    ),
                  ),
                  Text(
                    "Hello, Im Urusung.",
                    style: TextStyle(
                      fontWeight: FontWeight.w200,
                    ),
                  ),
                  Text(
                    "Hello, Im Urusung.",
                    style: TextStyle(
                      fontWeight: FontWeight.w300,
                    ),
                  ),
                  Text(
                    "Hello, Im Urusung.",
                    style: TextStyle(
                      fontWeight: FontWeight.w400,
                    ),
                  ),
                  Text(
                    "Hello, Im Urusung.",
                    style: TextStyle(
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                  Text(
                    "Hello, Im Urusung.",
                    style: TextStyle(
                      fontWeight: FontWeight.w600,
                    ),
                  ),
                  Text(
                    "Hello, Im Urusung.",
                    style: TextStyle(
                      fontWeight: FontWeight.w700,
                    ),
                  ),
                  Text(
                    "Hello, Im Urusung.",
                    style: TextStyle(
                      fontWeight: FontWeight.w800,
                    ),
                  ),
                  Text(
                    "Hello, Im Urusung.",
                    style: TextStyle(
                      fontWeight: FontWeight.w900,
                    ),
                  ),
                ],
              ),
            ],
          ),
          Gap(18),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Column(
                children: [
                  Text(
                    '잘난체',
                    style: TextStyle(
                      fontFamily: 'Jalnan',
                    ),
                  ),
                  Text(
                    "안녕하세요 우루성 입니다.",
                    style: TextStyle(
                      fontFamily: 'Jalnan',
                    ),
                  ),
                ],
              ),
            ],
          ),
          Gap(18),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Column(
                children: [
                  Text(
                    'Jalnan',
                    style: TextStyle(
                      fontFamily: 'Jalnan',
                    ),
                  ),
                  Text(
                    "Hello, Im Urusung.",
                    style: TextStyle(
                      fontFamily: 'Jalnan',
                    ),
                  ),
                ],
              ),
            ],
          ),
        ],
      ),
    );
  }
}

5. 결과 화면