I'd like to build a common typography stylesheet with a very small number of selectors. As such, I'd far prefer to use #media sections for the various versions rather than create different files, each with only a few lines of content.
I'd also like to add some #font-face declarations, but I'd prefer not to force mobile users to download the fonts given their limited bandwidth.
Can I put the #font-face declaration within the #media block or do they have to both be top-level? If the latter, how can I tell the mobile browsers they don't need to bother downloading the font?
The CSS2 spec suggests something like this.
Put your #font-face declarations in a separate CSS file, such as fancyfonts.css.
Load fancyfonts.css in your main CSS file, but with a media-target declaration:
#import url("fancyfonts.css") screen;
Specify your fancy font in the font-family attribute.
body {
font-family: 'My Fancy Font', serif;
}
Media which don't load the fancyfonts.css will fall back to the other fonts you specify -- in this example, serif.
Can I put the #font-face declaration within the #media block or do they have to both be top-level?
This seems unspecified by the current Working Draft of the CSS3 Fonts module. However, the CSS Validator rejects font-face-inside-media, so it's probably best avoided.
Related
I am using a web-font that is declared with #font-face in an external css file. The font service is setup such that I source the external css file and then just use the font in my css. I cannot source the font file itself in my own #font-face definition.
Every time I use the web-font on my site, I add the same two style definitions to it. So, my font use always looks something like this:
h2{
font-family: 'Knockout 26 A';
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Adding the antialiasing and grayscale EVERY TIME I use the font seems unnecessarily redundant. Is there a way for me to extend the #font-face declaration from the external file in my own css?
Thanks!
It's not possible to extend a #font-face declaration. According to the current W3C recommendation for fonts (3 Oct 2013) #font-face requires the font-family and src descriptors or the declaration is invalid. Additionally, the descriptors are limited to:
font-family
src
unicode-range
font-variant
font-feature-settings
font-stretch
font-weight
font-style
so you wouldn't be able to use webkit-font-smoothing or moz-osx-font-smoothing anyway.
I recommend using a CSS preprocessor like Sass, Less or Stylus to cut down on the verbosity of CSS. But if you can't use those you'll just have to keep writing your CSS declarations as you currently are.
I would recommend using LESS mixins. From lesscss.org:
Mixins are a way of including ("mixing in") a bunch of properties from one rule-set into another rule-set.
So for example you could write:
.knockout{
font-family: 'Knockout 26 A';
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
And add the mixin where you want to apply the font:
h2{
.knockout;
}
More on mixins
I actually faced the same kind of issue because the #font-face declaration was made in an external CSS file that I couldn't control.
I also tried to override the #font-face declaration but it does not work.
So the solution in my case was actually to declare the #font-face BEFORE the inclusion of the external CSS file. The browser will then use my #font-face declaration and ignore the one in the external file.
I have a CSS file with #font-face declarations. The corresponding fonts are stored as base64-encoded WOFFs within the declarations. For reasons that you'll have to trust are good ones, I'd like to create multiple #font-face declarations that point at the same base64 WOFF (meaning, without duplicating it within the CSS file, nor moving it to an external file.)
Can it be done? If so, how?
Further research suggests a simple answer: it can't be done.
Pure CSS do not have pointers.
Have a look at SASS or LESS, which are pre-compilers for CSS.
They allow (among of other things) the use of variables:
#b64woff: url("data:font/opentype;base64,AAEAAAATAQAABAAwR1BPU7iiypwABG5IAA...");
#font-face {
font-family: 'YourFont';
src: #b64woff;
}
In fact, when LESS or SASS will compile your code, it will replace every instance of #b64woff with its value.
Here is a sample CSS
h1 {
font-family: 'header-font', arial, sans-serif;
}
p {
font-family: 'paragraph-font', arial, serif;
}
Is it possible to load any remote Google Font (let say 'Lato') so that it's family name in CSS would be 'header-font'?
Edit: The idea behind this is to be able to easily swap fonts in a WP theme. Unfortunately using variables in CSS preprocessors is not an option in my case.
I don't think you can to be honest. The Google font has a predefined name when you view the google font. See this for example: http://fonts.googleapis.com/css?family=Akronim
Its name is set as 'Akronim' and I dont think you can reference it by any other name.
Yes, very easily. Once you located the font at Google, eg.
#import url('https://fonts.googleapis.com/css?family=Lato:400&subset=latin-ext');
just direct your browser to the url specified:
https://fonts.googleapis.com/css?family=Lato:400&subset=latin-ext
What you get back is the #font-face CSS item for the font (or fonts). Simply use this verbose version in your CSS instead of the original #import specification. You can freely rename the font-family item in any of these descriptions. Yes, you have to make sure there are no clashes with other fonts but the naming is completely up to you.
Yes, you can give any name you want when you define the font family in the #font-face style declaration and use that name to reference it later in the stylesheet.
#font-face
{
font-family: whateverYouWant;
src: url('example.ttf'),
url('example.eot');
... /* and so on */
}
Whatever you name the style as in the font-family property is how it will be referred to from the rest of the document. However I don't know how it competes with local font files (so if you tried to name a custom font Arial I'm not sure what you would get - the custom font or the real Arial). I don't know why you would do that anyway though.
I am having problem defining CSS rules for browsers that do not support font-stretch property (webkit, etc)...
THE PROBLEM:
I am using Helvetica Neue font (CSS setup from Twitter Bootstrap) and I use font-stretch:condensed; property on some of my CSS rules. Unfortunately I have soon figured out that this property is not supported in Webkit and some other browser, and I began searching for a fallback rule.
One solution found here for webkit browser is to use post script font name font-family: "HelveticaNeue-CondensedBold","Helvetica Neue",Helvetica,Arial,sans-serif;. But it is really only Mac solution. Windows browsers will not have this font and will fallback to non stretched font.
So the only real solution for using condensed font is to import a font from a site like myfonts.com, google webfonts etc... Since I am looking for a FREE solution I found some FREE fonts that come close to Helvetica Neue Bold Condensed. I am now wondering is there a way to specify a CSS rule only target the browsers that do not support font-stretch property?
The only way I can think of, is javascript feature detection:
if (document.createElement("detect").style.fontStretch === "") {
document.getElementsByTagName("html")[0].className += " fontstretch";
}
add this in your <head> tag.
this will add a fontstretch class to your html tag so you could:
set the #font-face rule as a standard - it will be the fallback for browsers that do not support font-stretch
use .fontstretch as a css hook to set the font-family back to Helvetica Neue and apply font-stretch as well.
I came accross a meaningful solution when I was searching for something else that allows you to specify the browser specific css using .ie9 .yourclass .chrome .yourclass etc in your css file. It uses a small javascript file that can be loaded in the _layout file or masterpage file..
That link is Here
My site uses some fonts with the #font-face CSS tag.
However I'm trying to add some temporary CSS styling to my site for a holiday or season...
I'd like to change an accent font to a different font. I was wondering if it was possible to leave the original CSS and just let my seasons.css file override it. Can browsers resolve #font-face conflicts?
My original CSS would be like:
#font-face {
Font-family: 'accentfont2';
Src: url(example/font.ttf);
}
And then my seasonal CSS which will be positioned below the standard CSS will be like:
#font-face {
Font-family: 'accentfont2';
src: url(example/seasonalfont.ttf);
}
Would the browser resolve the conflict by using the seasonalfont.ttf rather than the font.ttf?
Just use !important at the end of your seasonal styles, this will override the normal ones.
so.......
#font-face {
Font-family: 'accentfont2';
src: url(example/seasonalfont.ttf) !important;
}
You would want to comment out the seasonal ones when you didn't want them though by putting /* at the start of the seasonal code and / at the end, this will make them so they are ignored until you uncomment them by removing the / and the */ .
One alternative would just be to comment out the normal font css and uncomment the seasonal one when you want to use it.
Option 3 would just be to replace the font file with the other one each season, this way you wouldn't need to dive into the css at all, just change it via ftp.
They can... all I had to do was type the normal CSS and it worked. This question was looking for a recommendation/condemnation but whatever