CMS Development

belekate
Membre

Module Font Field Settings

Hi!
I'm working on the custom module which will help my client to make a heading

I have couple questions about fields with type "font"

1. line-height
Is there a possibility to have a line-height setting inside this "font" settings? somewhere there: https://prnt.sc/CNpd5u7mj7Ur 
So the content manager could setup unique line-height for every heading

2. custom font-family
My client uses a custom fonts like "Avenir" and "Avenir Next" with different font-weight
So I would like to know how I could add this fonts to this list: https://prnt.sc/ZmgxxARbKC9J 

This is my font settings that I wrote: https://prnt.sc/No63D08Ige2x
I enebled "load_external_fonts" option and I also checked this documentation: https://developers.hubspot.com/docs/cms/building-blocks/module-theme-fields#font
It said that "HubSpot automatically loads the selected web font to the page if the font is selected and referenced by HubL in a stylesheet or in a module. Set this to false, if you are already loading the font to the page, that way the font won't load twice."
The site already connected to the fonts above, but for test puroposes I connect this fints for module too (https://prnt.sc/IYoSmUBq8E45)
But I still can't see this fonts in the list here: https://prnt.sc/ZmgxxARbKC9J 

Could you help me, please?
Thanks in advance!

0 Votes
1 Réponse
BarryGrennan
Contributeur de premier rang

Module Font Field Settings

1. I'd just use a numerical field then pass it to the module within a {% require_css %} tag

 

2. I see you're loading the font from a file within your theme. So it's not a web font (i.e. not a Google font). If they're not Google fonts you wont see them in the standard dropdown. This is a custom font and in this context is only available via stylesheet. See here

 

Now you could always create a boolean control toggle for font type "Standard and Web" or "Custom". If "Standard and Web" is selected show the standard input. If "Custom" is selected you show a Choice field where you've entered your options. Then you'd set the scope_css for the module such that it picked up the choices made.

 


profile2022aBarry Grennan

Freelance HubSpot CMS Developer

Website | Contact | LinkedIn

 

 

 


profile2022aBarry Grennan

Freelance HubSpot CMS Developer

Website | Contact | LinkedIn

 

 

0 Votes