Theme json file, change global font to Adobe?

SOLVE
Pixelwerx
Contributor

Good day,

 

I am working on a theme for our website update, and I am using Typekit fonts, as we didn't like any of the Google fonts.

 

So I've imported them using the CSS import, and am calling them in another CSS file, and everything is working on that front.


However, the json file is setup to pull Google fonts under 'font-set', and so my pages are unncecessarily pulling in Googles font code in the head:

 

<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:regular,500,600|Roboto:regular&amp;display=swap">

 

 

I have searched and can't find anything about this. Can I change the font set in the json file to match the Adobe fonts I'm pulling in, or do I just need to remove the entire global font section from the json? Of course doing that leaves a bunch of other references to the global fonts that would have to be changed. 

 

The problem is I don't know how to do that the best way without screwing everything up. Do you just remove any lines relating to fonts?

 

Has anyone else dealt with this issue and if so, do you have any advice?

 

Please let me know if you need further info to provide assistance, and thank you in advance for any help.

 

Oliver

 

 

0 Upvotes
1 Accepted solution

Accepted Solutions
Anton
Solution
Key Advisor | Diamond Partner

Hi @Pixelwerx,

it seems that you have multiple questions.

  1. deactivate unnecessary loading of google fonts
    to deactivate the loading of unnecessary google-fonts the magic is done very easy: set "load_external_fonts" to false. 
  2. Load Adobe fonts
    Since Adobe fonts are kinda "paid" HubSpot doesn't support them by default. But since I'm in a kinda similar situation(developing a custom theme for a customer with custom fonts) I've did it like this

 

fields.json:

{
  "label": "Text",
  "name": "text",
  "type": "font",
  "visibility": {
    "hidden_subfields": {
      "bold": true,
      "italic": true,
      "size": true,
      "underline": true
    }
  },
  "load_external_fonts": false,
  "inherited_value": {
    "property_value_paths": {
      "color": "theme.colors.black.color"
    }
  },
  "default": {
    "font": "YOUR FONT", {# type the exact font name here #}
"variant": FONT-VARIANT {# optional #}
  }
},
{
  "label": "Text Fallback",
  "name": "text_fallback",
  "type": "font",
  "visibility": {
    "hidden_subfields": {
      "bold": true,
      "italic": true,
      "size": true,
      "underline": true
    }
  },
  "load_external_fonts": false,
  "inherited_value": {
    "property_value_paths": {
      "color": "theme.colors.black.color"
    }
  },
  "default": {
    "font": "Arial"
  }
},
...

 

 

theme.css(the file where all settings from the theme come together):

@import url("https://use.typekit.net/XXX") 

{% set body_font = theme.fonts.text.font %}
{% set body_font_fallback = theme.fonts.text_fallback.font %}
{% set body_font_weight = theme.fonts.text.variant %}

body{
font-family:'{{ body_font }}', {{ body_font_fallback }};
font-weight:{{ body_font_weight }};
}

 

Hope this helps. 

 

 

best, 

Anton

 




check
Did my post help answer your query? Help the Community by marking it as a solution



View solution in original post

13 Replies 13
Pixelwerx
Contributor

If it helps, here is the json code:

[
  {
    "label": "Global colors",
    "name": "global_colors",
    "type": "group",
    "children": [
      {
        "label": "Primary color",
        "name": "primary",
        "type": "color",
        "visibility": {
          "hidden_subfields": {
            "opacity": true
          }
        },
        "default": {
          "color": "#005696"
        }
      },
      {
        "label": "Primary color dark",
        "name": "primary_dark",
        "type": "color",
        "visibility": {
          "hidden_subfields": {
            "opacity": true
          }
        },
        "default": {
          "color": "#013a66"
        }
      },
      {
        "label": "Primary color light",
        "name": "primary_light",
        "type": "color",
        "visibility": {
          "hidden_subfields": {
            "opacity": true
          }
        },
        "default": {
          "color": "#6caedf"
        }
      },
      {
        "label": "Secondary color",
        "name": "secondary",
        "type": "color",
        "visibility": {
          "hidden_subfields": {
            "opacity": true
          }
        },
        "default": {
          "color": "#f57b20"
        }
      },
      {
        "label": "Secondary color dark",
        "name": "secondary_dark",
        "type": "color",
        "visibility": {
          "hidden_subfields": {
            "opacity": true
          }
        },
        "default": {
          "color": "#e65300"
        }
      },
      {
        "label": "Gray color",
        "name": "gray",
        "type": "color",
        "visibility": {
          "hidden_subfields": {
            "opacity": true
          }
        },
        "default": {
          "color": "#7e8083"
        }
      },
      {
        "label": "Gray color light",
        "name": "gray_light",
        "type": "color",
        "visibility": {
          "hidden_subfields": {
            "opacity": true
          }
        },
        "default": {
          "color": "#a7a9ac"
        }
      },
      {
        "label": "Gray color dark",
        "name": "gray_dark",
        "type": "color",
        "visibility": {
          "hidden_subfields": {
            "opacity": true
          }
        },
        "default": {
          "color": "#535559"
        }
      },
      {
        "label": "Accent color",
        "name": "accent",
        "type": "color",
        "visibility": {
          "hidden_subfields": {
            "opacity": true
          }
        },
        "default": {
          "color": "#3daf2c"
        }
      },
      {
        "label": "Text color",
        "name": "text",
        "type": "color",
        "visibility": {
          "hidden_subfields": {
            "opacity": true
          }
        },
        "default": {
          "color": "#192b38"
        }
      },
      {
        "label": "Dark color",
        "name": "dark",
        "type": "color",
        "visibility": {
          "hidden_subfields": {
            "opacity": true
          }
        },
        "default": {
          "color": "#1c3345"
        }
      },
      {
        "label": "Light color",
        "name": "light",
        "type": "color",
        "visibility": {
          "hidden_subfields": {
            "opacity": true
          }
        },
        "default": {
          "color": "#c4c5c6"
        }
      }
    ]
  },
  {
    "label": "Global fonts",
    "name": "global_fonts",
    "type": "group",
    "children": [
      {
        "label": "Primary font",
        "name": "primary_font",
        "type": "font",
        "visibility": {
          "hidden_subfields": {
            "size": true,
            "styles": true
          }
        },
        "load_external_fonts": true,
        "inherited_value": {
          "property_value_paths": {
            "color": "theme.global_colors.text.color"
          }
        },
        "default": {
          "font": "Roboto",
          "font_set": "GOOGLE"
        }
      },
      {
        "label": "Secondary font",
        "name": "secondary_font",
        "type": "font",
        "visibility": {
          "hidden_subfields": {
            "size": true,
            "styles": true
          }
        },
        "load_external_fonts": true,
        "inherited_value": {
          "property_value_paths": {
            "color": "theme.global_colors.dark.color"
          }
        },
        "default": {
          "font": "Montserrat",
          "font_set": "GOOGLE"
        }
      }
    ]
  },
  {
    "label": "Website header",
    "name": "header",
    "type": "group",
    "children": [
      {
        "label": "Background color",
        "name": "background_color",
        "type": "color",
        "default": {
          "color": "#ffffff",
          "opacity": 100
        }
      },
      {
        "label": "Menu link color",
        "name": "menu_link_color",
        "type": "color",
        "visibility": {
          "hidden_subfields": {
            "opacity": true
          }
        },
        "inherited_value": {
          "property_value_paths": {
            "color": "theme.global_fonts.primary_font.color"
          }
        }
      },
      {
        "label": "Child menu border color",
        "name": "child_menu_border_color",
        "type": "color",
        "visibility": {
          "hidden_subfields": {
            "opacity": true
          }
        },
        "default": {
          "color": "#494A52"
        }
      }
    ]
  },
  {
    "label": "Typography",
    "name": "typography",
    "type": "group",
    "children": [
      {
        "label": "Base",
        "name": "base",
        "type": "font",
        "visibility": {
          "hidden_subfields": {
            "styles": true
          }
        },
        "load_external_fonts": true,
        "inherited_value": {
          "property_value_paths": {
            "color": "theme.global_fonts.primary_font.color",
            "font": "theme.global_fonts.primary_font.font",
            "font_set": "theme.global_fonts.primary_font.font_set"
          }
        },
        "default": {
          "size": 18,
          "size_unit": "px"
        }
      },
      {
        "label": "Heading one (H1)",
        "name": "heading_one",
        "type": "font",
        "load_external_fonts": true,
        "inherited_value": {
          "property_value_paths": {
            "color": "theme.global_fonts.secondary_font.color",
            "font": "theme.global_fonts.secondary_font.font",
            "font_set": "theme.global_fonts.secondary_font.font_set"
          }
        },
        "default": {
          "size" : {
            "units" : "px",
            "value" : 54
          },
          "styles": {
            "text-decoration" : "none"
          },
          "variant": "600"
        }
      },
      {
        "label": "Heading two (H2)",
        "name": "heading_two",
        "type": "font",
        "load_external_fonts": true,
        "inherited_value": {
          "property_value_paths": {
            "color": "theme.global_fonts.secondary_font.color",
            "font": "theme.global_fonts.secondary_font.font",
            "font_set": "theme.global_fonts.secondary_font.font_set"
          }
        },
        "default": {
          "size" : {
            "units" : "px",
            "value" : 43
          },
          "styles": {
            "text-decoration" : "none"
          },
          "variant": "600"
        }
      },
      {
        "label": "Heading three (H3)",
        "name": "heading_three",
        "type": "font",
        "load_external_fonts": true,
        "inherited_value": {
          "property_value_paths": {
            "color": "theme.global_fonts.secondary_font.color",
            "font": "theme.global_fonts.secondary_font.font",
            "font_set": "theme.global_fonts.secondary_font.font_set"
          }
        },
        "default": {
          "size" : {
            "units" : "px",
            "value" : 31
          },
          "styles": {
            "text-decoration" : "none"
          },
          "variant": "600"
        }
      },
      {
        "label": "Heading four (H4)",
        "name": "heading_four",
        "type": "font",
        "load_external_fonts": true,
        "inherited_value": {
          "property_value_paths": {
            "color": "theme.global_fonts.secondary_font.color",
            "font": "theme.global_fonts.secondary_font.font",
            "font_set": "theme.global_fonts.secondary_font.font_set"
          }
        },
        "default": {
          "size" : {
            "units" : "px",
            "value" : 23
          },
          "styles": {
            "text-decoration" : "none"
          },
          "variant": "600"
        }
      },
      {
        "label": "Heading five (H5)",
        "name": "heading_five",
        "type": "font",
        "load_external_fonts": true,
        "inherited_value": {
          "property_value_paths": {
            "font": "theme.global_fonts.secondary_font.font",
            "font_set": "theme.global_fonts.secondary_font.font_set"
          }
        },
        "default": {
          "color": "#000000",
          "size" : {
            "units" : "px",
            "value" : 20
          },
          "styles": {
            "text-decoration" : "none"
          },
          "variant": "500"
        }
      },
      {
        "label": "Heading six (H6)",
        "name": "heading_six",
        "type": "font",
        "load_external_fonts": true,
        "inherited_value": {
          "property_value_paths": {
            "color": "theme.global_fonts.secondary_font.color",
            "font": "theme.global_fonts.secondary_font.font",
            "font_set": "theme.global_fonts.secondary_font.font_set"
          }
        },
        "default": {
          "size" : {
            "units" : "px",
            "value" : 14
          },
          "styles": {
            "text-decoration" : "none"
          }
        }
      },
      {
        "label": "Link color",
        "name": "link_color",
        "type": "color",
        "visibility": {
          "hidden_subfields": {
            "opacity": true
          }
        },
        "default": {
          "color": "#0074cc"
        }
      }
    ]
  },
  {
    "label": "Buttons",
    "name": "buttons",
    "type": "group",
    "children": [
      {
        "label": "Background color",
        "name": "background_color",
        "type": "color",
        "inherited_value": {
          "property_value_paths": {
            "color": "theme.global_colors.secondary.color"
          }
        },
        "default": {
          "opacity": 100
        }
      },
      {
        "label": "Text color",
        "name": "text_color",
        "type": "color",
        "visibility": {
          "hidden_subfields": {
            "opacity": true
          }
        },
        "default": {
          "color": "#ffffff"
        }
      },
      {
        "label": "Border width",
        "name": "border_width",
        "type": "number",
        "display": "slider",
        "max": 20,
        "min": 0,
        "default": 1
      },
      {
        "label": "Border color",
        "name": "border_color",
        "type": "color",
        "visibility": {
          "hidden_subfields": {
            "opacity": true
          }
        },
        "inherited_value": {
          "default_value_path": "theme.global_colors.secondary"
        }
      },
      {
        "label": "Border radius",
        "name": "border_radius",
        "type": "number",
        "display": "slider",
        "max": 100,
        "min": 0,
        "default": 3
      },
      {
        "label": "Horizontal padding",
        "name": "horizontal_padding",
        "type": "number",
        "display": "slider",
        "max": 100,
        "min": 0,
        "default": 20
      },
      {
        "label": "Vertical padding",
        "name": "vertical_padding",
        "type": "number",
        "display": "slider",
        "max": 100,
        "min": 0,
        "default": 8
      }
    ]
  },
  {
    "label": "Forms",
    "name": "forms",
    "type": "group",
    "children": [
      {
        "label": "Header background color",
        "name": "header_background_color",
        "type": "color",
        "inherited_value": {
          "default_value_path": "theme.global_colors.light"
        },
        "default": {
          "opacity": 100
        }
      },
      {
        "label": "Header text color",
        "name": "header_text_color",
        "type": "color",
        "visibility": {
          "hidden_subfields": {
            "opacity": true
          }
        },
        "inherited_value": {
          "default_value_path": "theme.global_colors.primary"
        }
      },
      {
        "label": "Label color",
        "name": "label_color",
        "type": "color",
        "visibility": {
          "hidden_subfields": {
            "opacity": true
          }
        },
        "inherited_value": {
          "property_value_paths": {
            "color": "theme.global_fonts.primary_font.color"
          }
        }
      },
      {
        "label": "Help text color",
        "name": "help_text_color",
        "type": "color",
        "visibility": {
          "hidden_subfields": {
            "opacity": true
          }
        },
        "inherited_value": {
          "property_value_paths": {
            "color": "theme.global_fonts.primary_font.color"
          }
        }
      },
      {
        "label": "Field border color",
        "name": "field_border_color",
        "type": "color",
        "visibility": {
          "hidden_subfields": {
            "opacity": true
          }
        },
        "default": {
          "color": "#D1D6DC"
        }
      },
      {
        "label": "Field focus border color",
        "name": "field_focus_border_color",
        "type": "color",
        "visibility": {
          "hidden_subfields": {
            "opacity": true
          }
        },
        "inherited_value": {
          "default_value_path": "theme.global_colors.gray"
        }
      }
    ]
  },
  {
    "label": "Tables",
    "name": "tables",
    "type": "group",
    "children": [
      {
        "label": "Header background color",
        "name": "header_background_color",
        "type": "color",
        "inherited_value": {
          "default_value_path": "theme.global_colors.primary"
        },
        "default": {
          "opacity": 100
        }
      },
      {
        "label": "Header text color",
        "name": "header_text_color",
        "type": "color",
        "visibility": {
          "hidden_subfields": {
            "opacity": true
          }
        },
        "default": {
          "color": "#ffffff"
        }
      },
      {
        "label": "Body background color",
        "name": "body_background_color",
        "type": "color",
        "default": {
          "color": "#ffffff",
          "opacity": 100
        }
      },
      {
        "label": "Body text color",
        "name": "body_text_color",
        "type": "color",
        "visibility": {
          "hidden_subfields": {
            "opacity": true
          }
        },
        "inherited_value": {
          "property_value_paths": {
            "color": "theme.global_fonts.primary_font.color"
          }
        }
      },
      {
        "label": "Footer background color",
        "name": "footer_background_color",
        "type": "color",
        "default": {
          "color": "#ffffff",
          "opacity": 100
        }
      },
      {
        "label": "Footer text color",
        "name": "footer_text_color",
        "type": "color",
        "visibility": {
          "hidden_subfields": {
            "opacity": true
          }
        },
        "inherited_value": {
          "property_value_paths": {
            "color": "theme.global_fonts.primary_font.color"
          }
        }
      },
      {
        "label": "Border color",
        "name": "border_color",
        "type": "color",
        "visibility": {
          "hidden_subfields": {
            "opacity": true
          }
        },
        "inherited_value": {
          "property_value_paths": {
            "color": "theme.global_fonts.primary_font.color"
          }
        }
      }
    ]
  },
  {
    "label" : "Components",
    "name" : "components_group",
    "type" : "group",
    "children" : [
      {
        "default" : true,
        "label" : "Animation",
        "locked" : false,
        "name" : "animation_toggle",
        "required" : false,
        "type" : "boolean"
      }
    ]
  },
  {
    "label": "Spacing",
    "name": "spacing",
    "type": "group",
    "children": [
      {
        "label": "Vertical spacing",
        "name": "vertical_spacing",
        "type": "number",
        "display": "slider",
        "max": 500,
        "min": 0,
        "default": 80
      },
      {
        "label": "Maximum content width",
        "name": "max_width",
        "type": "number",
        "display": "slider",
        "max": 2500,
        "min": 480,
        "default": 1150
      }
    ]
  },
  {
    "label": "Footer",
    "name": "footer",
    "type": "group",
    "children": [
      {
        "label": "Background color",
        "name": "background_color",
        "type": "color",
        "default": {
          "color": "#000000",
          "opacity": 100
        }
      },
      {
        "label": "Header text color",
        "name": "header_text_color",
        "type": "color",
        "visibility": {
          "hidden_subfields": {
            "opacity": true
          }
        },
        "default": {
          "color": "#ffffff",
          "opacity": 100
        }
      },
      {
        "label": "Text color",
        "name": "text_color",
        "type": "color",
        "visibility": {
          "hidden_subfields": {
            "opacity": true
          }
        },
        "default": {
          "color": "#a6a6a8",
          "opacity": 100
        }
      }
    ]
  }
]
0 Upvotes
dennisedson
Community Manager

@Pixelwerx ,

That has to be called somewhere 🤔

Is it on all pages or just one?

@piersg , you have any ideas here?

Thanks,

Dennis




Check out our Community Developer Blog
where we feature our Community driven developer podcast and how to content
0 Upvotes
Pixelwerx
Contributor

Thank you, yes it's on all pages. It is site-wide. We have selected two fonts (Gibson for headers, Proxima Nova for all other text). We of course had to get them from Typekit, as they don't seem to be availble from Google fonts.

 

I'm not sure I totally understand what you mean by 'That has to be called somewhere'.  Are you saying that the json has to have the global fonts code, or just that you need to one way or another call global fonts (which I am doing by including our typekit script call in the head)

 

Thanks

0 Upvotes
dennisedson
Community Manager

@Pixelwerx ,

I wasn't saying that it is required.  Apologies for that confusion.  I was just saying that something is requesting them.  Here's hoping @Anton knocks this one out of the park.

Thanks,

Dennis




Check out our Community Developer Blog
where we feature our Community driven developer podcast and how to content
0 Upvotes
Pixelwerx
Contributor

@dennisedson, gotcha. Thank you for taking the time.

 

I will wait and see if @Anton has any ideas.

 

Oliver

piersg
Key Advisor

@Anton's your man

dennisedson
Community Manager
@Anton has always been my man 😉
Thanks,

Dennis




Check out our Community Developer Blog
where we feature our Community driven developer podcast and how to content
piersg
Key Advisor

U4d1Nlm

Anton
Solution
Key Advisor | Diamond Partner

Hi @Pixelwerx,

it seems that you have multiple questions.

  1. deactivate unnecessary loading of google fonts
    to deactivate the loading of unnecessary google-fonts the magic is done very easy: set "load_external_fonts" to false. 
  2. Load Adobe fonts
    Since Adobe fonts are kinda "paid" HubSpot doesn't support them by default. But since I'm in a kinda similar situation(developing a custom theme for a customer with custom fonts) I've did it like this

 

fields.json:

{
  "label": "Text",
  "name": "text",
  "type": "font",
  "visibility": {
    "hidden_subfields": {
      "bold": true,
      "italic": true,
      "size": true,
      "underline": true
    }
  },
  "load_external_fonts": false,
  "inherited_value": {
    "property_value_paths": {
      "color": "theme.colors.black.color"
    }
  },
  "default": {
    "font": "YOUR FONT", {# type the exact font name here #}
"variant": FONT-VARIANT {# optional #}
  }
},
{
  "label": "Text Fallback",
  "name": "text_fallback",
  "type": "font",
  "visibility": {
    "hidden_subfields": {
      "bold": true,
      "italic": true,
      "size": true,
      "underline": true
    }
  },
  "load_external_fonts": false,
  "inherited_value": {
    "property_value_paths": {
      "color": "theme.colors.black.color"
    }
  },
  "default": {
    "font": "Arial"
  }
},
...

 

 

theme.css(the file where all settings from the theme come together):

@import url("https://use.typekit.net/XXX") 

{% set body_font = theme.fonts.text.font %}
{% set body_font_fallback = theme.fonts.text_fallback.font %}
{% set body_font_weight = theme.fonts.text.variant %}

body{
font-family:'{{ body_font }}', {{ body_font_fallback }};
font-weight:{{ body_font_weight }};
}

 

Hope this helps. 

 

 

best, 

Anton

 




check
Did my post help answer your query? Help the Community by marking it as a solution



View solution in original post

Pixelwerx
Contributor

Thank you for the reply Anton.

 

I will try modifying my json similar to your example and see if I can make it work without issue, and report back.

 

Thank you so much for taking the time, I really appreciate it!

 

Oliver

Pixelwerx
Contributor

This lead me in the right direction, thank you so much for your help. I'm going to mark as accepted solution.

 

Have a great weekend!

 

Oliver

dennisedson
Community Manager
Really cool solution @Anton!
We might need to talk about a how to blog post here 😉
Thanks,

Dennis




Check out our Community Developer Blog
where we feature our Community driven developer podcast and how to content
Anton
Key Advisor | Diamond Partner

@piersg @dennisedson  thanks for brighten my day guys  😄




check
Did my post help answer your query? Help the Community by marking it as a solution