How to load Google Fonts locally

Need help
1

I am using the Google Font “Figtree” as my app font.

I recently installed concord.tech to manage the loading of scripts and user consent for GDPR purposes. Once I turned on that service in Strict mode, I noticed that Figtree was no longer loading. After asking Concord support about this, they explained that Google Fonts are not GDPR compliant so without specific user consent they block the script. (I was testing it with user consent on the minimum necessary.)

So I tried to install the font locally, but was unsuccessful. Here is an outline of my steps:

  1. Download Figtree font files.
  2. Upload font files to File Manager
  3. Create and upload a CSS file (using the URL of each uploaded font file). Here is a sample of my entries:
@font-face {
  font-family: 'Figtree-Local';
  src: url('app-cdn-link') format('ttf');
  font-weight: semibold;
  font-style: italic;
}

app-cdn-link is replaced by the actual link for each font style.

  1. Add CSS to Bubble Settings in metatags Header section
<link rel="stylesheet" href="app-cdn-link">
  1. Set Default Font in App Styles

In step #5 I only get the option for Figtree, but not Figtree-Local.

Does anyone see where I made a mistake? Or is there another way to import the Google font directly into Bubble to use as the app font?

Thanks!

2

Hey,

put this in. the header und setting in “SEO”

@font-face {
font-family: ‘MyCustomFont’;
src: url(‘https://your-bubble-file-url/font.woff2’) format(‘woff2’),
url(‘https://your-bubble-file-url/font.woff’) format(‘woff’);
font-weight: normal;
font-style: normal;
}

then uploud your font to the file manager → copy and paste the link

the under global styles you should be able to select your font

3

This topic was automatically closed after 70 days. New replies are no longer allowed.