topic Re: Theme json file, change global font to Adobe? in CMS Development

Theme json file, change global font to Adobe?

Pixelwerx — Wed, 24 Feb 2021 16:56:29 GMT

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:

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

Re: Theme json file, change global font to Adobe?

Pixelwerx — Wed, 24 Feb 2021 16:57:02 GMT

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

Re: Theme json file, change global font to Adobe?

dennisedson — Thu, 25 Feb 2021 16:44:45 GMT

@Pixelwerx ,

That has to be called somewhere 🤔

Is it on all pages or just one?

@piersg , you have any ideas here?

Re: Theme json file, change global font to Adobe?

piersg — Thu, 25 Feb 2021 16:46:51 GMT

@Anton's your man

Re: Theme json file, change global font to Adobe?

dennisedson — Thu, 25 Feb 2021 16:48:44 GMT

@Anton has always been my man 😉

Re: Theme json file, change global font to Adobe?

piersg — Thu, 25 Feb 2021 16:51:20 GMT

Re: Theme json file, change global font to Adobe?

Pixelwerx — Thu, 25 Feb 2021 17:32:13 GMT

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

Re: Theme json file, change global font to Adobe?

dennisedson — Thu, 25 Feb 2021 18:04:39 GMT

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

Re: Theme json file, change global font to Adobe?

Pixelwerx — Thu, 25 Feb 2021 19:23:41 GMT

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

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

Oliver

Re: Theme json file, change global font to Adobe?

Anton — Fri, 26 Feb 2021 18:05:41 GMT

Hi @Pixelwerx,

it seems that you have multiple questions.

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.
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

Re: Theme json file, change global font to Adobe?

Anton — Fri, 26 Feb 2021 18:07:14 GMT

@piersg @dennisedson thanks for brighten my day guys 😄

Re: Theme json file, change global font to Adobe?

Pixelwerx — Fri, 26 Feb 2021 22:45:57 GMT

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

Re: Theme json file, change global font to Adobe?

Pixelwerx — Fri, 26 Feb 2021 23:36:01 GMT

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

Re: Theme json file, change global font to Adobe?

dennisedson — Sat, 27 Feb 2021 03:31:46 GMT

Really cool solution @Anton!
We might need to talk about a how to blog post here 😉

Re: Theme json file, change global font to Adobe?

DCarlyle — Wed, 15 Feb 2023 17:22:01 GMT

Hi Anton, thanks for the helpful reply. I have a soimewhat similar question. I loaded two brand fonts we use via @font-face and I want to update all the global fonts in the theme-overrides.css file with them. Is the above answer the same if the new custom font isn't loaded via a CDN but is added within say the typography.css file as @font-face rules? (For example looking how to update the body_font variable)

Re: Theme json file, change global font to Adobe?

Anton — Wed, 08 Mar 2023 14:16:01 GMT

Hi @DCarlyle,

it's almost the same. If you're using fonts that are being loaded from an external source like CDN you don't really need the fields.json part. You can directly write into your theme-overrides.css a code like this

@import url("https://use.typekit.net/XXX") {% set body_font = FONTNAME %} {#put the name of the font here how it's defined in the service/file. Tipp: Most fonts come with a readme/documentation/CSS file where you can find an example how to write the name #} {% set body_font_fallback = Arial, sans-serif %} {# replace it with the systemfont you want #} {% set body_font_weight = 400 %} {# put the font-weight here#} {% set bold_font_weight = 800 %} {% just an example if you want/need to use multiple font-weights %} {% set h1_size = "3"%} {% set h2_size = "2.5" %} {% set h3_size = "2" %} {% set h4_size = "1.75" %} {% set headline_unit = "rem" %} body{ font-family:'{{ body_font }}', {{ body_font_fallback }}; font-weight:{{ body_font_weight }}; } h1,h2,h3,h4,strong{ font-weight: {{ bold_font_weight }}; } h1{ font-size: {{ h1_size ~ headline_unit }}; } h2{ font-size: {{ h2_size ~ headline_unit }}; } h3{ font-size: {{ h3_size ~ headline_unit }}; } h4{ font-size: {{ h4_size ~ headline_unit }}; }

If you'd like to add options for font-weight, font size to the theme, you can use choice and number fields.

I'm doing something like this when working with external fonts

fields.json

{ "name" : "body_weight", "label" : "Body font weight", "required" : false, "locked" : false, "multiple":"true", "display" : "select", "choices" : [ [ "100", "100/thin" ], [ "200", "200/extra light" ],[ "300", "300/light" ],[ "400", "400/regular" ],[ "500", "500/medium" ],[ "600", "600/semi-bold" ],[ "700", "700/bold" ],[ "800", "800/extra bold" ],[ "900", "900/black" ] ], "type" : "choice", "default" : "400" },{ "name" : "bold_weight", "label" : "Bold font weight", "required" : false, "locked" : false, "multiple":"true", "display" : "select", "choices" : [ [ "100", "100/thin" ], [ "200", "200/extra light" ],[ "300", "300/light" ],[ "400", "400/regular" ],[ "500", "500/medium" ],[ "600", "600/semi-bold" ],[ "700", "700/bold" ],[ "800", "800/extra bold" ],[ "900", "900/black" ] ], "type" : "choice", "default" : "800" }, { "name" : "h1_size", "label" : "Headline 1(H1) size", "required" : false, "locked" : false, "display" : "slider", "min" : 2, "max" : 5, "step" : 0.25, "type" : "number", "suffix" : "rem", "default" : "3", }, { "name" : "h2_size", "label" : "Headline 1(H2) size", "required" : false, "locked" : false, "display" : "slider", "min" : 2, "max" : 4, "step" : 0.25, "type" : "number", "suffix" : "rem", "default" : "2.5", }

the implementation of such code in the CSS is quite similar

theme-overrides.css

@import url("https://use.typekit.net/XXX") {% set body_font = FONTNAME %} {#put the name of the font here how it's defined in the service/file. Tipp: Most fonts come with a readme/documentation/CSS file where you can find an example how to write the name #} {% set body_font_fallback = Arial, sans-serif %} {# replace it with the systemfont you want #} {% set body_font_weight = theme.fonts.body_weight %} {% set bold_font_weight = theme.fonts.bold_weight %} {% set h1_size = theme.fonts.h1_size %} {% set h2_size = theme.fonts.h2_size %} {% set h3_size = theme.fonts.h3_size %} {% set h4_size = theme.fonts.h4_size %} {% set headline_unit = "rem" %} body{ font-family:'{{ body_font }}', {{ body_font_fallback }}; font-weight:{{ body_font_weight }}; } h1,h2,h3,h4,strong{ font-weight: {{ bold_font_weight }}; } h1{ font-size: {{ h1_size ~ headline_unit }}; } h2{ font-size: {{ h2_size ~ headline_unit }}; } h3{ font-size: {{ h3_size ~ headline_unit }}; } h4{ font-size: {{ h4_size ~ headline_unit }}; }

best,

Anton

Re: Theme json file, change global font to Adobe?

Pixelwerx — Wed, 08 Mar 2023 15:29:20 GMT

Thank you for the additional information, it's very helpful!