Forum Academy Marketplace Showcase Pricing Features

[Solved] Help adding font

still can’t get mine to work. I’ve tried everything. This is really starting to P me off… so annoying.

6 Likes

Same, I’ve watched the YouTube video and did the directions above. Were you able to find a solution to this since you posted this comment? Thanks!

@emmanuel I think you guys have a bug here. I have uploaded fonts successfully before, I have followed this process several times on a new project and the font will not load successfully. I’ll submit a bug report, but it’s clear this workflow is not 100% reliable.

2 Likes

Finally! I too was stuck on this for hours. I triple-checked that I was doing everything correctly as I was trying to upload a WOFF 2.0 file, then a WOFF file. I tried with two font families that I plan to use. Nothing worked.

As a last resort, I tried with an OTF file. And lo and behold, it worked! Perhaps that solves it for others as well. Would be nice to use the WOFF 2.0 or at least WOFF for faster page loads.

1 Like

Andrew, have you solved the issue? I’ve got the same thing - in Safari on a iphone it doesn’t work. though it works on desktop’s safari

does it work in mobile browsers too?

I have done this before and it works well in chrome mobile/Desktop

1 Like

It’s working fine on desktop. I’ve just tried on Safari and it also works fine.

This did it for me. Thank you, very helpful!

you can delete the upload files right? I assumed this was just to load the font onto your servers?

But how do you do this with Dafont.com? I tried, and it didn’t work.

Yes, you can.

Hello all, sorry to bump an older thread but I wasn’t able to find the answer. First, special thanks to nocodelife for this very short 1-2 min video that summarizes everything in this thread here: https://www.youtube.com/watch?v=kATwAyTDAfE but what the video nor this thread answer is how to deal with the File Upload button AFTER you’ve uploaded the fonts? Are we just supposed to keep it hidden somewhere on the page or make it so tiny nobody can find it? Or are we able to delete it once we have the font uploaded although I suspect that won’t be possible since Bubble is pulling the font from that link? Apologies in advance if the answer is obvious as I’m new to Bubble. Thanks!

You can delete it after it has been saved to your database and uploaded in the Settings sections of your app.

More on this over here - https://nocodeassistant.com/custom-font/

Thanks @sharma.himanshu0608 !!

1 Like

Hi guys - I’ve spent hours trying to do this and it’s not working. It worked first time for Moderat Extended Light, but now won’t work when I repeat the same steps for Regular or Bold.

I’m using .otf for the original files. I upload it on bubble to get the link and copy and paste it as below:

@font-face {

font-family: ‘Moderat Extended Bold’;

src: url(‘https://s3.amazonaws.com/appforest_uf/f1611920822987x371869116423290100/Moderat-Extended-Bold.otf’);
}

I then copy and paste that into TextEdit on Mac, save as a .txt file - then find the file and change it to .css (I have also tried saving it straight to a .css from TextEdit).

I then upload it to Bubble again and then try and add the font using that link - it never works. The name of the fonts and in the .css match perfectly.

When I look at the Moderat Extended Light.css file (the one where it worked) it is a lot bigger than the Extended Bold or Regular sheets I saved and it has added tons more info into the file, so now it looks like this:

{\rtf1\ansi\ansicpg1252\cocoartf1671\cocoasubrtf600
{\fonttbl\f0\fnil\fcharset0 HelveticaNeue;}
{\colortbl;\red255\green255\blue255;\red220\green161\blue13;}
{*\expandedcolortbl;;\cssrgb\c89412\c68627\c3922;}
\paperw11900\paperh16840\margl1440\margr1440\vieww10800\viewh8400\viewkind0
\deftab560
\pard\pardeftab560\slleading20\pardirnatural\partightenfactor0

\f0\fs24 \cf0 @font-face {
font-family: ‘91Moderat Extended Light’92;
src: url(‘91{\field{*\fldinst{HYPERLINK "https://s3.amazonaws.com/appforest_uf/f1609601687966x487176894650676100/Moderat%20Extended%20Light.otf’"}}{\fldrslt \cf2 https://s3.amazonaws.com/appforest_uf/f1609601687966x487176894650676100/Moderat%20Extended%20Light.otf’}});
\pard\pardeftab560\slleading20\partightenfactor0
\cf0 }}

I would have thought it was wrong, but it’s the only one it works for. But I can’t replicate it for the others (despite hours of trying) - has anyone else experienced this please? It’s so annoying

Hi @battenjoe ,

I’m facing the same problem, did you found a solution ?

Hi all. I also have fought this problem for a few hours, and this is what solved it for me: all the apostrophes in the css file in the thread above are WRONG!

As apostrophes are rendered differently on different systems I am posting the image of the css files below; you need to use the correct ones otherwise you will get errors.

6 Likes

good lord, thanks for this

1 Like

Thanks @starkemarek , problem resolved !! :+1: