search

HermanMartinus / bearblog

Free, no-nonsense, super fast blogging.
MIT License
2.39k stars 73 forks source link

importing google fonts in css may not be working? #152

Closed james-see closed 1 year ago

james-see commented 2 years ago

I can't tell if it is working or not. @import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); for example does not seem to work.

y-arjun-y commented 2 years ago

Importing Google Fonts is working just fine for me when I use an external CSS file or extend/overwrite existing styles. The font you gave also works for me. How are you going about using the font? Maybe a screenshot of your styling page could help out.

james-see commented 2 years ago

@y-arjun-y thank you for this, here is the top of my css I have in the extended section. 

@import 'https://fonts.googleapis.com/css?family=Rubik+Mono+One';
@import 'https://fonts.googleapis.com/css?family=Muli&display=swap';

I tried with url('https://fonts.googleapis.com/css?family=Rubik+Mono+One');

etc

y-arjun-y commented 2 years ago

Apologies, extending styles seems to break importing Google Fonts. Though I'm not exactly sure why. For now, I'd recommend using 'Overwrite styles' or a CDN link. Hope that fixes your issue!

james-see commented 2 years ago

@y-arjun-y thanks for confirming I am not crazy haha. I can't overwrite because I want to use some of the base styling and not recreate the wheel. If I have the full base CSS as a separate file, I can add my custom additions to the end of that file and then use that as an external for a work around. Is the base CSS available somewhere? Thanks again for checking.

HermanMartinus commented 2 years ago

Looking into it 👍

HermanMartinus commented 2 years ago

@constantskeptic you're not crazy 😄 it seems when extending it breaks the import, but them overwriting it works fine. Going to try push a fix now.

HermanMartinus commented 2 years ago

As with some things, it turns out it's more complicated than what meets the eye. It turns out that @import needs to be at the top of the css file, however, to extend css (by virtue of it 'cascading') the custom style needs to be added to the end. This means in order to import fonts I'll need to build out an additional field called 'import fonts'.

I'll add this to my list of things to consider, but in the meantime, you can just copy the base css from here, select "Overwrite styles", and modify it as you see fit.

HermanMartinus commented 2 years ago

In the above css file you can ignore everything from footer downwards (line 153) as those are dashboard specific styles.

james-see commented 2 years ago

@HermanMartinus that makes a lot of sense! Or maybe add a prepend css in addition to extend to keep it generic and not just for fonts for things that you want to cascade first? Thanks for the info this should be a great workaround for now.

HermanMartinus commented 1 year ago

Just doing some cleanup here. The styles are now a bit more advanced. What I'd suggest doing to get around this is to have custom styling replace instead of extend the default stylesheet. This way the @import statement at the top of the stylesheet will work perfectly.