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 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?
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
@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.
src: -apple-system, BlinkMacSystemFont, roboto, avenir, segoe ui, sans-serif;
Eventually, I was able to figure it out:
local('SF Pro Display 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+ */