Custom font weight is not working on flutter

Question

I'm making a mobile application with flutter.

I tried to apply custom font named 'Pretendard'(includes korean fonts), but there was no way to apply correctly.

The fonts are successfully loaded,
but Font weight is not applied all time

You can download font files with following link: https://www.dropbox.com/s/1evs3hno2ks0b01/Pretendard-1.3.6%20%281%29.zip?dl=0

(I used .otf files in Pretendard-1.3.6 (1)/public/static/, you can also use .ttf files in Pretendard-1.3.6 (1)/public/static/alternative, but I got same problem using both font files.)

Below are the methods I've tried.

put font files to [myproject]/fonts/, and add font information to pubspec.yml like below:

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

Widget implementation for method 1:

Text(
  'text1',
  style: TextStyle(
    fontFamily: 'Pretendard',
    fontWeight: FontWeight.w800,
    fontSize: 20.sp,
    letterSpacing: -0.20.sp,
  ),
)

put font files to [myproject]/assets/fonts/, and add font information to pubspec.yml like below:

flutter:
  fonts:
  - family: PretendardThin
    fonts:
    - asset: assets/fonts/Pretendard-Thin.otf
  - family: PretendardExtraLight
    fonts:
    - asset: assets/fonts/Pretendard-ExtraLight.otf
  - family: PretendardLight
    fonts:
    - asset: assets/fonts/Pretendard-Light.otf
  - family: PretendardRegular
    fonts:
    - asset: assets/fonts/Pretendard-Regular.otf
  - family: PretendardMedium
    fonts:
    - asset: assets/fonts/Pretendard-Medium.otf
  - family: PretendardSemiBold
    fonts:
    - asset: assets/fonts/Pretendard-SemiBold.otf
  - family: PretendardBold
    fonts:
    - asset: assets/fonts/Pretendard-Bold.otf
  - family: PretendardExtraBold
    fonts:
    - asset: assets/fonts/Pretendard-ExtraBold.otf
  - family: PretendardBlack
    fonts:
    - asset: assets/fonts/Pretendard-Black.otf

Widget implementation for method 1:

Text(
  'text1',
  style: TextStyle(
    fontFamily: 'PretendardExtraBold',
    fontSize: 20.sp,
    letterSpacing: -0.20.sp,
  ),
)

Install dependency google_fonts which is on pub.dev (with font asset applied like method 2)

Widget implementation for method 3:

Text(
  'text1',
  style: GoogleFonts.lato(
    textStyle: TextStyle(
      fontFamily: 'PretendardExtraBold',
      fontSize: 20.sp,
      letterSpacing: -0.20.sp,
    ),
  ),
)

google_fonts library showed me that all fonts from fonts.google.com is successfully apply font weights, except my custom fonts. (Before importing fonts from font.google.com from the Google_fonts library, I understand that if a font is registered in the asset of the project, it is used first)

When use method 1 and 3, there are no changes of font weights. When use method 2, I can see that font weights are applied when use different weights, but there are some bugs. (ex. SemiBold(w600) and Bold(w700) is thinner than Medium(w500))

I also tried to change font meta-data(modify font name and font family to be same name 'Pretendard' for all font files) In meta-data, Font weights are applied 100 to 900 in 100 units.

My friend tried to apply those fonts to his project but he was successfully applied fonts, so I expected that my flutter SDK and Android Studio has some problem that made me to deleted all features related with flutter and Android Studio, and re-install them.(Problems are not solved)

There are no errors with those implementations, and below is my flutter doctor:

PS C:\Users\yoppy\StudioProjects\ourB_front> flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.7.10, on Microsoft Windows [Version 10.0.22621.1485], locale ko-KR)
[X] Windows Version (Unable to confirm if installed Windows version is 10 or greater)
[√] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
[√] Chrome - develop for the web
[√] Visual Studio - develop for Windows (Visual Studio Community 2022 17.4.0)
[√] Android Studio (version 2022.1)
[√] VS Code (version 1.73.1)
[√] Connected device (4 available)
[√] HTTP Host Availability

! Doctor found issues in 1 category.

(My Windows version is 11, so flutter doctor cannot detect Windows Version as it says.)

I've been hammered for four days over this problem. I hope we can find a way to solve it. :)

Custom font weight is not working on flutter

0 Answers0