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.
Related
I faced a problem using fonts via #font-face: Chrome ignores font-weight rule with this font, so captions look poor. Searching made no results in my case. So I found another version of my font to use it with Chrome.
Can you tell me the simplest way to set another font for headers only in this browser?
To set a style specifically for the browser, the easiest solution is to use javascript to detect the browser and write the browser name to the body tag on the page as a classname. Then you can use the classname to control CSS for that browser.
Here's a jsFiddle that detects Chrome.
But your question might be able to be better solved without adding an extra script and markup.
Double-check your font path. Some browsers will still find the font, some are more picky:
#font-face {
font-family: 'your-font-name';
src: url('/fonts/your-font-name.woff2') format('woff2'), /* check path */
url('/fonts/your-font-name.woff') format('woff'); /* check path */
font-weight: normal; /* if this is being ignored, try declaring it in the h1 */
font-style: normal;
}
If you've declared "font-weight: normal;" in your #font declaration, and it's being ignored, for some browsers you need to create an additional rule for the h1 style:
h1 {
font-weight: normal;
}
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'm using a webfont that only supports most of the latin characters. However, the website is multilingual, russian is one of the languages. As you probably know, russian consists of cyrillic characters, which are then displayed in the secondary font-family. I found Verdana + font-weight:bold to be a good alternative.
However, font-weight bold needs to be related to Verdana only, so I can't just write it into the normal CSS, as the webfont should not be displayed bold. Here some tries that did not work:
CSS:
#font-face {
font-family: "some Webfont";
src:url('xyz.eot')
}
/* The font-weight won't work here */
#font-face {
font-family: "Verdana-Bld";
src:
local('Verdana');
font-weight:bold;
}
/* Doesn't work in IE9 at all */
#font-face {
font-family: "Verdana-Bld";
src:
local('Verdana Bold');
}
/* Doesn't work in IE9 at all */
#font-face {
font-family: "Verdana-Bld";
src:
local('Verdana Bold');
}
.container {
font-family:"some Webfont", "Verdana-Bld";
}
So font-face is probably not the solution here, Verdana Bold seems to be a good way, however, it's not working when using it in normal CSS like this:
.container {
font-family:"some Webfont", "Verdana Bold";
}
I don't get it, when using #font-face, it finds and renders that font, but not when using as font-family?
Verdana Bold is really just a typeface of the Verdana font family, and it should be used by setting font-family: Verdana; font-weight: bold. In some cases, it is possible to use a typeface as if it were a font family, by declaring its name as the value of font-family, but this is browser-dependent and depends on the font, too; for Verdana Bold, the trick does not appear to work. The more complicated trick of using #font-face works for some browsers but not all, as you have seen; this even depends on the font name you use (e.g., the “full font name” Verdana Bold vs. the PostScript font name Verdana-Bold).
So a different approach is needed: try and find a font that covers all the characters needed. E.g., at Google web fonts, you can set “Script” to “Cyrillic” to find fonts that support Russian letters. Such fonts generally support Latin letters, too.
So The font-weight in font-face doesn't set the font-weight but is kind of a filter for browsers to decide if it is the right font to use. So when the browser looks which font to display it will choose the font-face where you set font-weight: bold just if your current text is bold and will take the other one in any other situation.
I think that it is actually possible to make one font bold and the other one regular just if you can call this in font-face directly. (so if you could have something like local('Verdana Bold'). Then just get rid of font-face:bold and it should work fine.
I am using Google Web Font's PT-sans
font-family: 'PT Sans',Arial,serif;
but it looks different in Chrome and Firefox
Is there anything that I need to add so that it looks same in all browsers?
For the ChunkFive font from FontSquirrel, specifying "font-weight: normal;" stopped Firefox's rendering from looking like ass when used in a header. Looks like Firefox was trying to apply a fake bold to a font that only has one weight, while Chrome was not.
For me, Chrome web fonts look crappy until I put the SVG font ahead of WOFF and TrueType. For example:
#font-face {
font-family: 'source_sans_proregular';
src: url('sourcesanspro-regular-webfont.eot');
src: url('sourcesanspro-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('sourcesanspro-regular-webfont.svg#source_sans_proregular') format('svg'),
url('sourcesanspro-regular-webfont.woff') format('woff'),
url('sourcesanspro-regular-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Even then, Chrome's fonts look thinner than in Firefox or IE. Chrome looks good at this point, but I usually want to set different fonts in IE and Firefox. I use a mixture of IE conditional comments and jQuery to set different fonts depending on the browser. For Firefox, I have the following function run when the page loads:
function setBrowserClasses() {
if (true == $.browser.mozilla) {
$('body').addClass('firefox');
}
}
Then in my CSS, I can say
body { font-family: "source_sans_proregular", Helvetica, sans-serif; }
body.firefox { font-family: "source_sans_pro_lightregular", Helvetica, sans-serif; }
Likewise, in an IE-only stylesheet included within IE conditional comments, I can say:
body { font-family: "source_sans_pro_lightregular", Helvetica, sans-serif; }
There are a few fixes. But usually it can be fixed with:
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Sometimes it can be due to font-weight. If you are using a custom font with #font-face make sure your font-weight syntax is correct. In #font-face the idea of the font-weight/font-style properties are to keep your font-family name across different #font-face declarations while using different font-weight or font-style so those values work properly in CSS (and load your custom font -- not "fake bold").
I've seen -webkit-text-stroke: 0.2px; mentioned to thicken webkit fonts, but I think you probably won't need this if you use the first piece of code I gave.
css reset may fix the problem, I am not sure .
http://yuilibrary.com/yui/docs/cssreset/
I've noticed that chrome tends to make fonts a bit more sharper and firefox a bit smoother.
There is nothing you can do about it. good luck
To avoid font discrepancies across browsers, avoid using css styles to alter the look of the font. Using the font-size property is usually safe, but you may want to avoid doing things like font-weight: bold; instead, you should download the bold version of the font and give it another font-family name.
i found this to be working great :
-webkit-text-stroke: 0.7px;
or
-webkit-text-stroke: 1px rgba(0, 0, 0, 0.7);
experiment with the "0,7" value to adjust to your needs.
The lines are added where you define the bodys font.
here is an example:
body {
font-size: 100%;
background-color: #FFF;
font-family: 'Source Sans Pro', sans-serif;
margin: 0;
font-weight: lighter;
-webkit-text-stroke: 0.7px;
As of 2014, Chrome still has a known bug where if the webfont being used has a local copy installed, it choses to use the local version, hence, causing OP rendering issues.
To fix this, you can do the following:
First, target Chrome Browser or OSX (For me, the issue was with OSX Chrome only). I have used this simple JS to get quick Browser/OS's detection, you can chose to do this in any other way you're used to:
https://raw.github.com/rafaelp/css_browser_selector/master/css_browser_selector.js
Now that you can target a Browser/OS, create the following 'new' font:
#font-face {
font-family: 'Custom PT Sans';
src: url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/jKK4-V0JufJQJHow6k6stALUuEpTyoUstqEm5AMlJo4.woff) format('woff');
font-weight: normal;
font-style: normal;
}
The font URL is the same your browser uses when embedding the google webfont. If you use any other font, just copy and change the URL accordingly.
Get the URL here http://fonts.googleapis.com/css?family=PT+Sans:400,700&subset=latin,latin-ext
You may also rename your #font-face custom font-family alias.
Create a simple CSS rule to use that font targeting Browser/OS or both:
.mac .navigation a {
font-family: "Custom PT Sans", "PT Sans", sans-serif;
}
Or
.mac.webkit p {
font-family: "Custom PT Sans", "PT Sans", sans-serif;
}
Done. Just apply the font-family rule wherever you need to.
Different browsers (and FWIW, different OSes) use different font rendering engines, and their results are not meant to be identical. As already pointed out, you can't do anything about it (unless, obviously, you can replace text with images or flash or implement your own renderer using javascript+canvas - the latter being a bit overboard if you ask me).
I had the same issue for a couple of months. Finally, it got worked by disabling below settings in Chrome browser's settings.
Set "Accelerated 2D Canvas" to "Disabled"
(In the browser's address bar, go to chrome://flags#disable-accelerated-2d-canvas, change the setting, relaunch the browser.)
Since the fix for this issue has clearly changed, I would suggest in general turning off any hardware-accelerated text-rendering/2D-rendering features in the future if this fix stops working.
On Google Chrome 55, this issue appears to have cropped up again. As anticipated, the fix was disabling hardware acceleration, it just changed locations.
The new fix (for me) appears to be:
Settings -> Show advanced settings... -> System
UNCHECK "Use hardware acceleration when available"
https://superuser.com/questions/821092/chromes-fonts-look-off
The issue might be more what we don't set in our CSS than what we do set.
In my case, FF is showing text in the default Times New Roman, while Chrome uses Montserrat as expected.
This happens to be because in Chrome I set Montserrat as the default, while FF has no default.
So, I think that some browser differences are rooted in the browser's configuration rather than in my CSS.
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;
}