@Emannuel has provided a perfectly-adequate breakdown for how to utilize custom fonts on Bubble. You can read it here.
If you’re not familiar with web development the other tutorial might be a little hard. And I know it’s not easy to try and learn a new thing and also try and learn the lingo at the same time. So, I wrote up this alternate tutorial. It’s a little more intensive, but I think it produces results that are much easier to manage, and file management is an essential element of the process for uploading custom fonts. I know I made a few mistakes and had to go back and check and delete and redo and re-upload a few times 
In order to upload fonts we will need to jump through a few different Bubble interfaces, so you should be familiar with the overall layout of Bubble. We will go from app data, to design, to workflow, to app preview, to app data, to app preview, to app data, and finally to settings–and we’ll also be visiting an external text editor of your choosing two times in there. So, just be prepared to jump around, and have your appropriate windows open.
Anyways, here is my approach. FWIW, I’m coming from a background in graphic and print design. Typefaces are important for me–important enough to bang my head on something I don’t understand for a few days and see what falls out. I hope to see more developments for implementing and managing custom typography as it’s a big part of why I came to Bubble.
1.) Gather your fonts, and ensure you have the proper formats. Most tips I found recommend WOFF, and WOFF2. But TTF, and OTF both work as well. Not all browsers support all font formats, so your best bet is to figure out where you’re displaying your site, and ensure you prepare your field according to which browsers you want to show it on.
2.) Ensure your font files are all named correctly. To keep it simplest: only use letters, and no spaces or punctuation or any other characters except letters. However you name the actual font file, should be the only way you refer to that font in the CSS and the Bubble custom font section of the control panel. So, if your font file is called SkateBudUI, you have to ensure the CSS refers to it as SkateBudUI, and the Bubble control panel also labels it SkateBudUI.
3.) Prepare your CSS files based on the format at the bottom of this post. Omit the text that applies to fonts you aren’t using. The CSS file just contains information that tells Bubble how to utilize the font, and where the font is. You have to make your CSS in a program like Visual Studio Code. Don’t try to convert a plain text file to CSS by changing the extension. If there are errors with your CSS Bubble does not tell you, and the fonts will load properly on your machine–since they live there–but the fonts will not display anywhere else. It’s tricky because Bubble will not display an error if our CSS is flawed.
4.) The first step in Bubble is to create a data type called “Font”. It needs to have a field called “font name”, and a field for a file.
5.) Create a page called uploader. Use the uploader tool to draw an uploader. Use the button tool to draw a button.
6.) Create a workflow for the button. Your workflow needs to create a new thing, the type should be “Font”. Set the workflow to modify the field for font name, and create the “font name” from the file’s name. Set the workflow to modify the “font file” and add the value from the file uploader. Finally, set another step in the workflow to modify the input element and reset it after the workflow finishes.
7.) Preview your uploader page, and upload your font.
8.) Exit the preview and go back to your data tab in the Bubble interface. We need to get the URL for the font file in your database so we can create the accompanying CSS file. Go to the “App Data” tab, and select “Font” data type in the left column.
9.) Here you have a list of all the data that has been stored in the “Fonts” data type. I recommend that you click the “additional fields” text at the top right of the database spreadsheet, then check the options for file and font name, and uncheck everything else. This way, when you’re viewing the database, you’re only getting the data you need to manage your fonts.
10.) Now you’re going to finish the CSS file that you prepped earlier. Copy the URL from the font in your app data, go back to Visual Studio Code, and paste the appropriate URL(s) into your CSS file. Save the file as a CSS.
11.) Go back to your uploader, and now upload your CSS file.
12.) Take a break if you need to, because it’s pretty much done now, and the rest is just the payoff.
13.) In the Bubble interface select the setting tab on the left, and then select the general tab on the top of the next screen, and finally scroll down to custom fonts.
14.) Now, just flip back to your data tab in the control panel, copy the font name from the database spreadsheet, and paste it into Bubble’s custom font section, and then copy the url in the “file” field of your spreadsheet, and paste that into Bubble’s CSS file path input.
15.) You’re done at this point, but I highly recommend setting custom styles for your fonts, rather than trying to specify them each individually within the text tool each time you use it. Opening the font select dropdown seems to be pretty intensive, and it makes for a much cleaner workflow if you’re just selecting a style option rather than making the application call up 1,000 fonts that you’re not gonna use. If you want to make a custom style for your fonts, just go to the styles panel, and use the “Add style” button on the top right.
@font-face {
font-family: ‘SkateBudOG’;
src: url(‘https://s3.amazonaws.com/appforest_uf/f1641973672041x325815278785701600/SkateBudOG.woff2
') format('woff2'),
url(‘https://s3.amazonaws.com/appforest_uf/f1641973664164x132807840685321700/SkateBudOG.woff
') format('woff'),
url(‘https://s3.amazonaws.com/appforest_uf/f1641932660528x490383660290727000/SkateBudOG.ttf
') format(‘ttf');
}
, have you been able to use