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.
4 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?
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/
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 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.
10 Likes
good lord, thanks for this
1 Like
