- What is a Self-Hosting Kit?
- Steps for Creating Your Self-Hosting Kit
- Changing Font Name from webfontregular
- Uploading Your Font
- I Keep Getting a "We Cannot Validate the Uploaded Kit" Error when I try to Upload My Font
In Flexitive, you have access to over 700 different free fonts. However, there will be times that you will need to upload a font specific to the text in your project.
If you own the license to a font, and have a self hosting kit for that font you can upload that font to Flexitive, by selecting a text box, then selecting Upload from the font drop-down. If you do not have a self-hosting kit, you will need to follow these instructions for how to generate a self hosting kit using your font files.
A Self-Hosting Kit (or SHK for short) is just a different font file for your font, and if you don't have one, you can get one by either by creating a SHK online or by contacting the provider of your font.
If you have purchased your font from fonts.com, you can download a SHK at any time by following the instructions here.
Before you upload a custom font to your Flexitive account, you will first need to create a self hosting kit. In order to do this, you will require a copy of the font file to upload.
To generate a self hosting kit, follow these steps:
- Click Upload Fonts and select your font file.
You may have to change the filter from Custom Files to All Files in your browse screen to be able to see your font files.
Click on Expert options. This will extend a panel that allows you to fine tune your self hosting kit. Toggle on EOT Lite.
Scroll to the bottom of the box. Here you may enter a Font Name Suffix. This is the name that your font will be represented as when you import it into Flexitive. Accept the Agreement toggle and click Download Your Kit.
You will receive a .zip file download. When you upload your custom font to Flexitive, this will be the folder that you upload.
At the moment, Flexitive officially supports self hosting kits from the font providers below, although other self hosting kits may also work:
The Self-Hosting Kit created by the Font-Squirrel Webfont Generator will be labelled as a webfontregular. This can result in problems when using multiple Custom Fonts in a single project, or multiple styles of fonts. If these are not concerns for your project, this process is optional.
To update the names of your fonts, you will have to make edits directly to the stylesheet.css file that is included in your Self-Hosting kit. To do so follow these steps:
- Extract the files from your Self-Hosting Kit.
- Open the stylesheet.css file in a text editing software such as Notepad or Sublime Text.
- By default, the font-family in the stylesheet.css will be labelled as webfontregular. Change this to the name of your font.
- Save your changes. Return to the extracted files and re-zip them.
- Upload the altered kit into Flexitive. It will have the correct names assigned to the fonts.
To upload your Self-Hosting kit to Flexitive, you'll first need to add a text box to your canvas. After adding the text box, select the text box and open the Text Formatting panel. Open the Font Selection dropdown and select the Upload option.
After clicking Upload a modal will appear to upload your Self-Hosting Kit. Click the 'Browse for .zip' option and select your file, or drag and drop the self hosting kit into the upload area of the modal.
After uploading the font to Flexitive, you'll be able to select the font in the font selection dropdown.
Uploading a font to Flexitive doesn’t add it to every design on your Flexitive site, and to include your custom font in multiple designs you will need to upload the font to those designs as well.
Most of the time, this error is a result of an improperly formatted self-hosting kit. You should try either:
- Re-Downloading the Self-Hosting Kit from the provider of your font and then re-uploading it to Flexitive
- Creating a new Self-Hosting Kit using the FontSquirrel Webfont Generator
If you are still being given this error after trying the above steps, please contact a member of the Flexitive Support team at email@example.com, with the font files you are using attached.