Want to use a custom font in Carrd, but you only have the font files? You can do this with a few simple steps.
You can see a demo at customfonts.carrd.co, where we’ve used the font Pleasantly Plump downloaded from dafont.com.
So how do you do this? There isn’t a way to upload fonts directly onto Carrd, so you have to use the following workaround.
The following method requires Carrd Pro Standard as a minimum
Host the font file
To use custom font files you will need to store the file/s on some kind of publicly accessible server. I’ve seen other tutorials say you could use Dropbox, but I’ve found it didn’t work (I can only assume they blocked access since then).
Option 1 – web hosting
One option is to add it to some web hosting. You should be able to get this for a few $ a month, so it’s not expensive.
- You may need to create a new site under your hosting account.
- Don’t install any software it suggests, like WordPress. We need this blank site just for storage, not for building a website.
- You will need to attach it to a domain name - most hosts will give you the option to use a temporary or random domain, which is fine for this use case.
- Upload the font file to the hosting server, under the site you’ve created. This is usually under under File Management in the site controls.
- Copy the public link for the file and store it somewhere. You should end up with a URL like this https://dummysite.com/webfont.ttf
Optional step
If your fonts don’t work at the end of this tutorial, come back to this optional step.
You may find you need to activate the CORS setting on your hosting. This allows your site to permit loading resources from sources other than your own site.
- Under under File Management for the site you created, create a new file and call it .htaccess
- Add the following code and save the file:
<ifModule mod_headers.c>
Header set Access-Control-Allow-Origin: *
</ifModule>- You should also clear any caches your hosting has installed.
Option 2 – GitHub
An alternative to web hosting is to upload to GitHub, then copy the public link for the file and store it somewhere.
Add the font in your Carrd site
- Add an Embed element to Carrd, set it to Hidden, in the Head
- Add the below code to the Embed
- Change
Fontnameto the name of your own font - Change the file url link to the public link for your font file
<style>
@font-face {
font-family: Fontname;
src: url(https://etc);
}
</style>
Reference the font to style your text
Option 1
- In the embed you created earlier, add the following code between the <style> tags:
- Change
Fontnameto the name of your own font
font-family: Fontname;Option 2
This option is neater, but requires Carrd Pro Plus (due to Advanced Settings)
- In your Text element where you want to use this font, go to Styles in the Settings.
- Add the below CSS:
- Change
Fontnameto the name of your own font
font-family: Fontname;
- Most other stylings like font size, line spacing etc should work through the normal Carrd settings.
Note you will not be able to see your custom fonts displayed in the Carrd editor. They will only display on the front end in the browser.
Now you should have everything setup. Publish your site and check how it looks in the browser.
- If it hasn’t worked, go back through the steps in this tutorial and double check everything.
- If it still doesn’t work, find the optional extra step I added under Host the font file above.
We hope you liked this tutorial. Check out other Carrd tips & tricks.
Written by
