생존코딩 홈페이지 운영비 절감으로 Flutter Web으로 재작성 중

한글 깨짐

웹페이지 로딩시 잠시동안 한글이 다 깨진다. 스샷 찍기 힘들어서 패스.

1초쯤 후에 제대로 나옴

원인

Flutter 에 한글 폰트가 없어서 그런 듯

GoogleFonts 라이브러리

여기도 한글로 된 게 없음

Noto Sans KR 폰트 설정

한글 폰트를 직접 설정하기로 함

Google Fonts 사이트에서 Noto Sans KR 폰트를 다운로드

폰트 복사

폰트 설정 추가

pubspec.yaml 에 폰트 설정 추가

  fonts:
    - family: NotoSansKR
      fonts:
        - asset: assets/fonts/NotoSansKR-Black.otf
          weight: 900
        - asset: assets/fonts/NotoSansKR-Bold.otf
          weight: 700
        - asset: assets/fonts/NotoSansKR-Light.otf
          weight: 300
        - asset: assets/fonts/NotoSansKR-Medium.otf
          weight: 500
        - asset: assets/fonts/NotoSansKR-Regular.otf
          weight: 400
        - asset: assets/fonts/NotoSansKR-Thin.otf
          weight: 100

테마에 폰트 패밀리 설정

    return MaterialApp.router(
      routerConfig: router,
      title: '오준석의 생존코딩',
      theme: ThemeData(
        primarySwatch: Colors.deepOrange,
        fontFamily: 'NotoSansKR',
      ),
    );

앱 실행

잘 됨