Typeface and fonts are powerful design elements. They can elevate your content by emphasizing key messages, communicating your brand personality, conveying action and emotion, and much more.
Vev offers a variety of font options, including Google Fonts, Adobe Fonts, self-hosted fonts, and custom fonts, so you can express the full power of your brand and creative vision.
Note: You need to be on the Professional plan or higher to use self-hosted fonts, custom fonts, or to sync Adobe Fonts.
Managing Fonts
Fonts can be added at both the folder level and the project level.
Adding Fonts at Folder Level
Adding fonts at the folder level will automatically make them available to all projects within that folder.
To add fonts at the folder level:
In the sidebar, hover over the folder you wish to add fonts to.
Click the three dots (⋮) that appear, or right-click the folder to open the context menu.
Select Settings.
Scroll down to the + Add Fonts section.
Add your desired fonts.
Selecting the Default Font for a Project
You can select a default font for a project, which will apply that font to all text boxes by default.
To set a default font:
Open your project in Vev.
Select a text box on your canvas.
In the right sidebar, locate the Text Styling section.
Click on the font name to open the font selector list.
Choose your desired default font.
Managing Fonts in the Text Styling section
You can manage fonts directly from the Text Styling section in the right sidebar.
Using the Font Selector:
Click on the font name to open the font selector list.
Use the search bar at the top to quickly find the font you're looking for.
Fonts are categorized under titles like Project Fonts, Custom Fonts, and Adobe Fonts for easy distinction.
Hover over fonts to get a live preview on the canvas of how they will look in your text box.
Using the Font Manager:
Click the cogwheel icon (⚙️) in the font selector to open the Font Manager.
From the Font Manager, you can Add Fonts to Project to pin them at the top of your list or upload/sync fonts to add them to the project.
Project Fonts
Project fonts are fonts that have been added to the project, either inherited from the folder level or selected from the Font Manager within the project. With project fonts, you will have the fonts readily available at the top of your font list at all times.
Note: When copying and pasting text to other projects, you will need to re-upload or add the fonts from the Custom Font menu into your new project.
Adding Adobe Fonts to a Project
To add Adobe Fonts to your project:
Open the Font Manager by clicking the cogwheel icon (⚙️) in the font selector.
Click Manage Adobe Fonts.
Click Add API Key.
Enter a name for the kit and the API key.
Choose to share fonts with everyone on the account or keep them personal.
Click Save Kit.
Your Adobe Fonts will now be available in the Font Manager.
Uploading Custom Fonts
To upload a custom font:
Open the Font Manager by clicking the cogwheel icon (⚙️) in the font selector.
Click Add Custom Font.
Click Upload Font Files.
Upload your font files.
Choose to share fonts with everyone on the account or keep them personal.
Click Save Font.
Self-Hosting Fonts
If your website already has a set of fonts defined in a CSS file, you can use the self-hosting option to add them to Vev.
To self-host fonts:
Open the Font Manager by clicking the cogwheel icon (⚙️) in the font selector.
Click Add Custom Font.
Click Add Font with CSS Link.
Paste the URL to your CSS file.
Click Create Font.
Note: If the fonts do not display correctly in the editor, you might have cross-origin limitations on your font files. The fonts will likely work when hosted on your domain, but we recommend fixing this cross-origin issue on your server to allow Vev to display the fonts, making your design experience smoother.
Removing Fonts from a Project
To remove fonts from a project:
Open the Font Manager.
In the Added to Project overview, click on the font you want to remove.
The font will be automatically removed from the library.
Supported File Formats
Vev supports the following font file formats:
WOFF (recommended)
WOFF 2.0 (recommended)
TTF/OTF (recommended)
AFM
BIN
CFF
DFONT
EOT
PDF
PFA
PFB
PFM
PS
PT3
SUIT
SVG
T11
T42
TFM
TTC
Troubleshooting
Adobe Fonts
If your Adobe API key has been synced but your fonts aren't showing up, ensure you've added the desired fonts to a Web Project in Adobe Fonts.
Follow this guide on how to create a web project and add your fonts to it. Once you are done:
In the Adobe Fonts panel in Vev, click the three dots (⋮) next to your API key.
Click Resync.
Your fonts should now appear in the list.
FAQs
Can I upload custom fonts on the Starter plan?
No, you'll need to upgrade to the Professional plan to use this function, as explained in the article.
Can I set a custom font as the default one in my project?
No, but you can use shared styles and reuse them as presets in your project. Learn more about them here.
Does using Google fonts in Vev violate GDPR regulations?
Google is a data processor that records IP addresses of visitors to your site in order to serve fonts from their CDN. This can be interpreted as an issue for GDPR because this identifying datapoint (IP address) is not necessarily stored in the EU.
You can safely use Google Fonts in your Vev projects without worrying about GDPR violations. Vev's Design Editor uses the Google Fonts API to give you access to the latest font versions. However, these fonts are transferred and hosted on the Vev CDN when you publish your project, meaning they can’t be tracked by Google.