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.
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
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
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)
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
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 }};
}
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)
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.