Null "size" property in Font fields

[paladinodeimari]

"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}

[Stephanie-OG]

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:

<link rel="stylesheet" href="https://www.stephanieogaygarcia.com/hs-fs/hub/12345678/hub_generated/template_assets/12345678901/1234567890123/bold-theme/css/theme-overrides.min.css">

I hope that helps!

---

Stephanie O'Gay Garcia

Freelance HubSpot CMS Developer

Website | Contact

[paladinodeimari]

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:

[Stephanie-OG · Accepted solution]

@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

[paladinodeimari]

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.

[Jaycee_Lewis]

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