How can I import my own fonts in Bootstrap Studio?

Bootstrap Studio Help
41

Any news for custom web fonts? I use Google fonts in locally now with steps:

  1. create a fonts folder anywhere on disk, and put my fonts and css
  2. create a fonts folder to css styles in Studio
  3. import fonts css to Studio (but this buggy, cannot import content, generate a 0 byte size file)
  4. after project export copy all files from fonts folder at first, and when second export, then copy CSS only again (fonts will leave there from first export)

I hope Studio developer will make this function soon, because is very important me.

42

Ok, here is a second solution, what working on exported projects only, in Live preview not:

  1. I created a folder what named is fonts
  2. create a folder in Studio under Styles, named is same: fonts
  3. create a new style what named is fonts.css

  4. open fonts.css in Studio, and create a style. Copy there MINIFIED font block, like this:

    font-family:'Cinzel Decorative';src:url(cinzeldecorative-black.eot);src:url(cinzeldecorative-black.eot?#iefix) format('embedded-opentype'),url(cinzeldecorative-black.woff2) format('woff2'),url(cinzeldecorative-black.woff) format('woff'),url(cinzeldecorative-black.ttf) format('truetype'),url(cinzeldecorative-black.svg#cinzel_decorativeblack) format('svg');font-weight:400;font-style:normal

  5. rename style block to @font-face

  6. Add all font-face with same trick and save

  7. Export project, and copy your fonts to assets/css/fonts folder.

  8. See exported website.

I don't know why not working in Studio Live preview, but if I know where is temporary server folder, than I will copy fonts too, and I hope will working this trick on Live preview too

43

Can we still not add custom fonts? 2 years on?

I need to add Nexa font from MyFonts

44

@jamessk yea, it's ridiculous. Here is what I did to get local Google Fonts and animation.min.css on export: https://bootstrapstudio.io/forums/topic/include-fonts-locally-to-a-project-related-to-gdpr/page/2/#post-12709

The script removes external links, however, you can change it to just add your own extern files to it like your fonts from MyFonts.

45

This looks like something that needs support from Bootstrap Studio. I have my own font that I need to use. There are no icons available in any online font that matches my font. Please get a move on with implementing this feature. It shouldn't be that difficult since you can add custom code. Make it possible to add the custom code to the head.

46

@captainbli wrote:

Make it possible to add the custom code to the head.

What BSS version are you using? Id your license is (still) valid you should be able to add custom code to the <head>.

.

47

Yep, not to mention that Saj gave a perfectly good and working example of how to create CDN's for your own fonts in this same thread. :)

48

and other suggestions are here: https://bootstrapstudio.io/forums/topic/include-fonts-locally-to-a-project-related-to-gdpr/page/2/

Including some requests to @martin to make fonts support GDPR compliant. But still no answer on that. Let's hope a future release will bring at least basic features like&nbsp; <br> ,HTML/CSS comments, ability to link to own resources (pdf, videos etc), sftp upload support, full bootstrap 4 classes support, better editor, etc. And not some new never-requested fancy features like free hosting, 'beautiful templates' or free form processing.

ymmv

49

@marrco : if only the creators of BSS could read your post. These are exactly what needed in BSS to my point of view too. Totally agree with your askings. +100 000.

50

@larsene I forgot to mention dual monitor support, detachable panes, ability to save files with different extensions -.php-, and lots of other basic features that developers need.

Looking at the huge numbers for BSS tutorials on youtube I'd say Martin is a very rich guy and should employ more programmers in his company or has a problem with non-paying users. Let's hope next release will bring more fixes and additions aimed to pro developers.

51

@marrco I totally missed using the Settings. I kept trying to drag the custom code into the Overview, like I do for everything else. I ended up just writing my own script to dynamically load what I needed. I knew there had to be something better for me to use. Thank you for pointing it out to me.

52

Hi,

I've tried lots of solutions (cdn, localhost, …), but none of them really work with the browser preview of bootstrapstudio, due to a crossdomain request .

External/imported stylesheets are filtered by bootstrap studio during import so you can't do that too ( big fail ^^ let us do what we want if it's external).

One solution is to encode your font in base64 and place the font declaration in the project settings > header section The font will only be visible in the browser preview, not in the bootstrapstudio app.

<style>
@font-face {
 font-family: 'blokkneue';
 src: url(data:font/woff2;base64, ....)
}
</style>

if it could help someone ;-)

53

It's been 3 years

54

This is a significant issue for me too. I need to be able to include my fonts!

55

Hello, I tried without success.

Will this possibility come soon ?

Thank you

56

LOL this is still seriously, three years later, something that has not been added. I love this app, and I've had nothing but help from the members. But I also use Webflow, and I'm tending to use it more and more now due to the simple oversights on BSS's behalf... like uploading fonts.

Favicons took almost three years to release as well. I understand the issue to fix bugs and to make sure the program work, and I know that's not easy, but one of the BIGGEST aspects of web personalization is still yet to be made a feature? It just sorta hurts. Maybe you should charge more so you can employ a larger staff.

57

Seeing that this post was started 3.5 YEARS ago, I have a sad feeling the developer just pocketed the money from sales and has no intention adding this feature.

In my case, I have no interest uploading my font file to a CDN or external hosting since that is NOT an option. I want to make a component that I can export and then use that exported asset to load it. I have no issue writing BS by hand, I just found this app fun to use - up until I ran into this issue. Back to hand coding, I guess.

It's sad that no matter how you try to test drive an app before purchase, sooner or later you will run into an issue that just pisses you off because it's so deceptively simple, yet not workable. Arrrgh...

58

LOL see ya elpea! Seriously, to say they pocketed the money over one feature you didn't get yet that's just rude and crude, especially when you know darned well that isn't the case. The app is solid, does what any web designer could ever really need it to do and then some. If that little deal of a font issue is what chases you away then ... don't let the door hit you in the ass on the way out.

P.S. It's very simple to add your own fonts, and since you have no trouble "writing BS by hand" then there IS always an option for external hosting of fonts or any other files. You're just being very dramatic over it.

P,S.S. I'm not downplaying the issue. I too think it would be great to have the ability to add our own fonts to the app, but there's a work around for it if you really need to do it, and seriously, there are so many fonts in Google Fonts that there's almost no way you can't find an alternative font to something you are trying to use. I definitely hope they will do this, but truly it's not a deal breaker for most people, it's an inconvenience yes, but there are a whole lot of other features that have been much more important than this over the past 3+ years. I'm sure they know how much we want this just from this thread alone, but it doesn't break the app to not have it yet.

59

Would be a wish, but

I think Bootstrapstudio is great, even as it is now !

Many thanks to the developers

Have a nice day ?

60

I have so many fonts that they're coming out of my ears. Google fonts galore! I could seriously waste a whole day trying to find the "right" font.

My, my, my... the little things we get hung-up over.

I'm sure more fonts are on the way.

Note To Self : I'm wondering how hard it would be to do a Non-Bootstrap website with BSS. I'm sure if I tried, I could get it to work!