I'm using a icon font created from icomoon.io. It has a small limited set of characters that are associated with a set of Unicode characters. I need these icons to display when those specific characters are input into a textarea. When any other character is input though I want it to fallback to Tahoma. My CSS looks like this.
#font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot');
src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
url('fonts/icomoon.woff') format('woff'),
url('fonts/icomoon.ttf') format('truetype'),
url('fonts/icomoon.svg#icomoon') format('svg');
unicode-range: U+2600-2750;
font-weight: normal;
font-style: normal;
}
body {
font-family: Tahoma, icomoon;
}
textarea {
font-family: Tahoma, icomoon;
}
This works fine in Chrome and Firefox. Regular characters show up in Tahoma and my special characters will show up in my icon font. It works in the body of my document and also in my textarea.
In IE in the body everything works the same. Regular characters in Tahoma, special characters in icon font. In the textarea however IE is falling back to another set of symbols instead of my icon font. The non-special characters show up in Tahoma.
If I reverse the fonts in the font family...
textarea {
font-family: icomoon, Tahoma;
}
Now my icon font shows up but IE falls back to a different font other than Tahoma.
Tahoma is just an example by the way, using generic san-serif does the same thing.
Is this just a IE bug or is there a way to fix this behavior, or is there something I'm missing?
Update
I simplified even more and made this JSFiddle. If you run it in Chrome and then IE you should see the issue.
http://jsfiddle.net/sx7B4/
As your simplified example shows, this is a bug in IE (at least in IE 10 in all modes) and does not depend on #font-face fonts. A further simplification:
<!DOCTYPE html>
<title>textarea fallback in IE</title>
<style>
body {
font-family: Georgia, Courier New; }
textarea {
font-size: 100%;
font-family: Georgia, Courier New; }
</style>
Hello world ↕<br>
<textarea>Hello world ↕</textarea>
Since Georgia does not contain U+2195 (↕) but Courier New does, we should get the Courier New glyph in both cases. What we get instead in the textarea on IE seems to be from MS Gothic or some similar font.
So apparently IE uses only the first existing font family name in the font-family property list for textarea, and for characters not found in it, it uses its own fallback mechanism.
Workaround: instead of textarea, use div (or other element) with the contenteditable attribute and (if the textarea is part of a form to be submitted) copy the content of that element into a hidden field of the form. (This is complicated by the problem that in a contenteditable element, things work differently, e.g. hitting Enter adds <p> markup.)
Related
I have a short css script in Stylish that replaces Arial with a custom local font ("Dengxian") for parts of the CJK character range:
#font-face {
font-family: Arial;
unicode-range: U+2E80-FFFF;
src: local(Dengxian);
}
The problem is that Stylish reports "unicode-range" as an unknown property. Removing the unicode-range line makes the script work, but then it's undesirable to override Arial for Latin characters. What is wrong with my code?
Try to put
font-family: Arial !important;
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 have css like so:
#font-face {
font-family: 'alegreya';
src:url('fonts/AlegreyaBold.ttf');
font-weight:normal;
font-style: normal;
}
#font-face {
font-family: 'alegreya';
src:url('fonts/AlegreyaBoldItalic.ttf');
font-weight:normal;
font-style: italic, oblique;
}
#font-face {
font-family: 'alegreya';
src:url('fonts/AlegreyaBlack.ttf');
font-weight:bold;
font-style: normal;
}
#font-face {
font-family: 'alegreya';
src:url('fonts/AlegreyaBlackItalic.ttf');
font-weight:bold;
font-style: italic, oblique;
}
And a rule for my class like this:
.font-alegreya {
font-family:alegreya;
}
And finally HTML:
<li class="font-alegreya" data-styles="bold, italic, extrabold">
Alegreya - Some sample words.
</li>
Now, I've read here on metaltoad and other places on SO that using a single font-family is the preferred way to utilize custom fonts and that you have to put bold-italic last.
The Problem is that the font is displayed italic. By using font-weight:normal in the css class, I get normal display weight, but font-style:normal doesn't clear the italics. This makes sense, since under (-webkit) "developer tools" in the "resources" tab, I only see the black-italic font loaded (second in my CSS file). The font is installed on my computer, but I renamed the file on the server.
I've observed this in opera (webkit) and IE11, so it's my code.
Edit: As mentioned in the comments, I had bold and black inverted. That accounts for the bold. But italic is still an issue.
As David Stone's answer on the authoritative answer to #fontface questions states, this spec says that oblique, italic IS valid.
As he stated, FF 3.6 doesn't like the two values. Buried in the comments there are more reports of two-values not working.
On digging into the webkit bug reports, I discovered that the value for font-style as prescribed by the spec changed from CSS2 to CSS3. According the later css3 spec, only one value is allowed for the font-style property, rather than a comma-separated list.
So nowdays, if you pass in a comma-separated list, the rendering engine says "that's not a valid font-style. They must have meant normal." And overrides your previous normal declaration.
tl;dr: If font face is rendering all italic fonts:
font-style: italic, oblique;
should be
font-style: italic;
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 just started using #font-face
This is on top of my css
#font-face {
font-family: Avenir;
src: url(../fonts/AvenirLTStd-Medium.otf);
}
body{
font-family:"Avenir",Helvetica;
background:#fff url(../images/main_bg.png) repeat-x scroll 0 0;
color:#321244;
}
and i have this below for a menu on joomla
#menu_bottom ul li a {
font-size:12px;
font-weight:600;
letter-spacing:-0.6px;
text-transform:uppercase;
this is on the html file
<li class="item23"><span>Menu Item</span></li>
This works in Firefox, but it is not working correctly on Safari or Chrome, the font is correct but the font-weight is not working, i checked on google-chrome developer tool and the computed font weight is 600.
I have tried using 100 or 900 the results on safari and chrome are the same, the font weight wont change.
Is there something wrong with my font-face declaration on top of my css file?
should i try adding something like this
#font-face {
font-family: Avenir;
src: url(../fonts/AvenirLTStd-Heavy.otf);
font-style: bold;
}
I tried but didnt work.
Should i add another font this are that i have on my font directory
AJensonPro-BoldIt.otf AvenirLTStd-BookOblique.otf
AJensonPro-Bold.otf AvenirLTStd-Book.otf
AJensonPro-It.otf AvenirLTStd-HeavyOblique.otf
AJensonPro-LtIt.otf AvenirLTStd-Heavy.otf
AJensonPro-Lt.otf AvenirLTStd-LightOblique.otf
AJensonPro-Regular.otf AvenirLTStd-Light.otf
AJensonPro-SemiboldIt.otf AvenirLTStd-MediumOblique.otf
AJensonPro-Semibold.otf AvenirLTStd-Medium.otf
AvenirLTStd-BlackOblique.otf AvenirLTStd-Oblique.otf
AvenirLTStd-Black.otf AvenirLTStd-Roman.otf
Or should i try another font format, something that is not otf, in IE seems to be working althought the width is bigger. I still need to fix that.
As explained here, you have to add
font-weight: normal;
font-style: normal;
inside the #font-face declaration and then use the font-weight:600; on your anchor.
Specifying a numerical value for font-weight is something you do at your peril. Different browsers interpret the values differently, and some don't interpret it as anything at all. You are best going with the standard "bold" ... which browsers get closest to matching in some semi-uniform way. Also, if you are using custom typefaces you should be certain your users have them on their systems. Also, some custom fonts don't respond well to the faux "bold" property. They will have a named "bold" face, like Avenir Bold, Avenir Black, Avenir Demibold, Avenir Demibold Condensed, etc., etc., etc.
Also, always include enough fallback fonts, including, at last, the "serif" or "sans-serif" or "monospace" general font specifier.
Better late than never. Hope this helps:
html { -webkit-font-smoothing: antialiased; }