# Troubleshooting Font Issues in Lovable UI
- Tool: Lovable
- Difficulty: Beginner
- Fix time: ~10 min
- Compatibility: All Lovable projects
- Last updated: March 2026
## TL;DR
Custom fonts in Lovable fail to render when the Google Fonts link is missing from index.html, the @font-face src path is wrong, or Tailwind's font configuration does not include the custom font family. Fix it by adding the font link or @font-face declaration in index.html, extending the fontFamily in tailwind.config.ts, and applying the font class to your elements.
## Why custom fonts do not render in Lovable projects
Lovable projects use Tailwind CSS for styling, which comes with a default system font stack (Inter or the browser's sans-serif family). When you want a different font, you need to load it (from Google Fonts or a local file) and then tell Tailwind about it. If either step is missing, the font will not appear.
The most common issue is adding a Google Fonts link to index.html but never updating tailwind.config.ts. The browser downloads the font, but Tailwind does not generate any CSS classes that reference it. You end up with a font-family declaration in the raw CSS but no Tailwind utility class to apply it.
Another frequent problem is FOIT (Flash of Invisible Text) and FOUT (Flash of Unstyled Text). The page loads with invisible or fallback-styled text while the custom font file downloads. This is not a bug — it is how browsers handle web fonts. The fix is adding font-display: swap to your @font-face rule, which shows fallback text immediately and swaps in the custom font once it loads.
- Google Fonts link tag missing from index.html — the font file never downloads
- Tailwind fontFamily not extended — no utility class exists to apply the custom font
- Wrong @font-face src path — the browser cannot find the local font file
- Font-display not set — causes invisible text (FOIT) while the font loads
- CSS specificity conflict — shadcn/ui or Tailwind base styles override your font declaration
## Error messages you might see
**GET https://fonts.googleapis.com/css2?family=... net::ERR_NAME_NOT_RESOLVED**
The Google Fonts URL is malformed. Check the font family name for typos and verify the URL format matches what Google Fonts provides.
**Failed to decode downloaded font: https://yourdomain.com/fonts/CustomFont.woff2**
The font file is corrupted or the file path returns an HTML page instead of the font binary. Verify the file exists in /public/fonts/ and the path in @font-face is correct.
**@font-face - "CustomFont" was not found**
The browser parsed the @font-face rule but could not locate the font file at the specified URL. Check that the src path starts with / for files in the /public folder.
## Before you start
- A Lovable project open in the editor
- The name of the custom font you want to use (check fonts.google.com for Google Fonts)
- Access to Dev Mode or the ability to prompt Lovable to edit configuration files
## How to fix it
### 1. Add the Google Fonts link to index.html
*The font file must be loaded by the browser before any CSS class can reference it*
Open index.html in your project root. Add a link tag that loads the font from Google Fonts. Go to fonts.google.com, select your font and weights, and copy the provided link tag. Place it in the head section of index.html, before any stylesheet links. Use the display=swap parameter to prevent invisible text while the font loads.
Before:
```
My App
```
After:
```
My App
```
**Expected result:** The Poppins font files download when the page loads. You can verify in the Network tab by filtering for 'font'.
### 2. Extend Tailwind configuration with the custom font
*Tailwind needs to know about the font to generate utility classes like font-poppins that you can apply to elements*
Open tailwind.config.ts in your project root. Add your font to the fontFamily section under theme.extend. The key becomes the class name (font-poppins), and the value is an array of font families with fallbacks. If you want the font as the default for all text, override sans instead of creating a new key.
Before:
```
export default {
content: ["./index.html", "./src/**/*.{ts,tsx}"],
theme: {
extend: {},
},
plugins: [],
};
```
After:
```
export default {
content: ["./index.html", "./src/**/*.{ts,tsx}"],
theme: {
extend: {
fontFamily: {
// Custom font available as className="font-poppins"
poppins: ['Poppins', 'sans-serif'],
// Override default sans to make Poppins the global font
sans: ['Poppins', 'ui-sans-serif', 'system-ui', 'sans-serif'],
},
},
},
plugins: [],
};
```
**Expected result:** The class font-poppins is available in your components. If you override sans, all text uses Poppins by default.
### 3. Apply the font class to your components
*Loading the font and configuring Tailwind makes it available, but you still need to apply it to specific elements or globally*
For global application, add the font class to the body or root div. For specific elements, add it directly. If you overrode the sans key in tailwind.config.ts, all text uses your font automatically without adding any classes.
Before:
```
```
After:
```
```
**Expected result:** All text in the app uses the Poppins font. The antialiased class improves font rendering on screens.
### 4. Use the Design view Themes tab for font changes without code
*Lovable's visual theme editor can change fonts without editing configuration files — no credit cost for static changes*
Click the + button next to Preview and select Design view. Open the Themes tab. Look for the typography or font section. You can change the primary font family, heading font, and body font directly through the visual interface. This approach uses Lovable's built-in theme system and does not require editing tailwind.config.ts or index.html manually. However, it is limited to fonts that Lovable's theme system supports. For full custom font control (like loading a font from a file), use the code-based approach in the previous steps. If your font setup involves changes across multiple theme files and component overrides, RapidDev's engineers have configured typography systems across 600+ Lovable projects.
**Expected result:** The selected font applies globally through Lovable's theme system, visible immediately in the preview.
## Complete code example
File: `index.html`
```html
My Lovable App
```
## Best practices
- Always use display=swap in Google Fonts URLs to prevent invisible text while the font loads
- Add preconnect links for fonts.googleapis.com and fonts.gstatic.com to speed up font loading by 100-300ms
- Load only the font weights you actually use — each additional weight adds 20-50KB of download
- Override the sans key in tailwind.config.ts for a global font change instead of adding classes to every element
- Test font loading on slow connections using the Network tab throttle (set to 'Slow 3G') to spot FOIT/FOUT issues
- For local font files, place them in /public/fonts/ and use @font-face in index.html with root-relative paths
- Use the Design view Themes tab for simple font changes — it requires no code and no credits
## Frequently asked questions
### How do I change the font in a Lovable project?
The easiest way is Design view then Themes tab, which lets you change fonts visually without editing code. For full control, add a Google Fonts link to index.html, extend fontFamily in tailwind.config.ts, and apply the font class to your body tag or specific elements.
### Why is my Google Font not showing up even though I added the link tag?
You likely added the link tag but did not update tailwind.config.ts. Tailwind does not automatically know about new fonts. Extend the fontFamily in tailwind.config.ts with your font name, then apply the corresponding font class to your elements.
### How do I use a local font file instead of Google Fonts?
Place the font file (WOFF2 format is best) in /public/fonts/. Add an @font-face rule in a style tag inside index.html with src pointing to /fonts/YourFont.woff2. Then extend fontFamily in tailwind.config.ts with the font name you defined in @font-face.
### What is FOIT and how do I prevent it in Lovable?
FOIT (Flash of Invisible Text) happens when the browser hides text until the custom font finishes downloading. Prevent it by adding display=swap to your Google Fonts URL or font-display: swap in your @font-face rule. This shows fallback text immediately.
### How many font weights should I load?
Only load the weights you actually use. Each additional weight adds 20-50KB to your page load. For most Lovable apps, loading regular (400), medium (500), semibold (600), and bold (700) is sufficient.
### Can I use different fonts for headings and body text?
Yes. Load both fonts in index.html, add both to tailwind.config.ts with different keys (like font-heading and font-body), then apply font-heading to your h1-h6 elements and font-body to body or paragraph text.
### What if I can't fix this myself?
If your font setup involves complex typography hierarchies, custom font loading strategies for performance, or conflicts with the shadcn/ui theme system, RapidDev's engineers have configured typography across 600+ Lovable projects.
---
Source: https://www.rapidevelopers.com/lovable-issues/troubleshooting-font-issues-in-lovable-ui
© RapidDev — https://www.rapidevelopers.com/lovable-issues/troubleshooting-font-issues-in-lovable-ui