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.
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.
I would like to use a custom font that I have in TTF format only, so I need to execute a script that would detect a support of #font-face with TTF format. What are my options?
TTF is supported by a lot of browsers. I wrote a check to test #font-face support by trying to render a small custom TTF font. If you disable the test for IE8 and below from this script (which uses an EOT font), you'll have the test you're looking for.
You can find the script here: https://github.com/RoelN/font-face-render-check
There are a ton of posts here that get into this subject in great detail.
Just to get you going if you only have a TTF file you can use Font Squirrel to convert the TTF file into other common web fonts.
These will help provide fallbacks for all of the different major browsers
The site will also help you with the generation and usage of the #font-face tag in CSS to embed the font correctly.
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.
I'm using the import thing in my CSS, like this
#import url(http://fonts.googleapis.com/css?family=Kite+One);
But the font doesn't load all the time. I'm still working on the CSS and refreshing periodically. Is it because of that? Is there any way to fix this?
Instead of #import, you should add a link to your page by..
<link href='http://fonts.googleapis.com/css?family=Kite+One' rel='stylesheet' type='text/css'>
Then, add the font under the body element in your stylesheet using font-family.
For Instance,
body{font-family: 'Kite One', sans-serif;}
For further doubts, refer here.
It should work now.
If you are having issues with Web fonts, you need to take a look at this
Web Font Loader
The Web Font Loader is a JavaScript library that gives you more control over font loading than the Google Fonts API provides. The Web Font Loader also lets you use multiple web font providers. It was co-developed by Google and Typekit.
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