Add a Custom Font

Google Fonts contains a wealth of free fonts, but if you're keen to use your brand font you can also add custom fonts to Raisely.

⚠️ Warning – Adding custom fonts requires CSS knowledge. This is an unsupported tutorial, and we aren't able to help you install your custom fonts for you. If you get stuck, try to find a similar looking Google Font instead!

Watch the video walkthrough here and grab your import statements from the written steps below.   

Create Your Import Statement 🔗

Start by going to Design > Custom Styles and click Custom Css/Scss to expand your custom CSS:

This is where you can create your import statement. A basic import statement looks like this:

@font-face {
    font-family: "";
    src: url() format("");
}

Feel free to copy/paste this code directly into your Custom CSS file 😉

Add the name of your font between the quotation marks in the font-family line. This example uses a font called Riya, so my import statement will look like this:

@font-face {
    font-family: "Riya";
    src: url() format("");
}

 
Save the file, then go to Design > Media Library and upload your font file(s) to your Media Library (Upload Images and Files).

Once all of your files have been uploaded, copy a font file's URL by clicking the Copy Link button shown here:

Then, go back to Design > Custom Styles and click Custom Css/Scss to expand your custom CSS, now you can see all your custom CSS, you can paste click and paste the URL in the first set of parenthesis after src: url() . Your import statement should now look like this:

@font-face {
    font-family: "Riya";
    src: url(https://myFontURL.otf) format("");
}

This font file ends with otf , which means its format is opentype . Enter opentype  between the quotation marks to complete the statement, then press Save. Your completed import statement should look like this:

@font-face {
    font-family: "Riya";
    src: url(https://myFontURL.otf) format("opentype");
}

Multiple Font Files 🔗

One font file is okay, but we recommend adding as many font files as you can in order to make sure your font will display correctly on all browsers. To add multiple font files for the same font, replace the semicolon after your first URL with a comma and add a new url() format("") line, like this:

@font-face {
    font-family: "Riya";
    src: url( https://yourURLhere.otf ) format("opentype"),
    url( https://yourURLhere.woff ) format("woff"),
    url( https://yourURLhere.ttf ) format("truetype"),
    url( https://yourURLhere.svg ) format("svg");
}

  Note: make sure to match the URL endings with the correct formats!

 
You can repeat this as many times as you need in order to add all of your files, just make sure to end the last url() format() line with a semicolon to complete the statement.

   

Apply Your Font 🔗

Then, go to Design > Fonts and type the same font-family from your import statement into the Font Family fields in your headings. Make sure to only type the name of the font-- don't include the quotation marks:

You'll see a non-Google Font warning appear below the field, but feel free to disregard it; you've already manually included your font in your campaign styles. Press the Save Changes button on each item you edit, and you're finished!


Note: Your custom font won't appear in the font previewer in the admin panel, but it will appear on your live site. Visit your homepage to check out your changes!

  

Have questions about anything here? Contact us!

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us