.gif)
Ensure custom fonts work in Lovable by configuring CSS properly. Discover how to add and apply fonts using proven best practices.
Book a call with an Expert
Starting a new venture? Need to upgrade your web app? RapidDev builds application with your growth in mind.
Custom fonts won’t show up unless your app’s CSS actually declares and uses them and that CSS is loaded with the right scope and order. If there’s no @font-face/@import or no global font-family rule applied where your components can see it (or if module-scoped styles, Tailwind utilities, CSS-in-JS, or higher-specificity rules override it), the browser will fall back to defaults — so missing or mis-scoped CSS configuration is the usual reason custom fonts appear not to apply in Lovable.
.png)
.png)
// Paste this into Lovable chat to run a repo audit for font usage and where CSS is loaded
Please scan the repository and produce a font-audit report. Do the following steps and create the file diagnostics/font-audit.md with the results:
// Step 1: Search for font declarations and usages
// - List every file that contains '@font-face', '@import url(' or 'font-family:'.
// - For each file, show the matching lines and file path.
// Step 2: Check typical global CSS locations
// - Inspect these files if they exist: src/index.css, src/global.css, src/styles.css, src/main.tsx, src/index.tsx, src/App.tsx.
// - For each, state whether it is imported into the application entry (main/index file) and show the import lines.
// Step 3: Check framework configs that can contain fonts
// - Show contents of tailwind.config.js if present and highlight theme.extend.fontFamily entries.
// - If using Next.js, show pages/_app.tsx or app/layout.tsx imports.
// Step 4: Find scoped CSS and styled libraries
// - List any *.module.css files and show whether they define font-family.
// - Inspect package.json for styled-components, @emotion, lit, or other CSS-in-JS/web-component libs and list likely components that may use shadow DOM or local styles.
// Step 5: External font URLs and potential CORS issues
// - List any external font URLs (fonts.googleapis.com, .woff/.woff2/.ttf references) and the files that reference them.
// Put all findings into diagnostics/font-audit.md with clear headings:
// - Files containing declarations
// - Which global CSS files are imported at app entry
// - Potential scoping/conflict suspects
// - External font URLs found
// - Short summary: the most likely reason the custom font is not applying
// Paste this into Lovable chat to create a concise checklist file so a human can fix the CSS load/order later
Please create a file docs/font-checklist.md containing a simple checklist to verify in Lovable projects (do not add font files). The checklist should include:
// - Verify @font-face or @import exists and the declared family name
// - Verify that the CSS file with the declaration is imported in src/main.tsx or src/index.tsx (show what to look for)
// - Verify no CSS modules or component styles are overriding the font (list how to search for font-family in repo)
// - Verify external font URLs and check if they are reachable (list the URLs found)
// - Verify tailwind.config.js theme entries if Tailwind is present
This prompt helps an AI assistant understand your setup and guide you through the fix step by step, without assuming technical knowledge.
Upload or link the font files into your Lovable project, add an @font-face stylesheet in a new file (for example src/styles/fonts.css), import that stylesheet from your app entry (for example src/main.jsx or src/index.css), then set the font on body or update your Tailwind config's fontFamily. Use Lovable Chat Mode to create the files/edits, Preview to confirm, and Publish or GitHub sync for production. If you can't upload large asset files inside Lovable, add them via GitHub sync/export and then reference them the same way.
// Create a folder public/fonts and upload your font files there using the Lovable file uploader.
// Files should be .woff2/.woff (preferred .woff2). Example names: Inter-Regular.woff2 Inter-Bold.woff2
// Then create file src/styles/fonts.css with the following content:
@font-face {
font-family: 'MyCustom';
src: url('/fonts/Inter-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
// Add additional weights
@font-face {
font-family: 'MyCustom';
src: url('/fonts/Inter-Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
/* Apply default on root or body */
:root {
--app-sans: 'MyCustom', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}
body {
font-family: var(--app-sans);
}
// Update src/main.jsx (or src/main.tsx / src/index.js / src/index.tsx depending on your project).
// At the top of the file, add this import so the font CSS is included in the bundle:
import './styles/fonts.css';
// If your project uses src/index.css, you can instead import fonts.css from there:
// Add this line at top of src/index.css:
// @import './styles/fonts.css';
// Edit tailwind.config.cjs (or tailwind.config.js) and update the theme.extend.fontFamily:
// Place this in the existing module.exports object inside theme.extend
module.exports = {
// ...existing config
theme: {
extend: {
fontFamily: {
sans: ['"MyCustom"', 'ui-sans-serif', 'system-ui', 'system-ui', 'Segoe UI', 'Roboto'],
},
},
},
// ...rest of config
};
// Also ensure src/styles/fonts.css is imported (see previous step) so the font is present at runtime.
// If you prefer Google Fonts, open public/index.html and inside the <head> add:
// Use preload for performance and a link as fallback
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
// Then set the font in src/index.css or src/styles/fonts.css:
body {
font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}
// After making the file edits in Lovable Chat Mode, use Preview to confirm fonts load in the app.
// If fonts are uploaded to public/fonts they will be served at /fonts/... in Preview.
// When ready, Publish or sync to GitHub. If you added large assets outside Lovable, push them to GitHub and then use Lovable's GitHub sync to pull the changes.
Connect with our team to unlock the full potential of no-code solutions with a no-commitment consultation!
.svg)
Use web-hosted fonts where possible for fastest, simplest workflow in Lovable; when you must self-host, put font files under public/, add explicit @font-face rules in a global CSS file, update your global CSS / Tailwind config to use the new family, and use Lovable’s Chat edits + Preview/Publish to test — if you need to add binary font files use GitHub sync (outside Lovable) or the Lovable file upload for small files. Always verify network responses and MIME types in Preview.
Please edit these files in Chat Mode:
Include these exact edits:
// public/index.html: add inside <head> before </head>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
// src/index.css: add at the top or near global rules
/* font import already in index.html, set default */
html, body {
font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
// tailwind.config.js: inside module.exports = { theme: { extend: { fontFamily: { sans: ['Inter', 'ui-sans-serif', 'system-ui'] } } } }
// update that file if it exists; if not present, skip this step
Please edit/create these files in Chat Mode and follow the note below about binary files:
Also: upload your .woff2/.woff files into public/fonts. If you cannot upload binaries via the Lovable file UI, add them to your GitHub repo under public/fonts and then Sync/Export from Lovable (outside Lovable — terminal required).
Include these exact edits:
// src/styles/fonts.css: create this file
@font-face {
font-family: 'MyBrand';
src: url('/fonts/MyBrand-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'MyBrand';
src: url('/fonts/MyBrand-Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
// src/index.css: import the fonts and set default
@import './styles/fonts.css';
html, body {
font-family: 'MyBrand', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
// tailwind.config.js: extend fontFamily if using Tailwind
// theme: { extend: { fontFamily: { sans: ['MyBrand', 'ui-sans-serif', 'system-ui'] } } }
// Important: upload the font binaries to public/fonts/
// If you cannot upload them inside Lovable, do this outside Lovable (terminal required):
// - Add font files to your repo under public/fonts and push to GitHub, then use Lovable's GitHub sync.
From startups to enterprises and everything in between, see for yourself our incredible impact.
They do complex work on extremely fast timelines and effectively manage the testing and pre-launch process to deliver the best possible product. I'm extremely impressed with their execution ability.
