If your brand uses a font that isn't in Lantern's font list, for example a font you bought a license for, you can upload the font files and use the font in your quizzes. You upload a font once, and it's then available in every quiz of your store.
Looking for a Google font instead? You don't need to upload anything for those. See Add a custom Google Font in your quiz.
What you need
The font files. Lantern accepts
.woff2,.woff,.ttfand.otffiles, up to 5 MB each. If you have the same font in several formats, pick.woff2: it's the smallest, so your quiz loads faster.One file per weight or style. A font usually comes as separate files, like Regular, Bold and Italic. Upload at least Regular and Bold, so bold text in your quiz uses the real bold version of your font.
A license that covers your store. Most paid fonts need a web license to be used on a website. If you're not sure, check with the company you bought the font from.
Step 1: Upload your font
1.1 Open any quiz in the quiz editor and click Theme settings in the left-hand menu. Under Body Font, click Upload a font.
1.2 In the Your fonts window, click Choose font files and select the files from your computer. You can select several files at once, or drop them onto the box.
1.3 Check what Lantern read from the file names:
Font name: the name you'll see in the font lists. You can change it. It can have letters, numbers, spaces and hyphens.
Weight: how thick each file's letters are, from Thin (100) to Black (900). Regular is 400 and Bold is 700.
Italic: tick it for a file that holds the italic version.
1.4 Tick I have a license to use this font on my store and click the upload button at the bottom of the window.
Step 2: Use the font in your quiz
2.1 Still in Theme settings, open the list under Body Font and pick your font. Uploaded fonts are marked (your font). The preview in the middle of the editor switches to your font right away.
2.2 To use it for headings only, or to pair it with another font, tick Use a different font for headings and pick a font under Headings Font. You can mix an uploaded font with a Google font.
2.3 Publish the quiz. Font changes are saved to your draft first, so shoppers see the new font once you publish.
To use the font in another quiz, open that quiz and repeat step 2. You don't need to upload the font again.
Add, replace or remove font files
Once your store has an uploaded font, the link under the font lists reads Manage your fonts. It opens the same window, which now lists every file you uploaded.
To add a weight or style, choose the new file and give it the same Font name.
To replace a file, upload the new one with the same Font name, weight and Italic setting. It takes the place of the old file.
To remove a file, click Remove next to it. A font can't be removed while a quiz still uses it: Lantern tells you which quizzes do, so you can pick another font there first.
Good to know
Missing weights. If your quiz shows bold text and you didn't upload a bold file, the browser thickens the regular letters by itself, which rarely looks as good as the real bold.
Same name as a Google font. If you give your font the name of a Google font, your uploaded files are the ones your quizzes use.
Up to 40 files per store. That's enough for several fonts with all their weights.
Quizzes copied to another store. A quiz moved with an export code keeps the font's name, and shows the default font until you upload the same font in the other store.
Fonts our team added for you before. If our support team set up a font for you with custom CSS in the past, it keeps working. You don't need to change anything.
Adobe Fonts. Adobe fonts can't be downloaded as files, so they're set up differently. Contact us at [email protected] and we'll help.