You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

Flutter中GoogleFonts无法加载字体的问题求助

问题描述

我尝试使用GoogleFonts测试UI,但遇到异常错误:google_fonts was unable to load font,且所有字体都会触发该问题。以下是我的环境配置与相关信息:

  • 环境:VSCode、Flutter 1.12.13+hf9、Windows 10
  • pubspec.yaml依赖配置:
dependencies:
  flutter:
    sdk: flutter
  google_fonts: ^0.4.0
  • 代码示例:
import 'package:google_fonts/google_fonts.dart';
Text('data2', style: GoogleFonts.mcLaren())
  • 报错信息:

I/flutter ( 5069): error: google_fonts was unable to load font McLaren-Regular because the following exception occured
I/flutter ( 5069): Exception: Failed to load font with url: https://fonts.gstatic.com/s/a/ca48a5e17b0201057453d49c4271d139e5824b553505ad1c6fbbd7cbbbf4d1dc.ttf

  • Flutter Doctor检测结果:

[√] Flutter (Channel stable, v1.12.13+hotfix.9, on Microsoft Windows, locale pt-BR)
[√] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[!] Android Studio (not installed)
[√] VS Code, 64-bit edition (version 1.44.0)
[√] Connected device (1 available)
! Doctor found issues in 1 category.


回答

Hey,我之前在旧版Flutter搭配早期google_fonts包时也碰到过一模一样的问题,给你几个实用的解决方向:

1. 升级google_fonts包版本

你用的0.4.0版本太老了,和1.12.x的Flutter存在兼容性问题。建议升级到适配你当前Flutter稳定版的版本,比如^1.1.0就很合适:
修改pubspec.yaml里的依赖:

dependencies:
  flutter:
    sdk: flutter
  google_fonts: ^1.1.0

然后在终端执行flutter pub get更新依赖。

2. 排查网络连接问题

报错显示无法加载Google Fonts的CDN链接,大概率是网络访问受限导致的:

  • 切换到其他网络(比如手机热点)测试,排除本地网络的限制
  • 如果需要代理,在终端先配置代理再运行项目:
set HTTP_PROXY=http://你的代理地址:端口
set HTTPS_PROXY=http://你的代理地址:端口

之后重启Flutter运行会话试试。

3. 改用本地字体作为 fallback

如果网络问题暂时无法解决,可以把字体下载到本地托管:

  1. 从Google Fonts官网下载需要的字体文件(比如McLaren-Regular.ttf
  2. 在项目根目录创建assets/fonts文件夹,把字体文件放进去
  3. 在pubspec.yaml里配置本地资源和字体家族:
flutter:
  assets:
    - assets/fonts/
  fonts:
    - family: McLaren
      fonts:
        - asset: assets/fonts/McLaren-Regular.ttf
  1. 修改代码兼容本地和远程加载:
Text('data2', style: GoogleFonts.mcLaren(fontFamily: 'McLaren'))

这样如果远程加载失败,会自动切换到本地的字体文件。

4. 考虑升级Flutter(可选但推荐)

你的Flutter版本1.12.x确实比较陈旧了,新版本对google_fonts这类包的支持更好。如果项目允许,执行flutter upgrade升级到最新稳定版——记得先备份项目,避免出现意外的兼容性问题。

内容的提问来源于stack exchange,提问作者rubStackOverflow

火山引擎 最新活动