# Null "size" property in Font fields

**URL:** <https://community.hubspot.com/t/null-size-property-in-font-fields/61463>\
**Category:** CMS Development\
**Created:** [July 21, 2022, 5:11pm UTC](https://community.hubspot.com/t/null-size-property-in-font-fields/61463 "2022-07-21T17:11:54Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![paladinodeimari](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/paladinodeimari/32/14679_2.png) [@paladinodeimari](https://community.hubspot.com/u/paladinodeimari)\
**Post date:** [July 21, 2022, 5:11pm UTC](https://community.hubspot.com/t/null-size-property-in-font-fields/61463/1 "2022-07-21T17:11:54Z")

</div>

“size” and “size\_unit” return NULL but other properties are filled correctly.

I setup this fields.json:

```lia-code-sample
[
 {
 "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:

```lia-code-sample
{% 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 }};
}

```

 ![](https://d2qpr2jzcazej7.cloudfront.net/original/3X/d/7/d71522c4169491635efb78dd21be420062c824cf.png)

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

 ![paladinodeimari_1-1658423372523.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/5/f/5fd88729babe93e4d7aaabf6a6380b99d09213d9.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}`

---

<div class="post-metadata">

**Author:** ![Jaycee\_Lewis](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jaycee_lewis/32/61352_2.png) [@Jaycee\_Lewis](https://community.hubspot.com/u/Jaycee_Lewis)\
**Post date:** [July 21, 2022, 9:15pm UTC](https://community.hubspot.com/t/null-size-property-in-font-fields/61463/2 "2022-07-21T21:15:05Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Stephanie-OG](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/stephanie-og/32/73267_2.png) [@Stephanie-OG](https://community.hubspot.com/u/Stephanie-OG)\
**Post date:** [July 22, 2022, 1:25pm UTC](https://community.hubspot.com/t/null-size-property-in-font-fields/61463/3 "2022-07-22T13:25:22Z")

</div>

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](https://d2qpr2jzcazej7.cloudfront.net/original/3X/b/b/bb127b98f9dafbc4a730a3bfcf738b1417ade100.jpeg)

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](http://www.stephanieogaygarcia.com?utm_source=HubSpotCommunity)

[Website](http://www.stephanieogaygarcia.com?utm_source=HubSpotCommunity) | [Contact](http://www.stephanieogaygarcia.com/contact?utm_source=HubSpotCommunity)

---

<div class="post-metadata">

**Author:** ![paladinodeimari](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/paladinodeimari/32/14679_2.png) [@paladinodeimari](https://community.hubspot.com/u/paladinodeimari)\
**Post date:** [July 22, 2022, 1:36pm UTC](https://community.hubspot.com/t/null-size-property-in-font-fields/61463/4 "2022-07-22T13:36:14Z")

</div>

Hi Stephanie, thnk you for your reply.

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

 ![](https://d2qpr2jzcazej7.cloudfront.net/original/3X/2/b/2b67c0b4b5dcaaefc9da1f95d30c0f5aca2ef4b2.jpeg)

Some data are missing here, some not.

Yes, my stylesheet is named clc.css.

View-source from my browser shows it is used:

 ![](https://d2qpr2jzcazej7.cloudfront.net/original/3X/f/6/f69c4ec2cfa91b32fff58250fb18d06efc7ebb7e.png)

---

<div class="post-metadata">

**Author:** ![Stephanie-OG](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/stephanie-og/32/73267_2.png) [@Stephanie-OG](https://community.hubspot.com/u/Stephanie-OG)\
**Post date:** [July 22, 2022, 2:53pm UTC](https://community.hubspot.com/t/null-size-property-in-font-fields/61463/5 "2022-07-22T14:53:47Z")

</div>

@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:

```lia-code-sample
[
 {
 "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](http://www.stephanieogaygarcia.com?utm_source=HubSpotCommunity)

[Website](http://www.stephanieogaygarcia.com?utm_source=HubSpotCommunity) | [Contact](http://www.stephanieogaygarcia.com/contact?utm_source=HubSpotCommunity)

---

<div class="post-metadata">

**Author:** ![paladinodeimari](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/paladinodeimari/32/14679_2.png) [@paladinodeimari](https://community.hubspot.com/u/paladinodeimari)\
**Post date:** [July 23, 2022, 3:24pm UTC](https://community.hubspot.com/t/null-size-property-in-font-fields/61463/6 "2022-07-23T15:24:58Z")

</div>

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.