topic Re: Null "size" property in Font fields in CMS Development

Null "size" property in Font fields

paladinodeimari — Thu, 21 Jul 2022 17:12:20 GMT

"size" and "size_unit" return NULL but other properties are filled correctly.

I setup this fields.json:

[ { "label": "Tipografia", "name": "tipografia", "type": "group", "children": [ { "label": "Body", "name": "tipografia_body", "type": "font", "visibility": { "hidden_subfields": { "styles": true } }, "default": { "fallback": "sans-serif", "font": "Lato", "font_set": "GOOGLE", "color": "#000000" } }, { "label": "Menu Principale", "name": "tipografia_menu_principale", "type": "font", "visibility": { "hidden_subfields": { "styles": true } }, "default": { "fallback": "sans-serif", "font": "Lato", "font_set": "GOOGLE", "color": "#000000" } }, { "label": "Menu Secondario", "name": "tipografia_menu_secondario", "type": "font", "visibility": { "hidden_subfields": { "styles": true } }, "default": { "fallback": "sans-serif", "font": "Lato", "font_set": "GOOGLE", "color": "#000000" } }, { "label": "Titolo H1", "name": "tipografia_titolo_h1", "type": "font", "visibility": { "hidden_subfields": { "styles": true } }, "default": { "fallback": "sans-serif", "font": "Lato", "font_set": "GOOGLE", "color": "#000000" } }, { "label": "Titolo H2", "name": "tipografia_titolo_h2", "type": "font", "visibility": { "hidden_subfields": { "styles": true } }, "default": { "fallback": "sans-serif", "font": "Lato", "font_set": "GOOGLE", "color": "#000000" } }, { "label": "Paragrafo", "name": "tipografia_paragrafo", "type": "font", "visibility": { "hidden_subfields": { "styles": true } }, "default": { "fallback": "sans-serif", "font": "Lato", "font_set": "GOOGLE", "color": "#000000" } }, { "label": "Link", "name": "tipografia_link", "type": "font", "visibility": { "hidden_subfields": { "styles": true } }, "default": { "fallback": "sans-serif", "font": "Lato", "font_set": "GOOGLE", "color": "#000000" } } ] } ]

and this custom CSS file:

{% import './tools/_macros.css' %} {% set tipografia = theme.tipografia %} {% set tipografia_body = theme.tipografia.tipografia_body %} {% set tipografia_menu_principale = theme.tipografia.tipografia_menu_principale %} {% set tipografia_menu_secondario = theme.tipografia.tipografia_menu_secondario %} {% set tipografia_titolo_h1 = theme.tipografia.tipografia_titolo_h1 %} {% set tipografia_titolo_h2 = theme.tipografia.tipografia_titolo_h2 %} {% set tipografia_paragrafo = theme.tipografia.tipografia_paragrafo %} {% set tipografia_link = theme.tipografia.tipografia_link %} {###########################################################################} {########################### 3. Typography #############################} {###########################################################################} body { font-family: {{ tipografia_body.font }}; color: {{ tipografia_body.color }}; font-size: {{ tipografia_body.size ~ tipografia_body.size_unit }}; } p { font-family: {{ tipografia_paragrafo.font }}; color: {{ tipografia_paragrafo.color }}; font-size: {{ tipografia_paragrafo.size ~ tipografia_paragrafo.size_unit }}; } a { font-family: {{ tipografia_link.font }}; color: {{ tipografia_link.color }}; font-size: {{ tipografia_link.size ~ tipografia_link.size_unit }}; } h1 { font-family: {{ tipografia_titolo_h1.font }}; color: {{ tipografia_titolo_h1.color }}; font-size: {{ tipografia_titolo_h1.size ~ tipografia_titolo_h1.size_unit }}; } h2 { font-family: {{ tipografia_titolo_h2.font }}; color: {{ tipografia_titolo_h2.color }}; font-size: {{ tipografia_titolo_h2.size ~ tipografia_titolo_h2.size_unit }}; }

H1 should get 40px in size but it get only font-family and color.

This is what the var tipografia_titolo_h1 returns:

{font=Lato,font_set=GOOGLE,styles={font-family=Lato,sans-serif,font-style=normal,font-weight=normal,text-decoration=none},size=null,size_unit=null,color=#000000,variant=null,fallback=sans-serif,style=font-family:Lato,sans-serif;font-style:normal;font-weight:normal;text-decoration:none,css=color:#000;font-family:Lato,sans-serif}

Re: Null "size" property in Font fields

Jaycee_Lewis — Thu, 21 Jul 2022 21:15:05 GMT

Hi, @paladinodeimari! Welcome to the party 🎉 Thank you for including all those details and screenshots. Hey @Stephanie-OG @Gonzalo @Sjardo, have you run into similar issues with some styling not being applied as expected?

Thank you! — Jaycee

Re: Null "size" property in Font fields

Stephanie-OG — Fri, 22 Jul 2022 13:25:22 GMT

Hi @paladinodeimari - are you looking at the right stylesheet? Because your CSS should only be showing the h1 and not the other elements (.menu-principale... etc.). So I think that's probably pulling in from somewhere else. Is your stylesheet named clc.css?

First, you can make sure it's outputting the font size and unit by going to your stylesheet in the HubSpot Design Manager and clicking on "Show Output", you'll see something like this:

Then, I would "View Source" on your page and make sure your stylesheet is being used. In the case of my "theme-overrides.css" as you can see in the tab above, it's appearing on my website as:

I hope that helps!

Stephanie O'Gay Garcia

Freelance HubSpot CMS Developer

Website | Contact

Re: Null "size" property in Font fields

paladinodeimari — Fri, 22 Jul 2022 13:36:14 GMT

Hi Stephanie, thnk you for your reply.

This is the output of my css from HubSpot Design Manager:

Some data are missing here, some not.

Yes, my stylesheet is named clc.css.

View-source from my browser shows it is used:

Re: Null "size" property in Font fields

Stephanie-OG — Fri, 22 Jul 2022 14:53:47 GMT

@paladinodeimari - my bad, I was just working on a theme and I noticed that if you have the same CSS for multiple selectors it does bunch them up, I guess I don't do that a lot!

I tested your code on my portal and get the same null value issue. Now, I think that when you do put in a font size in the theme settings UI, it should work, so maybe that's a HubSpot issue.

However, if you put the default font sizes into your fields.json file, it will output them:

[ { "label": "Tipografia", "name": "tipografia", "type": "group", "children": [ { "label": "Body", "name": "tipografia_body", "type": "font", "visibility": { "hidden_subfields": { "styles": true } }, "default": { "fallback": "sans-serif", "font": "Lato", "font_set": "GOOGLE", "color": "#000000", "size": 20, "size_unit": "px" } }, { "label": "Menu Principale", "name": "tipografia_menu_principale", "type": "font", "visibility": { "hidden_subfields": { "styles": true } }, "default": { "fallback": "sans-serif", "font": "Lato", "font_set": "GOOGLE", "color": "#000000", "size": 20, "size_unit": "px" } }, { "label": "Menu Secondario", "name": "tipografia_menu_secondario", "type": "font", "visibility": { "hidden_subfields": { "styles": true } }, "default": { "fallback": "sans-serif", "font": "Lato", "font_set": "GOOGLE", "color": "#000000", "size": 20, "size_unit": "px" } }, { "label": "Titolo H1", "name": "tipografia_titolo_h1", "type": "font", "visibility": { "hidden_subfields": { "styles": true } }, "default": { "fallback": "sans-serif", "font": "Lato", "font_set": "GOOGLE", "color": "#000000", "size": 40, "size_unit": "px" } }, { "label": "Titolo H2", "name": "tipografia_titolo_h2", "type": "font", "visibility": { "hidden_subfields": { "styles": true } }, "default": { "fallback": "sans-serif", "font": "Lato", "font_set": "GOOGLE", "color": "#000000", "size": 20, "size_unit": "px" } }, { "label": "Paragrafo", "name": "tipografia_paragrafo", "type": "font", "visibility": { "hidden_subfields": { "styles": true } }, "default": { "fallback": "sans-serif", "font": "Lato", "font_set": "GOOGLE", "color": "#000000", "size": 20, "size_unit": "px" } }, { "label": "Link", "name": "tipografia_link", "type": "font", "visibility": { "hidden_subfields": { "styles": true } }, "default": { "fallback": "sans-serif", "font": "Lato", "font_set": "GOOGLE", "color": "#000000", "size": 20, "size_unit": "px" } } ] } ]

So maybe you can do that for now and then raise the issue to HubSpot.

Stephanie O'Gay Garcia

Freelance HubSpot CMS Developer

Website | Contact

Re: Null "size" property in Font fields

paladinodeimari — Sat, 23 Jul 2022 15:24:58 GMT

Thank You Stephanie,

I can confirm that also to me, if I put the default font sizes into your fields.json file, it will output them.

I will send a support request to HubSpot.