[New Feature] Using Custom Fonts

[emmanuel]

Many of you have asked in the past for the ability to upload your own fonts. We just added this. If you go to Settings → General, you’ll be able to add fonts.

To add a font, you should have a URL to a css file that contains the font (that’s generally how services provide fonts) and know the font family name. For instance, if you go to Font Library and select a font, on the right side, you’ll see this

Then, in Bubble, you just need to do this

Click ‘Add font’ and you’re all set. The font will appear in the list of fonts, and we put fonts you’ve added at the top of the list.

[lsy]

Hi @emmanuel I’ve tried to install a font on my own (there was no pre-made .css file), and it doesn’t seem to be working. Do you have any pointers on whether only certain types or formats are acceptable?

Explanation below, and I’ve also uploaded the font into the Forum App, testing it on the page “font_test”

---

I got the font from here: StateFace

I’m hosting the font files and the .css file in my AWS. My .css file looks like this, and when I loaded the font into Bubble I stayed with the exact same font family name of “statefaceregular.” The CSS filepath ends in .css (unlike the FontLibrary example), but I assume that shouldn’t make a difference.

@font-face {
font-family: ‘statefaceregular’;
src: url(‘https://s3.amazonaws.com/AWS/Fonts/States/StateFace-Regular-webfont.eot’) format(‘opentype’);
src: url(‘https://s3.amazonaws.com/AWS/Fonts/States/StateFace-Regular-webfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘https://s3.amazonaws.com/AWS/Fonts/States/StateFace-Regular-webfont.woff’) format(‘woff’),
url(‘https://s3.amazonaws.com/AWS/Fonts/States/StateFace-Regular-webfont.ttf’) format(‘truetype’),
url(‘https://s3.amazonaws.com/AWS/Fonts/States/StateFace-Regular-webfont.svg#statefaceregular’) format(‘svg’);
font-weight: normal;
font-style: normal;

}
(note that AWS is not the actual folder name)

I’ve tried different versions of the same file, swapping out different lines and reordering them – one with only the .ttf, one with only the .eot, etc. None seem to work.

Could it be the case that only .otf files are permissible?

[emmanuel]

Can you share a link to the app?

[lsy]

to the forum app? https://bubble.io/page?type=page&name=font_test&id=forum_app2&tab=tabs-1 my installation is identical to the one I’ve put here.

[emmanuel]

Can you try reuploading the files to Bubble’s S3? When I run the page, i see this:

If you upload the CSS file to Bubble’s S3 it should just work.

[lsy]

Of course, should have looked at the console. So it looks like I needed to change my CORS configuration in (my own) S3 a la http://stackoverflow.com/questions/12794129/cross-domain-workaround-for-font-face-and-firefox-for-aws-s3

Your suggestion worked too – except that I was unable to upload the .eot file into Bubble’s S3 (I don’t know how to directly access the S3, so I just did it via the Data tab – hope that’s what you meant). .eot is only for internet explorer anyway…

Thanks for the help!

[emmanuel]

UYeah, or upload it in a file input and copy the link we don’t really have a file uploader per se.

[lsy]

finally got it working…turned out after all that, my files were corrupted (though they rendered on mac just fine), and the .otf copies I found online weren’t enough for Chrome to render – still needed woff and ttfs. Thank goodness for https://onlinefontconverter.com/ !!!

[Macchiato]

This issue was brought up in #596.

As per my license, I opted to self-host my fonts. In a folder, I have the following:

• 5 font weights (regular, medium, semibold, bold, black)
• 2 font styles (total of 10)
• an .svg, .eot, .ttf, .otf, .woff, .woff2 file for each variant
• stylesheet with all naming rules

I’m hosting the folder on my personal web server. (not on Bubble) I add the font-family name and font folder to Custom Fonts under Settings. However, the font has yet to be successfully added. No luck yet.

What’s the remedy here?

[Macchiato]

To keep this updated:

I opened up an S3 bucket, added the fonts, got the HTTPS S3 link via Cyberduck and used it for Custom Fonts. Doesn’t show more than one weight and not working for dynamic data on the frontend.

[emmanuel]

Yes, has to be one weight per font (as it is for Google’s web fonts).

And, once again… “not working” isn’t helpful at all! Please provide a case to test.

[Macchiato]

I have everything I mentioned above in a folder. If I add it to Custom Fonts, only one weight is added to Bubble. (not the other 4 that I also have in the folder) It seems now that each weight needs to be added separately. I’ve been confusing the typography layout that Bubble has with the family-support that Sketch does.

Solution: Upload each webfont weight into it’s own folder, make sure each folder has its’ stylesheet.css, upload everything into an S3 bucket, configure using CORS configuration above if needed, add exact name of ‘font-family’ text in each stylesheet.css with link to enclosing folder for each weight into Bubble’s Custom Fonts under Settings.

@emmanuel As a UX designer, I recommend you change the ‘Font family’ and ‘CSS file path’ field labels to ‘Font name’ and ‘Font location’ respectively. In addition, it’s far more valuable for a user to learn ‘Note: each font weight must be added separately.’ than ‘Some libraries offer free…’ so you don’t get bothered with this.

[emmanuel]

Good idea, i’ll change that.

[trey]

How do you upload multiple font weights? Each one after the first font doesn’t work correctly. It just shows a default times new roman.

[csblack]

Does anybody have any other links to a directory of free fonts in this format? Font Library is simple… and I can’t find any other resource with a simple file links.

For example… what do I do with this? https://gist.github.com/haggen/2624063#file-proxima-nova-css

[JustinC]

Does anyone know why my custom font won’t call on an ipad?

Defaults to times new roman.

[Macchiato]

Doesn’t seem to work on Safari. (works beautifully everywhere else, including concatenation!)

[aliceham]

I was able to get my custom font loaded and working on internet explorer, but when i’m on my chrome browser, the custom font does not display correctly. i tried the online font converter site and wasn’t able to get that working either. any ideas on how to fix and why my custom font works on ie but not on chrome?

[aledepi]

Hi, I have just added a custom font on my app. I follow the instruction in this post.
The new font is working good on safari from mac but is not loading from my iPhone or iPad, anyone know how to solve it?

The font is EDO SZ and I am using it from here http://www.fontsaddict.com/font/edo-sz.html

Thanks a lot,
Alessandro

[battenjoe]

Hi there, thanks for the above.

I used it for Moderat Extended Light and it worked fine - I uploaded the otf file to bubble, took the amazonaws link and turned it to a css via text editor on mac.

I then tried the exact same step with Extended Bold and Regular and it keeps saying: Invalid Moderat Extended Bold could not be loaded (see screenshot)

I’ve then tried it with woff and woff2 and neither work either

This is what I’m trying to upload:
https://s3.amazonaws.com/appforest_uf/f1609616331349x799999002080368600/Moderat%20Extended%20Bold.css

This is what I’m putting into text editor (example with ‘Regular’):

@font-face {
font-family: ‘Moderat Extended Regular’;
src: url(‘https://s3.amazonaws.com/appforest_uf/f1609611251195x886021332537912400/Moderat%20Extended%20Regular.otf’);
}

I then save it as a Rich Text Document and then rename once saved to .css (this seemed to work fine with Moderat Extended Light)

Does anyone have any ideas please I’ve spent hours on this!

Very grateful!