Uploading custom fonts

Questions
1

I’ve followed adding custom fonts to the letter but I can’t seem to get it to work. Has anyone successfully uploaded fonts from 1001freefonts.com?

An example … https://www.1001freefonts.com/quindelia.font

Any help here would be greatly appreciated.

2

Hi Mark, also having issues uploading custom fonts (also followed to the letter). Only Helvetica seems to have worked, with a direct CSS file path from a site, as opposed to uploading the files hidden onto bubble.

Would also appreciate any help…will try speaking to Bubble directly too…

3

I’ll try and make this a little simpler to understand (don’t worry it took me a while to understand how to add a font too)

  1. download your font from wherever you want and save it somewhere on your computer.

  2. in your bubble project add a “file uploader” element to your page and upload the font file here. I find it easier to do so in the editor by just adding it as the static file.

  3. You should see an //s3.amazonaws.com link appear below it.

  4. open a text editor and add this to it:

@font-face {
  font-family: 'name-your-font';
  src: url('https:url-from-file-uploader');
}

  1. next you want to change the text that says ‘name-your-font’ to whatever your font is called. Don’t forget this, the name is important!

  2. take the url you got from the file uploader and add it after the “https:”. It should look something “https://s3.amazonaws.com/appforest_uf/f1588947877029x842975480162107000/font-name.ttf”

  3. using the “save as” button. name this file whatever you like with .css on the end. It should look like “fontname.css”

  4. using the file uploader. upload the .css file you just saved.

  5. take the url from the uploaded file and go to your settings tab where you can find custom fonts.

  6. in the “font name” area add the name you gave your font in step 5. I believe this is case sensitive.

  7. add the url you just got from the file uploader into the “css file path” section and click “add font”

  8. your font should now be available to use.

1 Like
4

I think I have a video tutorial on this. Will send link shortly.

5

Thank you very much. I’ve followed these instructions a few times, checked lettercase names etc., but to no avail. Also watched many videos :slight_smile:

I’ve tried it with Aktiv Grotesk and Fakt but it seems to hate both. Helvetica is working.

I’ll keep trying - thank you all much appreciated.

6

If you get really stuck I’d be more than happy to open up your application and attempt it myself. Just PM me the link as well as the links to the fonts you want and I’ll do my best to help.

7

Thanks so much for offering Locky, I appreciate it :slight_smile:

I checked everything and it was a discrepancy in the caps in the font file. Attention to detail!!

Thanks again, have a great day.

1 Like
8

Hai, how can I increase the spacing between letters for the custom added font?

9

on the editor of the text element there should be a dropdown underneath the font that allows you to change letter spacing for each individual text element

10

@lockymadera what do you mean by the ‘save as’ ? I couldn’t find any in the editor of text element.

11

He is referring to the text file you are creating with the CSS in it.
Essentially you are uploading the font file and the css (styling) file that tells Bubble where to get what the font name is and where to get it.