Is it possible to remove inline CSS font-family?

Questions
1

I’d like to set a global CSS rule that defaults text to use specific system fonts on each platform. Here’s a common example –

font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif;

I love Bubble’s styles :blue_heart: but there doesn’t seem to be a way to specify certain system fonts (e.g. San Francisco), or a font stack like this.

Is there a way to omit the font-family declaration on a style, so it doesn’t have to be overridden via other CSS / hammered away with !important rules?

Thanks

2

You can do this using a custom font:

  • Create a css file with the specified fonts. Let’s call the font family ‘system’
  • Upload this file to a page in your app using the file uploader
  • Copy the uploaded file’s link
  • Go to app settings > general > custom fonts
  • Enter ‘system’ in font name and paste the file link in CSS file path
  • You will now be able to select ‘system’ like any other font in styles
2 Likes
3

Thanks Neerja!

4

@clayton or @neerja Could either of you provide an example of a file that would need to be uploaded for this to work? I am currently trying this, but not getting any luck and not sure what else to try.

@font-face {
  font-family: 'system-900';
  font-style: normal;
  font-weight: 900;
  src: -apple-system, BlinkMacSystemFont, roboto, avenir, segoe ui, sans-serif;
}

UPDATE

Eventually, I was able to figure it out:

@font-face {
  font-family: "system900";
  font-style: normal;
  font-weight: 900;
  src:
  local('SF Pro Display Black'),
  local('SF-Pro-Display-Black'),
  local('Roboto Black'),
  local('Roboto-Black'),
  url('//s3.amazonaws.com/appforest_uf/f1580751090604x737563055441100300/roboto-black-webfont.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
  url('//s3.amazonaws.com/appforest_uf/f1580751084788x184938664275708930/roboto-black-webfont.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}