Install font family
Presentation (Building the UI)
Summary
This lesson is purely a brief design and environment setup detour, focusing on installing a custom font to accurately view the Adobe XD mockup. The instructor explains how to identify missing fonts in XD and walks through downloading, extracting, and installing the "GT Sectra Fine" font on Windows. No Flutter code or Clean Architecture concepts are covered here; the goal is simply to ensure the design reference renders correctly before resuming the UI implementation in the next lesson.
Key Ideas
- Missing fonts in Adobe XD are indicated by an exclamation mark next to the font name in the text properties panel.
- Adobe XD will substitute missing fonts, causing the design mockup to look different from the designer's original intent.
- Custom fonts must be installed at the operating system level to render correctly in design tools.
- Adobe XD requires a full restart after installing a new font for the changes to take effect.
- Commercial fonts require proper licensing when used in a production application; not all fonts are free.
Code Snippets
Empty — fill this in later. Open the manifest and add content here.
My Notes
This is a purely administrative video to fix a rendering issue in Adobe XD. The instructor installs "GT Sectra Fine Regular" so the design mockup looks correct on his machine.
- Gotcha: Restarting Adobe XD is mandatory after installing a new font on your OS; otherwise, the exclamation mark won't go away and the font won't render.
- Licensing Warning: The instructor rightly points out that you cannot just grab any font for a production app. Always check if a font is free for commercial use (like most Google Fonts) or if you need to purchase a license.
[Editor's note]To actually use this font in Flutter, remember that OS-level installation isn't enough. You must place the.ttfor.otffile in anassets/fonts/directory and declare it under thefonts:section in yourpubspec.yaml.