Use a custom font for your Upsales landing page


Not a problem but perhaps a little bit technical. Make sure you know a thing or two about server permissions, CSS, and HTML. This page's headlines use a font named "Yellowtail" which is placed on a public URL. In the landing page script field, we import the font files. Here's how to achieve this: 


Follow these steps:

 
  1. Have a font file which you'd like to use.
     
  2. Generate cross-browser support for your file using @fontface. Free fontface generator 
     
  3. From the fontface generator you'll get your font files (.woff/.woff2) which in combination with the fontface CSS should be viable for most modern browsers.
     
  4. Upload your fonts to your file server. Make sure the URL's are publicly accessible.
     
  5. Copy the public URL's of your font files.
     
  6. Replace the placeholders and font names in the below code example with your own.
     
  7. Paste the code into your Upsales landing page script field (When editing your landing page, click the cog icon in the top right corner, a dialog with the script field appears)
     
  8. Save and preview your page. With the below example your custom font should now be used by the h1 and h2 headlines. You can off course apply the font to any text you'd like.
<style>
    @font-face {
    font-family: 'your-font-name';
    src: url('https://the-url-to-your-font-file.woff2') format('woff2'),
         url('https://the-url-to-your-font-file.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
    
    body {
        font-family: Arial, Helvetica, sans-serif;
    }
    h1, h2 { 
        font-family: 'your-font-name' !important;
    }
</style>

 

FAQ

 

I'm getting CORS/CORB policy errors in my console 

You will have to change the permissions on your file server. About CORS (wikipedia)
 
Since the font is placed on your server and then being fetched by the Upsales landing page some cross-server permissions might have to be changed on your server.
 

I don't have a file server to host my fonts on

Sorry but this is a requirement, Upsales does not supply hosting possibilities. Use the next best thing,  Google fonts.
 
 

Do I have permission to upload our fonts to a public URL?

Make sure your font license approves of you making the font publicly accessible for download and that your licence includes web-use. Upsales does not take responsibility for the rights and permissions of your custom fonts. If unsure, use Google Fonts which is natively supported by Upsales.

This page is created as an example from the developer's at Upsales. If you have any questions regarding Upsales, landing pages, or custom fonts please contact Upsales support