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;
Related
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 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.)
When using an arabic font with #fontfoce rule, something strange happens: when it comes to Roman characers, almost all the browsers (except Opera) does not use the Roman charset of the font and instead they use the charset of the other fonts declared in the font-family property. Let's illustrate it. Here's my #fontface rule:
#font-face {
font-family: 'hasoobCM';
src: url('/media/fonts/hasoob.eot'); /* IE9 Compat Modes */
src:url('/media/fonts/hasoob.eot?#') format('eot'),
url('/media/fonts/hasoob.woff') format('woff'),
url('/media/fonts/hasoob.ttf') format('truetype');
}
And, here is the font declaration:
.hasoob { font-family: hasoobCM, Georgia, "Times New Roman"; }
Now, the Roman characters of the text will be that of Georgia and not hasoobCM.
And the funny part is, if I declare the font as .hasoob { font-family: hasoobCM; }, then the problem is sovled and the characters render correctly. The problem is that I can not do that, because of inconsistency of the font-sizes.
So, what should I do to "force" the browsers to use all the charset of my font?
BTW, there is a unicode-range in the #fontface rule, but I don't know the exact full charset range of my font, and I'm not sure whether that will solve the issue or not.
For some reason the font I'm trying to add won't add itself to my website. I'd rather not do this with an image, so is it possible the font is broken? Would it be possible to fix it with just the otf or ttf?
My code (in case I'm missing something):
#font-face {
font-family: urbanJungle;
src: url('UrbanJungleDEMO.ttf');
}
h1 {
font-family: urbanJungle;
font-size: 100px;
color: #34495e;
}
Additional details: This is in the latest Chrome, other custom fonts work.
In the network console the font is red and it says cancelled.
Live URL: http://codestack.co.uk/website/
The font was from Dafont, no extra processing applied by myself, it's in the same directory as the index page. All the relevant CSS is included.
You should use Font Squirrel font-face generator for this: http://www.fontsquirrel.com/tools/webfont-generator
Different browsers need different font formats, you only provided one. The generator will convert your font to all the formats needed and give you a CSS file too, with no hassles.
You are using only TrueType font, IE support only *.eot fonts. And you are missing a lot informations. It is always better to use font stack instead of using single font, if first font went missing css use immediate next font on the list (called font-stack).
Here is an interesting article about #font-face by Paul Irish : Bulletproof #font-face Syntax
#font-face{
font-family:MyFont;
src:url(../font/MyFont.eot);
src:local('?'),
url(../font/MyFont.woff) format("woff"),
url(../font/MyFont.otf) format("opentype"),
url(../font/MyFont.ttf) format("Truetype"),
url(../font/MyFont.svg#myfont) format("svg");
font-weight: normal;
font-size:normal;
}
body{
font-family: "MyFont", Verdana, sans-serif; /* Font stack */
}
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.