After upgrading to the release version of Divshot, I've noticed that CSS #import rules aren't being loaded in the preview panel.
For example:
#import url("http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css");
#import url("styles.css");
does nothing.
I have tried different syntax and it didn't seem to help. I can put them in the head of the HTML page instead of calling them in a CSS file, but that only works for straight CSS. Font Awesome and Google font libraries rely on #import rules to work.
Any help would be appreciated.
Because Divshot runs everything secured via SSL, you will need to use the https versions of any CSS imports, or use // to make it work both ways.
Related
Actually we have one global.css style sheet in which we are using #import url("http://fonts.net/sample.css?type=cssandid=123") for fonts.
But it's creating issues in Bundling & minification so I got following solutions:
http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
and I replace #import with element
<link rel='stylesheet' type='text/css' href='http://fonts.net/sample.css?type=cssandid=123'>
even after this I'm getting CSS errors as I checked in CSS Lint(http://csslint.net/) and not getting real UI effect as with #import.
Do we have any other solutions for this?
Environment: VS2015 , MVC 5.2 , sitecore 8.1
Thanks
Hope you found the solution since you posted this question
What you can do, to avoid the #import url('yourCssUrlHere') is simply copy/paste the URL on your browser and then copy/past the CSS that is displayed.
And then simply replace the #import by the CSS you just copied.
Most of the time if the import is a font, there will be other references to .woff or .woff2 files.
Just download them and store those files somewhere on your project folder and just add their absolute link on all the url() fields.
That way, you use external fonts or stylesheets, but internally, without request them outside of your website.
For an email newsletter, I have to use the #import CSS syntax for custom web fonts. I own all the fonts in woff, eot and ttf.
I know I can define #font-face in CSS but how can I use #import?
Simple...you must set your import in your css file...you shoud write on the first line or above all your css styles.
#import "url";
Beware not all email clients support web fonts
Read more about it - Web Fonts in HTML Email
Basically you can't... Custom fonts do not work within emails unless you're on a mac.
You'd be better off just using default fonts as the time and effort to include these for such a small minority of users really isn't worth the effort.
i'm including external font css (Google Font) on my css file using #import
styles.css
/* Feel free to use #import. r.js will merge them, when building */
#import "../vendor/bootstrap/css/bootstrap.css"; //this is included
#import url(http://fonts.googleapis.com/css?family=Chewy); //would this be included?
...
would r.js include the remote file and optimize it? r.js doesn't have a full documentation on its switches and settings or I am just missing something? or i just reconfigure my build to include the remote/cdn file?
No, as of 2.1.5 I'm getting this output:
Optimizing (standard.keepLines) CSS file: /.../style/style-all.css
/.../style/style-all.css
Cannot inline css import, skipping: https://fonts.googleapis.com/css?family=Chewy
Analysing source code on github suggests that it only supports relative paths.
I noticed that when my web page was loading, all of the CSS files loaded first, then the fonts after all of those were done. Is there a way to make the fonts start loading at the same time as the stylesheets?
I'm using #font-face with a url. Would encoding the font in the stylesheet solve this problem?
i haven't experienced this kind of scenario of yours..i'am fond of using embedded fonts on my webpages..i would like to share what i did as what i see to make them synch on web page load..i have a font.css where i embed all the fonts i needed like this:
#charset "utf-8";
/* CSS Document for Fonts :)*/
#font-face{
font-family: trajan;
src:url(../fonts/TrajanPro-Regular.otf);
}
and the url resides on the directory inside the web app..i just link this to the web page then use the defined font on other css directly..hope i got your point and explained the right thing..thank you
One of the sites I am developing is loading an external stylesheet:
#import url(http://www.othersite.com/stylesheet.css);
This works in every single browser properly, except for Safari. Safari does not even try to load it. What am I doing wrong?
Could it have to do with this old bug: http://www.thinkoomph.com/thinking/2011-04/odd-css-bug-in-webkit-and-safari-4/ ?
The solution is simple. My #import directive was surrounded by other
CSS instructions. Whereas IE tolerates this, the actual W3C spec
declares that #import directives should appear before any other CSS
instructions, and Firefox honors this restriction. Thus, my #import
directive was being ignored. I moved it to the top of the file and
everything started working.
and
At most one #charset rule may appear in an external style sheet — it
must not appear in an embedded style sheet — and it must appear at the
very start of the document, not preceded by any characters.
<link rel="stylesheet" type="text/css" href="http://www.othersite.com/stylesheet.css" />
I stumbled upon the solution while reading an article that details the pros and cons of using #import vs. tag. I tried using a tag instead of #import, and for whatever reason this solved my issue. Safari will now load the stylesheet. If anyone has any insight into why this works please comment :)