It results in a file stylesheet.css under Styles in the Design panel with:
.example {
color: red;
}
and the @font-face block is not there :O
I'm not sure if this is a bug or by design because fonts can also be imported as https://bootstrapstudio.io/tutorials/custom-fonts but I don't see why both methods should be incompatible. It can be the case that some css font attribute might need change after import.
You need to create CDN's basically for any custom fonts you want to use that aren't google fonts. You can't just use a font that is local, doesn't work that way. Follow the tutorial you already have the link for and that should work.
I often use local fonts
First you right click on fonts and choose import webfonts and you import your css file with your @font-face
Second you right click on styles and choose import Stylesheet and you imoprt the same css file
Now you have imported all the woff woff2 eot files
When you export your design you will have a font folder in the assets folder
@Printninja importing the same stylesheet I used as the example works via Fonts > Import webfont but not via Styles > import stylesheet, and Bootstrap Studio (BSS) will display fonts correctly and export all font files and stylesheets. I'm trying to import a webfont available for modification later.
@Jo that's not true I can import local font files via Fonts > import webfont and export/use them.
@Printninja what I'm trying to do specifically is using just one font style from a font, for example let's say "montserrat semibold" (https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap).
Google fonts allows selecting just those styles and outputs a css with font src that include font files with that particular weight only, so the font weight/thickness is not given just by css but the weight is embedded in the font file. I'm trying to avoid using font-weight css attribute since it is inconsistently rendered across browsers (in firefox it looks less thick than in chrome)
so basically I'm just trying to use a font weight but from a font file not from css.
So I decided to do some experimenting with using a custom font on a BSS website.
I followed the BSS tutorial for importing a webfont to the letter. I created the zip file using transfont, tried to import the font via Design> Fonts> Import Font and pointing to the stylesheet.css file generated by transfont. Instead of importing the whole font family, all I get is the very first font in the stylesheet. Is it necessary to create a separate CSS file for each font style/weight and then import?
Also ran into the same problem as cattoshi. Tried following kuligaposten instructions and I get a blank CSS file.
Anyone care to take a crack at this? Here’s the zip file generated by transfont. I can’t figure out how to make it work via the BSS tutorial.
I think you guys misinterpreted (or I wasn’t clear enough) what I said. I know you can “create” imported fonts via local fonts, but what I meant was you can not use them directly as is sitting on your computer like we used to do with a font on a folder type thing. They must be made into CDN’s so to speak. You have to import them etc. Sorry for the confusion on that.
@jo1 Ah I get it. I thought you meant locally installed fonts in the OS because I can use them in the design without installing them in BS. Don’t worry
Downloaded and followed your instructions. When I import the stylesheet via Styles > Import Stylesheet I DO get a stylesheet.css file in BSS, but there is nothing in it. No CSS rules.
The font ngy2_icon_font shows up as an available font family, but applying it to some text just defaults to Times New Roman.
I can use fonts created via transfont in a Bootstrap Studio website by uploading the fonts to my server, and using the @import method, placing the code in the header. They will display correctly in a preview of the website, but getting them to show up in the Bootstrap Studio workspace has been an exercise in futility.
Bootstrap Studio needs to update its Google Fonts library for starters, forgetting that for a moment, take the font SourceSerifPro. This is a Google font family that has 12 different styles/weights. I’ve downloaded the family, run it through transfont, and tried to import it via the the Boostrap Studio Font Import Tutorial. The result is always the same. Only the FIRST font in the CSS file gets imported (or is available). THAT font will display in the BSS workspace correctly, but the rest of the styles and weights are unavailable. I don’t know if they need to EACH be imported separately as individual files (seems absurd) but whatever the case, I cannot get this to work within Bootstrap Studio.
So unless I’m mistaken, the font import capability in Bootstrap Studio is limited to individual font files. It doesn’t support font families, with weights and italics. So if I want a font that has two weights (say 400 and 800) and two styles for each weight (italic) I will have to create four different fonts, four different CSS stylesheets, and do four separate imports in order to be able to see the actual font in Bootstrap Studio.
This seems incredibly convoluted, but I guess it’s do-able.
The last website builder I used (Web Realizer) allowed you to put any Google font’s generated code into the head section of the page, and then allowed you add the fonts via a CSS import feature, so they actually displayed in the live workspace of the program. Bootstrap Studio basically does this same thing through it’s Google Fonts import feature, but if it doesn’t keep up with the latest fonts, its kind of frustrating. I don’t see an reason the program’s workspace shouldn’t be able to have a live connection with Google fonts at all times. I guess the devs are overly cautious about security.
Thank you for reporting this issue! We will fix it in our next release.
You will be able to import a file with several @font-face declarations and they will be recognized and added as variants of the font (given that they reference the same font of course). You will be able to switch different weights on/off from the Font Manager Dialog just like you do the Google fonts.
We will also detect @font-face declarations when you import regular CSS files and import them alongside the file if the sources specified in the src directive are found on the disk.
