Google Fonts loaded using fields, now served from your domain
Rolling out to all HubSpot customers, Google fonts loaded using theme or module fields will now serve the fonts from your domain name instead of Google's CDN. These theme fields and module fields appear in the Website Pages and Landing Pages.
In fields.json
for themes and modules, all font fields with the property load_external_fonts
set to true
will be affected by this change.
Instead of loading Google fonts using <link>
and preconnect tags pointing to fonts.googleapis.com
, we will be rendering a <style>
tag with @font-face
declarations pointing to HubSpot-hosted copies of the fonts served from your domain name.
Note: This change does not impact links to fonts that a developer has hardcoded into a template, theme, or module.
Due to changes in how modern web browsers cache cross-domain assets, there's no longer a benefit to loading speed when multiple domains load the same fonts from fonts.googleapis.com
, since assets are now cached in relation to the current domain. If site example.com
used the exact same font as website.net
, the visitor would need to download the font once per website when viewing those sites, even if both sites use the exact same font file from fonts.googleapis.com
.
Additionally with HTTP/2 it is better to host assets at the same domain. Reducing the number of domain names used results in fewer DNS lookups, SSL handshakes, and enables reusing the existing HTTP/2 connection used for the other assets on the page.
As a result, with this change, pages hosted on HubSpot that have Google fonts selected within a theme/module field may see a small performance improvement. In our testing, the new method of loading the fonts on average provided slightly better scores for Core Web Vital metrics. Results may vary based on number of fonts, file size of fonts and other conditions unique to each site.
When is this happening?
The rollout of this change is already in progress. While we expect no significant issues, we are rolling the update out slowly as a precaution. You can tell if the change has rolled out to your account by looking for an @font-face
rule in your page instead of a link to the google fonts. If you notice an issue with a font family displaying incorrectly and are sure that the change has rolled out to you, please contact HubSpot Support.