All Collections
Troubleshooting
Inherit site font option isn't working
Inherit site font option isn't working

The site font isn't working on my website or landing page

Mariana avatar
Written by Mariana
Updated over a week ago

The "Site Font" option can be found for both Headline and Text elements in the builder. This feature will inherit a website's defined text tags. These tags are usually predefined in the website's theme and if the website is custom built, the site developer can define these in the site's code.

In the ConvertFlow theme tab the "Site Font" can be added to all elements that allow setting a font. These elements include Heading 1 (h1), Heading 2 (h2), Heading 3 (h3), Heading 4 (h4), Paragraph (p), Forms, Buttons, Products, Product Heroes, Surveys, Quizzes, Progress Bars, Timers, Collapses, Lists, and Tabs:

Site font (inherit) isn't working on a website

If the website's font tags aren't defined, the text will display with the fallback font New Times Roman:

In this case, the font tags will need to be set on the website so the site developer may need to be looped in to update the site's code.

NOTE: The fallback font may vary depending on the website's code

Site font (inherit) isn't working on a landing page

Since ConvertFlow landing pages aren't linked to the main site's theme, the site font feature cannot inherit the site's font tags. However, the landing page's fallback fonts vary depending on the font tag, but would usually be Helvetica:

For landing pages to have a font outside of the Google Library fonts available in the ConvertFlow builder, a custom CSS code can be used to override the campaign's CSS.

Custom font custom code

This custom code can be used to add a custom font to a campaign, where the font import URL and font family name would need to be updated:

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

.convertflow-cta body, .convertflow-cta h1, .convertflow-cta h2, .convertflow-cta h3, .convertflow-cta h4, .convertflow-cta h5, .convertflow-cta p, .convertflow-cta input, .convertflow-cta select, .convertflow-cta span, .convertflow-cta textarea {
font-family: 'Raleway', sans-serif !important;
}
</style>

NOTE: While ConvertFlow provides the tools to add custom code to campaigns, helping write and troubleshoot any custom code added to ConvertFlow goes beyond the scope of our support offerings while on our self-service plans.

Did this answer your question?