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.
Related
I've stumbled upon a CSS file for webfont integration, in which text-rendering property was used inside of #font-face:
#font-face {
font-family: "Font Name";
/** ... */
text-rendering: optimizeLegibility;
}
My IDE tells me that this is an incorrect usage, and it is according to the MDN. Is this a mistake of CSS author or is there some browser discrepancy involved?
It's probably a mistake on the author's part. text-rendering is a property, not an #font-face descriptor. Furthermore, it's a text property, not a font property. These are two distinct categories of properties.
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.
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
The idea in the following is the first #font-face is for Firefox, the second for IE, and Arial for anything else that can't make sense of the first two. Its all working except for I want to give a different size in the case of Arial, and haven't figured out the syntax to do that.
#font-face {
font-family: Tribeca;
src: url("Tribeca.ttf"); format("truetype");
}
#font-face {
font-family: TribecaIE;
src: url("Tribec0.eot");
}
BODY
{
FONT-FAMILY: Tribeca, TribecaIE, Arial; font-size: 195%;
}
I don't believe this is possible with css alone; we will probably need to use javascript.
All we want to do is specify a different font-size if Arial is the active font. Detecting the active font is not exactly straightforward, but here is one method that will work for our particular purpose. We can create a temporary element containing some Arial characters and measure its width, and then create a second element containing characters without specifying a font (so that it defaults to the "active" font) and compare widths. This won't tell us which font is currently active, but can indicate whether or not one of the embedded fonts was loaded with #font-face as they certainly won't have the same width as Arial. If the two elements' widths aren't equal we know that Arial could not have loaded, and so we will only adjust the font-size if the widths are equal.
Even if the browser is unable to load the Arial font, our test is still functional, because when we specify Arial during the test, the browser will default to the same font as it would for the second element. Both elements will still have equal width if the browser is unable to load the embedded fonts with #font-face.
If anyone would like me to further illustrate with code, I'll be happy to write the javascript.
This is not supported by normal CSS rules..
I believe your options are
the font-size-adjust property of css 3
javascript (jQuery), and check for current font to see which one of the three is effective and adjust the font-size accordingly.. http://www.w3.org/TR/css3-fonts/#font-size-adjust ( you should also have a look at the http://www.modernizr.com/ )
I believe it is this (close to what you have):
#font-face {
font-family: Tribeca;
src: url("Tribeca.ttf");
}
#font-face {
font-family: Tribeca;
src: url("Tribeca.eot");
}
body {
font-family: Tribeca, Arial;
}
IE won't know how to open the ttf, so it won't bother. Then it will open the eot. Then, you just specify the font by the given name in the body declaration.
Target your browsers by knowing which one reads which type of declaration.
Conditional Comment load different CSS calls.
Then you can specifically tell each one to do something different per rule.
Also there is typekit
#font-face {
font-family: 'Tribeca';
src: url(Tribeca.eot);
src: local('Tribeca'), url(Tribeca.ttf) format('truetype');
}
MSIE will ignore the last line cos it doesn't understand format rule. and yes as pointed by porneL above, format() should go in the src property.
local() will make supporting browsers use local font file if user has it instead of downloading from your server (and probably make IE ignore the line too).
as for the font-size adjustment, as pointed by Gaby: CSS 3 font-size-adjust. but it looks like it's not widely supported, yet.
To void code duplication with #font-face, you can do this via server side. If you use for example some urlrewrite, detect UA, if it's IE - return file with .eot extension, if it's normal browser - ttf.
As for me, it works great.
And for this case, you shouldn't change your css files, just should have 2 files: .ttf & .oet.
Although it's against normal good-practices when using CSS, you could use the !important declaration in your conditional CSS.
As an example, we create two stylesheets: the 'default' one, which will have a section for Firefox-specific styles and an Internet Explorer stylesheet.
Then, using the standard <link rel="" /> method of importing stylesheets:
<link rel="stylesheet" href="normal/css/file.css" type="text/css" media="screen, projection">
<!--[if IE]><link rel="stylesheet" href="http://mysite.com/path/to/ie6.css" type="text/css" media="screen, projection"><![endif]-->
Within the 'default' stylesheet, our Firefox styles are wrapped in the following:
#-moz-document url-prefix() {
#my-id { font-size: 100%; }
}
This works because the #-moz-document url-prefix() section is how Firefox addons style webpages. So, other browsers don't understand it and therefore just skip it.
BODY
{
FONT: 140% Arial;
FONT: 195% Tribeca,TribecaIE;
}
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.