Use custom fonts
You can change the fonts in your Lovable project by simply telling it which ones to use. You can pick from common fonts already on computers or choose any font from Google Fonts.
Anyone building an app needs this when they want to control the look and feel of their text.
Do this, in order
- 1
Decide if you want to use a common font that's already on most computers (like Arial) or a special font from Google Fonts.
Common fonts load very fast because they are already installed, while Google Fonts offer more unique styles.
- 2
If using a common font, just type its name in your prompt.
Lovable will apply it without needing to download anything extra, making your text appear consistently.
- 3
If using a Google Font, either type its name in your prompt or paste the link to its page from the Google Fonts website.
Lovable will automatically find, load, and apply the font for you, giving your app a distinct look.
- 4
Record your font choices in your project's knowledge file.
This ensures that all new pages Lovable creates for you will use your chosen fonts from the start, maintaining a consistent design.
Paste this into your project
Use Playfair Display for all headings and keep Inter for body text. Record these font choices in the knowledge file as part of the design direction.
Words decoded
- Web-safe fonts
- These are common fonts that are pre-installed on most computers and devices, so they look the same everywhere without needing to be downloaded.
- Typography
- This refers to the style, appearance, and arrangement of text, including the choice of fonts.
- Repository
- This is a central place where all the files and history of your project are stored, often used with version control systems like Git.
- Git sync
- This is a feature that connects your Lovable project to a Git repository, allowing you to manage your project files using Git.
- Knowledge file
- This is a special file in your Lovable project where you can store important information, decisions, and guidelines about your app, like design choices.
Where people get stuck
- Forgetting to record your font choices in your knowledge file might lead to inconsistent fonts on new pages Lovable builds.
- Trying to upload font files directly instead of using Git sync for custom fonts not found on Google Fonts or as web-safe options.
The short version, steps, decoder and prompt on this page are written automatically from Lovable's own documentation and can lag or misread it. The official page is always the authority.