CMS Development

paladinodeimari
Contributor | Partner
Contributor | Partner

Null "size" property in Font fields

SOLVE

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

 

 

paladinodeimari_0-1658423277901.png

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

paladinodeimari_1-1658423372523.png

 

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}

 

 

0 Upvotes
1 Accepted solution
Stephanie-OG
Solution
Key Advisor

Null "size" property in Font fields

SOLVE

@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

View solution in original post

5 Replies 5
Stephanie-OG
Key Advisor

Null "size" property in Font fields

SOLVE

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: 

 

stylesheet_show-output.jpg

 

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

0 Upvotes
paladinodeimari
Contributor | Partner
Contributor | Partner

Null "size" property in Font fields

SOLVE

Hi Stephanie, thnk you for your reply.

 

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

paladinodeimari_0-1658496805392.png

Some data are missing here, some not.

 

Yes, my stylesheet is named clc.css.

 

View-source from my browser shows it is used:

paladinodeimari_1-1658496945563.png

 

 

 

0 Upvotes
Stephanie-OG
Solution
Key Advisor

Null "size" property in Font fields

SOLVE

@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
Contributor | Partner
Contributor | Partner

Null "size" property in Font fields

SOLVE

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.

0 Upvotes
Jaycee_Lewis
Community Manager
Community Manager

Null "size" property in Font fields

SOLVE

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

linkedin

Jaycee Lewis

Developer Community Manager

Community | HubSpot