Thanks to visit codestin.com
Credit goes to github.com

Skip to content

When applying Korean font (NotoSansCJKkr) in Flutter, text is broken on Android #168136

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
leeseungryong586 opened this issue May 1, 2025 · 5 comments
Labels
in triage Presently being triaged by the triage team waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds

Comments

@leeseungryong586
Copy link

leeseungryong586 commented May 1, 2025

Problem Description
I tried to print Korean using the .otf font file (NotoSansCJKkr-Regular.otf) in Flutter, but the text appears broken on Android devices (□ or strange characters).

The font was downloaded from the official Google Noto GitHub, and was properly registered in the Flutter app's pubspec.yaml, and also exists correctly in the assets folder.

Settings

pubspec.yaml

flutter:
  fonts:
    - family: NotoSansCJKkr
      fonts:
        - asset: assets/fonts/NotoSansCJKkr-Regular.otf

![Image](https://github.com/user-attachments/assets/14471b02-880e-44af-9f70-fbef62732b38)

### Actual results

What I tried

Changed to .ttf version as well → Same symptoms

Tested on multiple Android devices → Same

Apply Flutter clean / pub get repeatedly

Same even when fontFamily is directly specified in TextStyle

Even TTS results are broken

Expected results
Korean should be output normally

Voice output should not be affected

Actual results
Korean is output as □ or strange characters

Voice output is also affected by broken characters

Environment
Flutter 3.x (flutter doctor results to be attached)

Android SDK 34

Test devices: Samsung Galaxy S24, Pixel 5

![Image](https://github.com/user-attachments/assets/8e629e29-54e6-4c88-a4ec-f5270033a5c3)

### Logs

<details open>
<summary>Logs</summary>

```console

<!-- Paste your logs here -->

Flutter Doctor output

theme: ThemeData(
fontFamily: 'NotoSansCJKkr',
)

@darshankawar darshankawar added the in triage Presently being triaged by the triage team label May 2, 2025
@darshankawar darshankawar changed the title Flutter에서 한글 폰트(NotoSansCJKkr) 적용 시 안드로이드에서 텍스트가 깨짐 When applying Korean font (NotoSansCJKkr) in Flutter, text is broken on Android May 2, 2025
@darshankawar
Copy link
Member

@leeseungryong586
Please try to post the issue details and description in English as, it helps to properly understand the issue and readability.
In order to properly address the issue, please provide us a demo repo along with actual vs expected behavior and flutter doctor -v.

@darshankawar darshankawar added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label May 2, 2025
@leeseungryong586
Copy link
Author

Title
Cannot apply custom Korean font (NotoSansCJKkr) in Flutter project — displays broken characters on Android

Body
Describe the issue:
I'm building a Flutter app that uses Korean fonts. Despite setting the font properly in pubspec.yaml and placing the .otf file in assets/fonts/, the font is not rendering properly on Android devices. Characters are broken or missing. TTS also seems to be affected, producing jumbled or incomplete pronunciation.

Steps to reproduce:

Download NotoSansCJKkr-Regular.otf

Place it in assets/fonts/

Modify pubspec.yaml::

yaml
복사
편집
flutter:
fonts:
- family: NotoSansCJKkr
fonts:
- asset: assets/fonts/NotoSansCJKkr-Regular.otf
Set the font in ThemeData:

dart
복사
편집
theme: ThemeData(
fontFamily: 'NotoSansCJKkr',
)
Run on real Android device
xpected behavior:
Korean text should render normally using the NotoSansCJKkr font.
Actual behavior:
Fonts break or display empty boxes (□)
TTS output appears partially corrupted
Verified font name is correct
Tried both .ttf and .otf versions
No build errors — only visual/text rendering issues
Flutter doctor output:
flutter doctor -v

(Paste your flutter doctor output here)

Platform:
Flutter version: (e.g., 3.19.0)
Target device: Android (Samsung Galaxy S24 Ultra)
SDK version: Android 33

Image

Image

Terminal input
PS C:\Users\computer\AndroidStudioProjects\voice_gpt_drive_flutter> flutter pub get
Resolving dependencies...
Downloading packages...
async 2.12.0 (2.13.0 available)
fake_async 1.3.2 (1.3.3 available)
flutter_lints 2.0.3 (5.0.0 available)
leak_tracker 10.0.8 (11.0.1 available)
leak_tracker_flutter_testing 3.0.9 (3.0.10 available)
leak_tracker_testing 3.0.1 (3.0.2 available)
lints 2.1.1 (6.0.0 available)
material_color_utilities 0.11.1 (0.12.0 available)
vector_math 2.1.4 (2.1.5 available)
vm_service 14.3.1 (15.0.0 available)
Got dependencies!
11 packages have newer versions incompatible with dependency constraints.
Try flutter pub outdated for more information.
PS C:\Users\computer\AndroidStudioProjects\voice_gpt_drive_flutter> flutter run
Launching lib\main.dart on SM S928N in debug mode...
Running Gradle task 'assembleDebug'... 15.6s
√ Built build\app\outputs\flutter-apk\app-debug.apk
Installing build\app\outputs\flutter-apk\app-debug.apk... 8.8s
I/flutter ( 2196): [IMPORTANT:flutter/shell/platform/android/android_context_vk_impeller.cc(60)] Using the Impeller rendering backend (Vulkan).
Syncing files to device SM S928N... 170ms

Flutter run key commands.
r Hot reload.
R Hot restart.
h List all available interactive commands.
d Detach (terminate "flutter run" but leave application running).
c Clear the screen
q Quit (terminate the application on the device).

A Dart VM Service on SM S928N is available at: http://127.0.0.1:11635/-n6_oAdjJCc=/
The Flutter DevTools debugger and profiler on SM S928N is available at: http://127.0.0.1:9101?uri=http://127.0.0.1:11635/-n6_oAdjJCc=/
D/ProfileInstaller( 2196): Installing profile for com.example.voice_gpt_drive_flutter
W/t_drive_flutter( 2196): ApkAssets: Deleting an ApkAssets object ' and /data/app/~~6DGliDHtXKXwxM5GlT5nWQ==/com.google.android.tts-zx2cej1QEHt2jNrjxfLgjg==/base.apk' with 1 weak references

main.dart
import 'package:flutter/material.dart';
import 'package:flutter_tts/flutter_tts.dart';
import 'package:speech_to_text/speech_to_text.dart' as stt;
import 'package:http/http.dart' as http;
import 'dart:convert';

void main() => runApp(const MyApp());

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

@OverRide
Widget build(BuildContext context) {
return MaterialApp(
title: 'Voice GPT 앱 v2.0',
theme: ThemeData(
primarySwatch: Colors.blue,
fontFamily: 'NotoSansCJKkr',
),
home: const HomePage(),
);
}
}

class HomePage extends StatefulWidget {
const HomePage({super.key});

@OverRide
State createState() => _HomePageState();
}

class _HomePageState extends State {
final FlutterTts flutterTts = FlutterTts();
late stt.SpeechToText _speech;
bool _isListening = false;
String _text = '말씀해 보세요.';
String _responseEng = '';
String _responseKor = '';

final String _apiKey = 'sk******zBsA'; The API key has been entered correctly. It has been modified on the screen.

@OverRide
void initState() {
super.initState();
_speech = stt.SpeechToText();
}

Future _listenAndSend() async {
if (!_isListening) {
bool available = await _speech.initialize();
if (available) {
setState(() => _isListening = true);
_speech.listen(
onResult: (result) async {
setState(() => _text = result.recognizedWords);
if (result.finalResult) {
String recognizedText = result.recognizedWords.trim();
await _handleGPTFlow(recognizedText);
setState(() => _isListening = false);
_speech.stop();
}
},
);
}
} else {
setState(() => _isListening = false);
_speech.stop();
}
}

Future _handleGPTFlow(String koreanQuestion) async {
final englishAnswer = await _fetchGPTResponse(koreanQuestion);
await Future.delayed(const Duration(seconds: 1));
final koreanAnswer = await _translateToKorean(englishAnswer);

setState(() {
  _responseEng = englishAnswer;
  _responseKor = koreanAnswer;
});

await _speak(englishAnswer, lang: 'en-US');
await Future.delayed(const Duration(seconds: 1));
await _speak(koreanAnswer, lang: 'ko-KR');

}

Future _fetchGPTResponse(String question) async {
final url = Uri.parse('https://api.openai.com/v1/chat/completions');
final response = await http.post(
url,
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer $_apiKey',
},
body: jsonEncode({
"model": "gpt-3.5-turbo",
"messages": [
{"role": "system", "content": "You are an assistant that always replies in English."},
{"role": "user", "content": question}
]
}),
);

if (response.statusCode == 200) {
  final data = jsonDecode(response.body);
  return data['choices'][0]['message']['content'].trim();
} else {
  return 'GPT 응답 오류 발생';
}

}

Future _translateToKorean(String englishText) async {
final url = Uri.parse('https://api.openai.com/v1/chat/completions');
final response = await http.post(
url,
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer $_apiKey',
},
body: jsonEncode({
"model": "gpt-3.5-turbo",
"messages": [
{
"role": "system",
"content": "You are a translator who replies in casual spoken Korean like a friend."
},
{"role": "user", "content": "Translate the following into Korean: $englishText"}
]
}),
);

if (response.statusCode == 200) {
  final data = jsonDecode(response.body);
  return data['choices'][0]['message']['content'].trim();
} else {
  return '번역 실패';
}

}

Future _speak(String text, {required String lang}) async {
await flutterTts.setLanguage(lang);
await flutterTts.setSpeechRate(0.5);
await flutterTts.speak(text);
}

@OverRide
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('운전 중 GPT 대화 앱 v2.0')),
body: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 60.0, horizontal: 20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
ElevatedButton(
onPressed: _listenAndSend,
child: Text(_isListening ? '듣는 중...' : '음성 대화 시작'),
),
const SizedBox(height: 30),
Text('🗣️ 질문 (한국어): $_text', style: const TextStyle(fontSize: 18)),
const SizedBox(height: 20),
Text('🇺🇸 GPT 응답 (영어):\n$_responseEng', style: const TextStyle(fontSize: 16)),
const SizedBox(height: 20),
Text('🇰🇷 번역 결과 (한글, 구어체):\n$_responseKor', style: const TextStyle(fontSize: 16, color: Colors.blue)),
],
),
),
),
);
}
}

name: voice_gpt_drive_flutter
description: A new Flutter project.

publish_to: 'none' # Remove this line if you wish to publish to pub.dev

version: 1.0.0+1

environment:
sdk: ">=3.1.5 <4.0.0"

dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.2
flutter_tts: ^3.6.3
speech_to_text: ^7.0.0-dev.1
http: ^1.1.0 # ✅ 추가
shared_preferences: ^2.2.2 # ✅ 추가

dev_dependencies:
flutter_test:
sdk: flutter
flutter_lints: ^2.0.0

flutter:
uses-material-design: true

assets:
- assets/fonts/

fonts:
- family: NotoSansCJKkr
fonts:
- asset: assets/fonts/NotoSansCJKkr-Regular.otf

@github-actions github-actions bot removed the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label May 2, 2025
@darshankawar
Copy link
Member

Flutter version: (e.g., 3.19.0)

Please try on latest stable version (3.29.3). Also make sure to create new Flutter project (counter app) and then apply your scenario in it to check if it still persist or not, without third party packages.

@darshankawar darshankawar added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label May 5, 2025
@leeseungryong586
Copy link
Author

leeseungryong586 commented May 5, 2025 via email

@github-actions github-actions bot removed the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label May 5, 2025
@darshankawar
Copy link
Member

If you are looking for code support, please raise this in support channels like stackoverflow. If this is genuine issue, please try to upgrade your stable version to latest first, re-run your scenario to check if it fixes it or still persist.

@darshankawar darshankawar added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label May 6, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
in triage Presently being triaged by the triage team waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds
Projects
None yet
Development

No branches or pull requests

2 participants