Google font won't import!


I'm having a problem trying to import a google font. The import box just says "Working" but it's been hung there for about five minutes now. Tried numerous times but no joy.

Just stuck on this screen

tested now, problem confirmed with latest BSS version

Umm, how soon will this be fixed? I can't do my website. Disappointed, just bought Bootstrap Studio yesterday.

Need to be notified....

Sorry to say, it worked for me. I copy/pasted the URL from Google's font site.


that's still not working for me. Just stalls until i press cancel.

enter image description here

Btw, there's also one more small visual bug, in the new style attribute pane on the right, FONT / Font Family when you can read the font name it's not scrollable, so i just read 'Helvetica Neue', H and i can't scroll to read the full list of fallback fonts. A minor glitch present with all of those fields. In a design i have a background with linear-gradient, so the default Style attribute field width is not enough to show linear-gradient(to bottom, rgba(30,87,153,0.5) 0%,rgba(41,137,216,0.5) 50%,rgba(32,124,202,0.5) 51%,rgba(125,185,232,0.5) 100%) and badly truncates after a few characters. I think a quick fix could be just allowing those fields to be scrollable, or at least selectable. enter image description here


Yeah looks like you can't scroll through the locked styles (i.e bootstrap.css). I had to create a block and then give an override and then scrolling is available for that style.


@saj the linear-gradient was inside a block i created in user.css. But i still could not scroll it.

I just tried a new test. I created a new project, dragged in a navbar then selected it. I opened the STYLE pane and selected the class for .navbar-default and clicked to duplicate it. Then I went to the Options pane and noticed that I couldn't scroll through the linear-gradient, then after a moment, realized I needed to set the Set Attributes dropdown to the .navbar-default block. Then the linear-gradient was scroll able for me. And that was even after I just had no problems doing it about 2 minutes earlier because in that test I actually selected the .navbar-default in the Set Attribute dropdown first. The thing to remember is that you have to have the correct attribute block selected in the Set Attributes dropdown. I don't see any other reason why it wouldn't work for you, either you have a bug or you simply don't have the correct version of the block that has the linear-gradient in it. If you use the Create Block, you have to put in the overriding CSS rules you want in the STYLES pane for it to open up in the Options pane the scroll able properties. If you don't it is using the fall back style that is in the bootstrap.css.


@saj thanks for your suggestion, but I still don't get it. enter image description here I think I selected the right element, in fact padding, color, font size etc are brilliant white, and I can scroll and modify those. But the linear-gradient stay dimmed. I shared a small .bsdesign here it's just 1 kb. So if you want to tell me what I'm missing you can just check it.

btw, there's one more small bug here too. As I deselected the semi-transparent gray background color in my css and it's not active anymore, I'd expect to see that field dimmed in the style pane.

I grabbed your .bsdesign and checked it out, but I should have just noticed from the image you posted, the linear-gradient you have is just applied to the property background. However, there is a disconnection in that the app is looking for Bg "Image" in the Options pane. And so if you change your property to background-image then the Bg Image section in the Options pane becomes scroll able in your design.

background-image: linear-gradient(to bottom, rgba(30,87,153,0.5) 0%,rgba(41,137,216,0.5) 50%,rgba(32,124,202,0.5) 51%,rgba(125,185,232,0.5) 100%);


P.S. I said rule originally but I meant property so I edited to say that.

Thanks, Saj, you impressed me with your debug capabilities. So the small BSS bug lies with not being able to properly translate the background shorthand and divide it into its parts, with linear-gradient being a value for background-image

I still think that all values should be scrollable and copiable. Only active one modifiable, but all selectable. Or maybe better, double clicking on a value could show the related (editable) css rule in the styles pane.

You can copy all code (from within BSS or in your external CSS file), you can paste into the code, etc. It's tricky, but it's definitely doable. If you copy code from external sources you need to be aware that sometimes it is formatted differently on a website or other source and doesn't paste correctly (will paste all one line type of thing), but for the most part you can copy a whole page of classes and paste it to your custom CSS file. Just click between classes where you see the blue line appear. When you see the highlighted text appear in that spot do a Ctrl+V and it will replace the highlighted text with the class(es) you have copied.

You can also highlight complete files, specific classes in a row etc. within the Styles window and paste them elsewhere in that file or in your text editor etc.

@marrco, I do agree that it should be able to recoginize the shorthand better. I'm not sure the intent of the Devs as they might not have considered the usage that way. I myself don't think I've actually seen linear-gradient in the shorthand manner, I think I've always seen developers use the background-image for it. I'm not really sure why though just has been my experience.

I'm wondering if it would make more sense for the Options pane background section to totally break it out into all the parts something like

Bg Color
Bg Image (literal)
    - position
    - size
    - repeat
Bg Granient
    - property ([linear-gradient/repeating-linear-gradient]/[radial-gradient/repeating-radial-gradient])
    - direction (based on property [down/up/left/right/diagonally]/[defined by their center])
    - first color/size
    - second color/size
    - add color/size
Checkbox to use Shorthand

Obviously you run into an issue where you might have set a bg color and an image and then also gradient, but does the gradient step on the color and/or image and maybe that's why I see developers use specifically background-image for gradients because that must be what it actually overrides. So I then don't know if a checkbox for use shorthand would work in this case.


@saj I'd drop all of that. Chrome developers tools are enough are better suited to the job. And editing CSS is the way to go. When there is an automatic preview in google chrome (and we do have that) we don't need anything else. Even spending too much time to improve the internal editor doesn't make sense to me, when we could use a different open sourced one with advanced features.

My 2 cents about BSS devolvement is not to duplicate existing features of other great tools ( for editing, chrome with dev tools for debugging) and invest in becoming the best in its own niche.

btw, in windows 10, 64 bit, the import function now is working, but I'm sure it was not a few days ago, when i confirmed the issue and when retested a few days later. So maybe there is bug somewhere.

Hi, I can not import any Google Font, version 2.6.1, and I'm on a Mac. I tried removing the 's' from 'https' and no luck. Any workaround or fix will be coming soon? Right now I can only work Source Sans Pro font. I bought bootstrap studio yesterday and this is a bit dissapointing

Have you contacted Support? That is where you should start with this issue if nothing anyone else has posted so far will fix it. I haven't heard many fixes other than the HTTPS one so contact support directly and see if they have any options for you.

I did indeed. I tried support and forum but no answer yet. No other choice than wait :(

Try the updated version of the app v2.6.2 that has the updated Font Management.

In the app click on the HELP menu and select the Check for Updates. Click the About Bootstrap Studio to verify the version your running.

Also trying going to the fonts website address in your web browser to see if you can get to it that way. If you can't then the issue has something to do with your internet connection.