Using Custom Font

How can I use my own custom font or Google Font that doesn't come up in the dropdown menu?

This is a question we receive often, so we've outlined the simple steps below on how to import your custom/Google font and use it within your Coming Soon page!

Step 1: Click into the Coming Soon customizer, and click on "Advanced"

Step 2: This will bring up the below Custom CSS field. You will need to paste in your Custom CSS to enable the font you want.

Step 3: Copy the code below into the above and Save Changes. You must save changes in order for the font to apply. 

CODE SNIPPET: replace "x" with either p, h1, h2, h3. Replace "Lato" in the import CSS with your preferred Google Font, and delete the font-size or font-style line items if you do not need them.

@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');

x {
  font-family: "INSERT FONT", sans-serif !important;
  font-size: XXpx;
  font-style: normal, bold, oblique;
}

EXAMPLE - GOOGLE FONT ("LATO)

@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');

p, h1 {
  font-family: 'Lato', sans-serif; !important;
}

To import a custom font from your servers, you must replace the URL in the @import line item with the URL associated with your font.

If you want to use a different font for each different section of your site i.e. paragraphs vs headers, simply fill out, and copy and paste the above again into the Custom CSS field. 

And that's it! You've now successfully imported your own custom fonts. If you're having any trouble, please reach out to support@soviapps.com and we'd be happy to help.

Still need help? Contact Us Contact Us