When using unicode-range in a #font-face block, how are ligatures included?
If a ligature contains a mixture of glyphs both inside and outside the range(s) provided by unicode-range, is that font included in the ligature, or will the browser try to find a more appropriate font?
Alternatively, does it require that all of the ligature's glyphs are included in the font for it to render the ligature?
Is any of this in the specification? I can't find any literature on it.
Related
What's the difference between ui-sans-serif and sans-serif fonts in font-family in CSS? And ui-serif vs. serif? And ui-monospace vs. monospace?
Where does system-ui fit into this? Would you use it for all 3 types of fonts, and where would it go in the list of fonts?
I usually see the "ui-" variant coming first in the list of fonts in font-family in CSS, and the other coming last. Something like font-family: ui-sans-serif, (more fonts here), sans-serif. What's the point in doing that if the first matched font will be used? Since ui-sans-serif is a generic font, won't it always be matched and there's no need to add any fonts after it?
ui- generics should map to the default fonts of the system while non ui- generic ones map to the default of the browser.
A web-browser may have the same default font set for all platforms, however different platforms do have different default fonts.
I'm using 'Raleway' from Google webfonts in my Wordpress site. The standard number glyphs in this font are 'Old Style', meaning some number go over and others under the baseline. When I download and check out the font in Fontlab, I can see there are glyphs with modern styled numbers, they don't have unicode numbers assigned to them, but they have names like three.lnum or eight.lnum
Is there a way to display these glyphs from custom fonts in Wordpress? They don't show up in the Special Characters List. Thanks.
By adding font-feature-settings: "lnum" 1; to the CSS you can force lining numerals.
There is apparently a problem with Raleway hosted at GoogleFonts which hampers the font-feature-settings. This means you have to host the font yourself. Luckily Raleway is free to redistribute.
You can download it from GoogleFonts and run it through the FontSquirrel Webfont Generator. Set options to Expert, under OpenType Flattening check Lining Numerals to set lining numerals as the default for your version of the font.
There is a great article at codesmite.com explaining old style and lining numerals.
I'm working with an external font type for my website, I have the 3 ttf files, for normal, bold and italic styles.
I'm wondering if I can change the font weight, because I already tried to use the font-weight CSS property, but it seems that it only works for either normal or bold weight, so I cannot use any weight in between.
Is there any way to use other weight for my font? Do I need to include any extra files?
In short: no, you can't use other weights as is - you'll need more files. You can use normal and bold because you've included normal and bold font files. Other weights will require an accompanying font file as well.
For a visual, check out any of the fonts at Google Fonts: https://www.google.com/fonts
You'll notice there are multiple files, each representing a different font weight (and/or style, such as italic).
I have embedded fonts to my webpage and randomly in the divs i use font-style = italic and font-weight=700.
My #font-face rule is:
#font-face {
font-family: 'Arimo';
src: url('fonts/arimo_bold_italic.eot');
src: url('fonts/arimo_bold_italic.eot?#iefix') format('embedded-opentype'),url('fonts/arimo_bold_italic.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Though the font-style and font-weight additions are working fine on all the browsers, it does not seem to work on Safari 3.2 giving weird results like the style and weight being applied only sometimes at random.
Any solution?
You are specifying the typeface as normal weight, regular (not italic). This is possible and often used to overcome some browser limitations, and it is also the way FontSquirrel uses in the CSS files it generates. But is has its implications.
In this case, font-family: Arimo alone produces bold italic Arimo, since this is how you have defined the name Arimo. To a browser, Arimo is just a normal-weight regular font, so if you ask, in CSS or indirectly e.g. via b or i markup, it to be used in bold face or italic, most browsers will use the font as such.
According to the CSS 2.1 font matching algorithm, when italic (or bold italic) is requested for, a regular face is not considered a match. This means that the browser should fall back to its default font, unless your rule specifies a secondary font. No browser actually does this: Safari produces “synthetic italic” by algorithmically slanting glyphs, whereas most other browsers just use the regular font (i.e., the font they regard as regular since it was declared that way). In CSS3, this is to be changed so that the behavior of most browsers becomes the norm.
So this is a messy business, and to avoid the mess, use one of these approaches:
a) Declare each font face as a family of its own, as regular and normal-weight, as you have done here, and do not apply font-weight values other than normal' orfont-stylevalues other thannormal` to text in such a font, directly or indirectly (note that many HTML elements produce italic or bold b default).
b) Declare each font face as a font in the family, with font-weight and font-style set in #font-face the logical way, and use the font family the normal way, declaring font-weight: bold when you want bold etc. This is how Google Web Fonts work, when hosted by Google.
P.S. It is odd that the `#font-face' rule does not mention a WOFF format file, which is the preferable format of downloadable fonts when a browser supports it. Generators normally produce it, too, and include it in the rule.
If I have a custom font and I call it 'verdana', will that conflict with the browser's built-in verdana font? When I do:
font-family: 'verdana';
will the browser use my custom font or the built-in one?
Yes, you can use a custom font name that may coincide with the name of an installed font. It might be confusing, though, and might look suspicious (using a font illegally) to use a name like Verdana, if someone peeks at your code.
The CSS3 Fonts draft says: “If the font family name [in #font-face] is the same as a font family available in a given user's environment, it effectively hides the underlying font for documents that use the stylesheet. This permits a web author to freely choose font-family names without worrying about conflicts with font family names present in a given user's environment.”
You may find parts of this article interesting: http://www.practicalecommerce.com/articles/3080-How-Browsers-Manage-Fonts.
The short answer is that the browser should use whatever version of Verdana you have installed. The exception here is if you are using "src: url()", then it should load the font file from that URL. A good resource if that is the case: http://www.html5rocks.com/en/tutorials/webfonts/quick/.
If you're wanting to use your font and you worry that some browsers may just up and decide to use the local Verdana, you can rename the ttf or eot on your server and just use Verdana-Mine as the font-family and src as url('verdana-mine.ttf').