hello all,
since there is a wave of warnings rolling through the country, we would like to host the google fonts we use on our website locally, preferably yesterday.
great timing, because all css-affine people are on vacation.
can someone please tell me if this is possible and if so, where i can upload & set this?
yes, i know the article:
Benutzerdefinierte Schriftarten in HubSpot -
but can’t find anything about “local hosting” in it.
thank you.
greetings
sam
Hey Sam,
Local hosting just means you’re loading the fonts from your website instead of Google’s CDN. So, you’ll want to download the fonts to your computer, and then upload to your File Manager in HubSpot. In the CSS of your site, you’ll then tell it where your fonts are located in the file manager.
What the article you linked to mentions IS local hosting.
Hi Ashley,
While I could successfully upload the fonts to the file manager and adapt my custom css to load them, my websites and landing pages still seem to include calls to Google’s font sites:
<link rel=“preconnect” href=“https://fonts.googleapis.com”>
<link rel=“preconnect” href=“https://fonts.gstatic.com” crossorigin>
<link rel=“stylesheet” href=“https://fonts.googleapis.com/css?family=Work+Sans:regular&display=swap”>
I also tried removing the desired font from the landing page design, setting it there to Arial and appling the font familiy in my custom css to Roboto - the links to Google still remain in the landing page’s source code.
Any idea how to get rid of the Google links?
Thanks a lot, best
Sebastian
Hey,
It’s possible the code is hidden somewhere either in a custom module, template code, in website settings or is being used in your theme. It’s going to be difficult to diagnose without seeing the site. Feel free to include your URL here or PM me and I’ll try to take a look.
Thanks,
- Ashley
Hi Ashley,
Thanks a lot for your reply!
I was able to turn off the Google calls in our website pages using a clone of the original template and modifiying the fields.json for not using Google fonts + loading fonts previously uploaded to the document management.
However, I do not see how this approach could work with our Landing Pages as these are not based on the website template we’re using (we got the CMS Starter package, not Professional).
So even if I only apply Arial fonts on a Landing Page, the previously mentioned Google calls are still included (see Putting an end to the returns madness as an example).
As this Landing Page was based on the pre-set compass theme, I suspect that the theme itself includes the problematic loading of the Google APIs.
Any idea how we can get rid of it in our Landing Pages?
@Trettti: If you’re interested how to solve the issue for Website Pages, let me know, I’ll outline the approach for you.
Best,
Sebastian
Hello you two!
@ssuelmanndo you mind sharing how you managed to disable Google Fonts for your project? Before I found this thread I already made the same preparations as you: I downloaded Open Sans, uploaded it to HubSpot, added it to my <head> - works.
Anyways Google Fonts are still being loaded, I changed the Primary and Secondary Font to “Select Option” (is this allowed?) and I also edited the fields.json, meaning I set “load_external_fonts” : false, wherever possible.
What else did you change? Help is much appreciated.
[Maybe @ashleyidesign: Won’t this become/isn’t this already a general problem for all EU HubSpot pages??]
Best,
Roger
Hi Roger,
To disable the Google calls for Website pages I performed the following steps:
1) Clone your current template if using a predefined one in which you do not have wright permissions (in our case we used the Growth template which I cloned to my own version)
2) Edit the fields.json file and remove the “font_set”: “GOOGLE” parts (including the parameter “load_external_fonts” with value “false” did not work for me).
Before:
"label": "Primary",
"name": "primary",
"type": "font",
"visibility": {
"hidden_subfields": {
"bold": true,
"italic": true,
"size": true,
"underline": true
}
},
"default": {
"color": "#231f20",
"fallback": "sans-serif",
"font": "Montserrat",
"font_set": "GOOGLE",
"variant": "400"
}
After:
"label": "Primary",
"name": "primary",
"type": "font",
"visibility": {
"hidden_subfields": {
"bold": true,
"italic": true,
"size": true,
"underline": true
}
},
"default": {
"color": "#333333",
"fallback": "sans-serif",
"font": "Roboto",
"variant": "300"
}
I changed the values for my primary and secondary fonts in the fields.json file, all other definitions (e.g. H1) then only have references to one of those two.
3) As I had previously manually set the different font values in the design settings via web editor to a Google font I had to “clean” those definitions as well.
Thus, I ensured that my fields.json contains all font definitions as needed (Roboto + specific styles) and could then set the design settings back to default (I took me some time to understand that this is necessary in addition to point 2 as your current setup otherwise contains again the “font_set”: “GOOGLE” somewhere).
4) To store the required local font Roboto locally, I used the fantastic tool of Mario Ranftl here to download the fonts and get required CSS definitions.
Then I uploaded the fonts via Hubspot’s file manager to a new folder “fonts”.
I created a css file “local_fonts.css” in the Design Manager and simply inserted the presiouly genereted css definitions there.
/* roboto-100 - latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 100;
src: url('https://19492497.fs1.hubspotusercontent-na1.net/hubfs/19492497/fonts/roboto-v30-latin-100.eot'); /* IE9 Compat Modes */
src: local(''),
url('https://19492497.fs1.hubspotusercontent-na1.net/hubfs/19492497/fonts/roboto-v30-latin-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('https://19492497.fs1.hubspotusercontent-na1.net/hubfs/19492497/fonts/roboto-v30-latin-100.woff2') format('woff2'), /* Super Modern Browsers */
url('https://19492497.fs1.hubspotusercontent-na1.net/hubfs/19492497/fonts/roboto-v30-latin-100.woff') format('woff'), /* Modern Browsers */
url('https://19492497.fs1.hubspotusercontent-na1.net/hubfs/19492497/fonts/roboto-v30-latin-100.ttf') format('truetype'), /* Safari, Android, iOS */
url('https://19492497.fs1.hubspotusercontent-na1.net/hubfs/19492497/fonts/roboto-v30-latin-100.svg#Roboto') format('svg'); /* Legacy iOS */
}
...
Now I had to ensure that this file gets loaded for all pages, which can be ensured by including it in the HTML header (setting for all Website pages in your global configuration):
<style type="text/css">
@import url('https:{{ get_asset_url('/local_fonts.css') }}');
</style>
So - that’s it for your Website pages 
BUT: There is currently no way for Starter customers of Hubspot to have such a legally safe way also for the Landing Pages! LPs that are based on one of the standard templates (and you cannot do otherwise in the Starter Package) will always call Google APIs (confirmed to me by Hubspot support).
As this is currently against current verdicts in Germany and Austria, I created the following Hubspot request to have a lawful solution: https://community.hubspot.com/t5/HubSpot-Ideas/Provide-Landing-Page-template-without-default-Google-Font/idi-p/685609
Would be great if you could support this request!
And Hubspot Support Team: I cannot stress this enough but this whole setup is a legal topic, not some feature request. If you have a legal support team, I’m happy to provide more insights to get this issue solved for you and your customers 
All the best
Sebastian
Hi all,
thank you for your detailed answers to my question.
I was on vacation and therefore only now get back to you.
Apparently, the topic still concerns other people.
I have to read through everything here and see what applies to us or helps us.
Thank you. Greetings from Berlin
It’s likely that the code is hidden somewhere—in the code of your theme, a custom module, a template, or website settings.