How to add custom font into Softr app

[artur]

Can you share the font urls ? Is the URL of assumed to be used on other domains ?

[ElliotHutch]

I’m currently hosting it on one of my websites, the URL is: https://brandstoriesmarketing.com/fonts/MyWebfontsKit.css

I’m open to hosting it wherever you recommend. I tried https://www.creativefabrica.com/fontcloud/ but it seems they’ve changed their platform because I couldn’t figure out how to actually link to the web font.

Any feedback or tips would be much appreciated!

Thank You

[ckoerner]

@artur hi there, jumping onto this thread here.
If I am linking to my own font this way - what setting do I need to use in the theme?

and possibly also in the font options for blocks (in case I sent them to be different fonts before).

Thanks
Claudia

[artur]

@ckoerner @ElliotHutch if you can’t find webfont hosting one workaround could be to upload as asset into your apps and then copy the URL to use

[ckoerner]

Thank you, @artur - found a solution to this and hope it helps others:

This solution is using a completely customised font in an .otf version.

My issue was:
My client wants to use the font Montserrat but we re-designed the ‘e’ for his brand a bit. So only that letter looks different and so we had to use it as a custom file.
A bit like this:

1. My designer set this up as an .otf.

2. I used this website https://transfonter.org/ to convert the .otf file into all kinds of different file types (woff, woff2, ttf, eot, even svg) as I was not sure what was going to work. Transfonter also spits out a css file for you.

3. I then made sure that from within the .css file all the necessary URLs are set to the different font files (kept them within the same folder, so linked all locally) and I put all of the css declarations mentioned earlier in this thread, into the .css file.

4. I then I put that .css file through this website that makes sure that it has the best browser compatibility. https://autoprefixer.github.io/; copied the code that comes out back into the .css and saved it again. (I think the code was already okay though).

This is what it then looked like - the highlighted shows the linked files, but you should have all this type of code in there…

5. Then I uploaded all of these linked-up files to an ftp / web server - and then grabbed the complete / global link to the css file and…

6. used that link in my custom code in the header in Softr:

In the Softr App, all fonts that are set to be ‘default’ should now get the new linked Font.

The tricky bits:

• Make sure that the font has the same name everywhere and it is the actual name of the font - this might be relevant. I tried to rename it and it did not work, so there might be something hardcoded in the base .otf file that restricts this.
• I guess the css code mentioned here has already been checked for browser compatibility, but it does not hurt to push this through the autoprefixer again.
• Depending on where you move your files to - check if you need to only have to set local links or absolute links and that the place you link your files from is ‘open’.

It worked for me and I hope it is helpful for others :).
Happy to answer questions if anyone has any.

Happy (no-)coding!!