topic Uploaded fonts not available for Landing Page in Blog, Website & Page Publishing

Uploaded fonts not available for Landing Page

SVanSickle — Mon, 13 Mar 2023 22:21:10 GMT

Hello,

I uploaded a few custom fonts but they are not appearing to be available for Landing Pages.

Font names:

- Dumondi-Regular

- Dumondi-Bold

Please advise.

Much gratitude,

Schuyler

Re: Uploaded fonts not available for Landing Page

kvlschaefer — Tue, 14 Mar 2023 13:57:14 GMT

Hi @SVanSickle,

Thank you for reaching out to the Community!

I wanted to share this help article regarding which templates support custom fonts. Can you please confirm if your landing page has a starter template, a coded template, or a theme template?

Thank you!

Best,

Kristen

Re: Uploaded fonts not available for Landing Page

SVanSickle — Tue, 14 Mar 2023 15:48:59 GMT

Hello, I am assuming that it is a starter template... how do I know? Am i able to access theme or coded templates with a free account?

Much gratitude,

Schuyler

Re: Uploaded fonts not available for Landing Page

kvlschaefer — Thu, 16 Mar 2023 12:46:51 GMT

Hi @SVanSickle,

Thanks for the details!

According to this knowledge base article, your account has access to up to 20 landing pages with starter templates only. Custom fonts are not available for starter templates.

What you may want to consider instead is creating a webpage since you have access to all templates (starter, themed, or coded) according to the help article linked above. You can use custom fonts with a theme or coded template.

Hope this helps 🙂

Best,

Kristen

Re: Uploaded fonts not available for Landing Page

SVanSickle — Thu, 16 Mar 2023 13:52:18 GMT

Hmmmm... That seems reasonable, however, I am not finding my fonts avaialble with Webpage either.. The fonts should be uploaded already..

Please advise.

Re: Uploaded fonts not available for Landing Page

kvlschaefer — Thu, 16 Mar 2023 18:53:42 GMT

Hi @SVanSickle,

Thanks for the screenshot!

Adding a custom font will not add the font to styling dropdown menus in the content editor.

Can you confirm that you have uploaded the font to Design Tools (also known as Design Manager) and added it to the stylesheet? Here are directions on how to do so. Can you also please share which theme you are using? Is it the Growth Theme Template?

Thanks!

Best,

Kristen

Re: Uploaded fonts not available for Landing Page

SVanSickle — Thu, 16 Mar 2023 19:46:38 GMT

Hmmm.. yes i think so, i have uploaded them in two places. And it seems to be a 'Growth Theme Template'. but maybe my code is wrong? is css required?

Re: Uploaded fonts not available for Landing Page

kvlschaefer — Mon, 20 Mar 2023 09:31:30 GMT

Hi @SVanSickle,

Thanks for the additional information!

If you only want to apply this custom font to a single page, you can use the advanced options section of the page in to either add some additional HTML or attach a custom stylesheet.

The custom stylesheet may be better if you want to reuse it on multiple pages. The steps are mentioned in the article Use a custom font in a stylesheet. Steps to Create, edit, and attach CSS stylesheet files to style your site/page.

Hope this helps!

Best,

Kristen

Re: Uploaded fonts not available for Landing Page

SVanSickle — Mon, 20 Mar 2023 15:11:44 GMT

Hmmm... this is still a bit over my head.. and the documentation is not easy for me to understand.

What other options do i have to get support with this? I just need to add 2 fonts.. and this is way more complicated that is worth it...

Is there anyway you can send me a draft for a stylesheet code?

@kvlschaefer wrote:
Hi @SVanSickle,

Thanks for the additional information!

If you only want to apply this custom font to a single page, you can use the advanced options section of the page in to either add some additional HTML or attach a custom stylesheet.

The custom stylesheet may be better if you want to reuse it on multiple pages. The steps are mentioned in the article Use a custom font in a stylesheet. Steps to Create, edit, and attach CSS stylesheet files to style your site/page.

Hope this helps!

Best,
Kristen

Re: Uploaded fonts not available for Landing Page

SVanSickle — Tue, 21 Mar 2023 16:46:10 GMT

Hello @kvlschaefer ,

Found this video: https://www.youtube.com/watch?v=xQ07ytgoz6Y

See @ 1 minute in. I am noticing that I do not have 'Stylesheets' available under webpage settings. See image below.

Re: Uploaded fonts not available for Landing Page

kvlschaefer — Wed, 22 Mar 2023 14:49:57 GMT

Hi @SVanSickle,

Thanks for the video and screenshot.

I will take a look at it and get back to you when I have an update.

Thank you,

Kristen

Re: Uploaded fonts not available for Landing Page

kvlschaefer — Fri, 24 Mar 2023 16:41:56 GMT

Hi @SVanSickle,

Thank you for your patience while I was looking into this. I hear you on this being a lengthy process and I appreciate your feedback regarding the knowledge base document.

The reason we are not seeing this option on your page is that it is associated with a theme.

Here are the steps you'll want to take to add a custom font. Please note that they require some coding knowledge:

1) Click on the "Edit this Template" button under "Templates" in the page settings. The template will open in the Design Manager.

2) Once you have opened up Design Manager, you'll need to click on "Create a Child Theme" in order to make edits to the theme itself.

3) Follow these directions to upload your custom fonts to the theme (please note this requires some CSS and JSON coding). You'll need to add the fonts folder and create the files described in the developer documentation.

I also wanted to tag in our subject matter experts to see if they have any tips on uploading custom fonts to a theme in a free account.

Hi @Jnix284, @Anton, @Teun - Do you have any tips for @SVanSickle to upload custom fonts to a theme?

Thank you!

Best,

Kristen

Re: Uploaded fonts not available for Landing Page

Jnix284 — Fri, 24 Mar 2023 17:53:50 GMT

Happy to help @kvlschaefer , hi @SVanSickle

Custom fonts can be a little challenging because they do require code experience.

While you can create a child theme and add the custom fonts as Kristen suggested, you would also have to move all of your pages to the child theme.

As an alternative, you can use the Site Header HTML to configure the fonts - all the code below needs to be within the Style HTML tags as noted in the link.

Here's what I would do:

1 - move the fonts from Design Tools to Marketing > Files > fonts (add a folder and load the files there).

This will provide you a much easier to use URL for configuring the fonts in the code.

Once you have the files loaded, you'll view the details to copy the URL and use that in the code below, make sure you update all 4 URLs.

2 - you'll need to add a font-face declaration for each font weight you want to use in the site header HTML as noted above - update the code below with the URLs from step 1

@font-face { font-family: 'dumondi'; src: local('dumondi-regular'), url('https://cdn2.hubspot.net/hubfs/YOUR_HUBSPOT_ID/internal_font_name.woff') format('woff'), url('https://cdn2.hubspot.net/hubfs/YOUR_HUBSPOT_ID/internal_font_name.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }

@font-face { font-family: 'dumondi'; src: local('dumondi-bold'), url('https://cdn2.hubspot.net/hubfs/YOUR_HUBSPOT_ID/internal_font_name.woff') format('woff'), url('https://cdn2.hubspot.net/hubfs/YOUR_HUBSPOT_ID/internal_font_name.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

3 - this is the challenging part, you'll need to redefine the fonts used in Growth theme with your new font family - this will essentially overwrite the theme settings for the font family, so even if you change the font in theme settings, it won't change unless you remove this code.

Growth uses a Primary and Secondary font, so you'll replace both if you want all fonts to be the same, the font weight can still be set in the theme settings, but if you want to set it here, you can:

:root { primary_font: dumondi, sans-serif !important; secondary_font: dumondi, sans-serif !important; }

Even after you do this, when you go to theme settings, you won't see Dumondi on the list it will just update automatically across your theme assets.

Let me know if you have questions, I'm happy to help!

Re: Uploaded fonts not available for Landing Page

SVanSickle — Tue, 28 Mar 2023 21:03:07 GMT

Hi @Jnix284 ,

Thank you for this. Seems to be more straight forward to our current purposes.

Regarding #3, could you please point me to where I am to insert this :root code? I am unable to find it within the theme editor.

Much gratitude,

Schuyler

Re: Uploaded fonts not available for Landing Page

Jnix284 — Tue, 28 Mar 2023 21:05:19 GMT

@SVanSickle all of the code will go in the same place, not in the theme editor.

Here's a doc reference for how to add it to the Site Header HTML

Re: Uploaded fonts not available for Landing Page

SVanSickle — Tue, 28 Mar 2023 21:08:42 GMT

Hmmmm yes, however, there does not seem to be a 'Templates' tab here..

Re: Uploaded fonts not available for Landing Page

Jnix284 — Tue, 28 Mar 2023 21:13:45 GMT

@SVanSickle you're right, I apologize - I just checked one of my CMS Starter accounts and it's not an option. I thought this setting was excluded from CMS Free only.

Without a child theme where you can add code, it won't be possible to configure a custom font.

In a child theme, you would use the same code I provided (without the <style> tags).

If you create a child theme as Kristen suggested, it will have a child.css file included where you can add the custom font.

Then from each of your pages, on the settings tab, you would have to change the template so that you can change from the marketplace theme to the child theme. The template file will be the same and it won't impact your content, it will just allow you to extend the theme with customization like this.