how to add @font-face declaration in styles.css

Bootstrap Studio Help
1

hey guys. anyone know how to add an @font-face declaration to the CSS? like this:

@font-face { font-family: mySpankyFont; src: url("../_fnt/mySpankyFont.otf") format("opentype"); }

i tried doing it with a simple copy/paste, but it leaves the trailing curly brackets and doesn't seem to work properly. if this is beyond the software's capability, no problem, i just want to know either way.

love this tool. thank you for all your hard work! :)

2

go to the menue:

{File} - {Design Settings} - {Head Content}

here you can put some extra style

<style>
   @font-face {
      font-family: mySpankyFont;
      src: url("../_fnt/mySpankyFont.otf") format("opentype");
   }
 </style>

here do I put code, that BTS does not allow at the moment.

3

brilliant! thank you! never thought to put it there. :) shame it doesn't actually show up in the UI or Preview though. :( although that could be a pathing issue. i'm not confident in how the app paths its external resources... i'll experiment.

4

I don't think it will work in app UI or preview but will wait for frank to confirm if it works for him.

I am hoping in one of the next releases for custom font support

5

no worries. this is such a fun prototyping tool! i'm very pleased with pretty much everything as it stands. this one thing is the only itch i want scratched. given the app's intended purpose, i don't really want anything else.

6

just revisiting this a few years later to see if there's been any progress on this subject. does BSS support custom fonts in the UI or Preview yet? i'm back doing a lot of prototyping and i don't see any of my fonts in either UI or Preview. i'm open to the idea that i'm doing something wrong. :) can someone fill me in?

7

oop. nevermind. i think i got it. fonts need to be defined in a .css file. just have to figure out the pathing... are they relative to the savefile location or what??

would be nice if we could just point to a font folder and be done. or just use a simple @font-face declaration in the CSS... -_-

EDIT: nope. not working. it appears to import, but the UI and Preview don't show the correct font. just uses a fallback. dang...

8

okay. figured it out. nevermind. works fine. path is relative to the CSS file itself.

9

Take a look here: https://bootstrapstudio.io/tutorials/custom-fonts