Can you share the font urls ? Is the URL of assumed to be used on other domains ?
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
@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
@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
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:
-
My designer set this up as an .otf.
-
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.
-
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.
-
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ā¦
-
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ā¦
-
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!! 
1 Like
thanks Artur for the suggestion!
what do you mean by use the links? iāve uploaded the a font family on the website youāve suggested to Ana, but im wondering where do you find the links and what custom code would you use?
Hi @artur,
It looks like thereās been some major changes in how fonts are applied, at least to the new blocks. Any suggestions on how to implement a font system wide? In my case, Iām trying to force the app to use the system font (i.e., font-family: system-ui,-apple-system,BlinkMacSystemFont,āSegoe UIā,āRobotoā,sans-serif,āApple Color Emojiā,āSegoe UI Emojiā,āSegoe UI Symbolā,āNoto Color Emojiā;), but no joy.
Iāve tried both the old way, as well as targeting data-spr-block-parent-id and its variables, but again no luck. Not sure where itās being overridden.