Is it still reasonable to assume that font-weight:normal and font-weight:400 are equivalent even when using Web Fonts?
In the value of font-weight, normal by definition means 400. This does not depend on font.
Using #font-face, it is possible to cheat e.g. by declaring a font face as having normal weight (by defaulting font-weight, or by setting it to normal or 400) even though the typeface is in fact bold (or light or whatever). Fontsquirrel #font-face generator does this: it effectively defines each typeface as a font family. Example:
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on January 22, 2013 */
#font-face {
font-family: 'source_sans_probold';
src: url('sourcesanspro-bold-webfont.eot');
src: url('sourcesanspro-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('sourcesanspro-bold-webfont.woff') format('woff'),
url('sourcesanspro-bold-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
This means that an element may have the font-weight value of 400, even though the typeface actually used is bold design.
This is not in any way related to the use of 400 vs. normal, and it’s not just the font weight. FontSquirrel plays the same game with font-style.
This may not be the definitive answer but it will have to do for now - I went through the whole current set of 617 fonts on Google Web Fonts. From what I can see Normal is always 400. All current fonts specifiy Normal, 400.
The one thing I should add - there are some WOFF fonts, e.g. Open Sans Condensed, which do not in fact have a "Normal" style at all. However, this should not break the assumption of Normal = 400.
Here is an interesting gotcha with Chrome. It silently replaces font-weight:700 with font-weight:bold. It doesn't try to do that with the other font weights. Even so if you are relying on numeric values it is best to put in a silent test that does the requisite replacements. Something along the lines of
var sample = $('#fontSampleA');
var fontwt = sample.css('font-weight');
fontwt = ('normal' == fontwt)?400:(('bold' == fontwt)?700:(('book' == fontwt)?300:fontwt));
just in case a future version starts trying to do more silent "smart conversions".
Related
I want to make text super thin, less than
font-weight: 100
Is that possible to do with CSS?
Like this but with helvetica:
CSS font weights do not "make fonts thin" (or bold) when dealing with web fonts. For not-loaded-from-url fonts the font-weight value maps from ultra thin to extra bold, but for custom fonts the weight is "whatever the #font-face binding says it should be": they are merely differentiation numbers used when declaring a font family with multiple weights.
The following is a CSS declaration for a web font that uses three weights, but have a close look at font resource vs. font weight:
#font-face {
font-family: "Helvetica Neue";
font-weight: 800;
src: url(helveticaneue-ultrathin.woff);
}
#font-face {
font-family: "Helvetica Neue";
font-weight: 400;
src: url(helveticaneue-regular.woff);
}
#font-face {
font-family: "Helvetica Neue";
font-weight: 100;
src: url(helveticaneue-ultrathin.woff);
}
This gives us one CSS-declared font family, with three defined weights (using value other than 100, 400, or 800, will lead to undefined behaviour). Now two of those weights point to the same font resource.
The following code will style text using the ultra-thin font, even though the CSS uses weight 800, which for predefined fonts normally means "pretty damn bold":
<p style="font-family: 'Helvetica Neue'; font-weight:800">This is thin!</p>
So if you want to use a superduper thin font: go for it. But that has nothing to do with the CSS font-weight value, and everything to do with the value you assign it in its #font-face rule, and then use in your font-using-CSS.
The weight of the font displayed must be available in the font you have chosen. If the font weight does not exist in that set then you cannot select it with CSS. That is why you need to look at what weights are available in the font you choose. Such things are listed, for example, in Google Fonts but font companies usually list what weights are available, whether they are free or purchased.
For example, Open Sans lists its lightest weight as 300. If you set it to 100, you won't see anything different than if you set it to 300 cause 100 does not exist.
Despite all that, you say you want to set the weight to something less than 100. However, less than 100 is not part of the CSS standard so, no, you cannot do that.
You can find the font here..: https://www.facebook.com/RITCreative/app/208195102528120/
Instead of hoping for an impossible font-weight to magically become real, use Font Forge to make your own font.
What you probably want is Helvetica Nue which is installed on Macs.
Anyways look at Google fonts and use the Filters: Thickness like what Rob suggested.
Use:
font-weight:"lighter"
And you'll get a similar result.
Secondly if I have a font converter tool that creates the font to a different font type otf, ttf etc. and I try and install the font into my font folder on my laptop (which it doesn't register) will it work if I load into an FTP with #font-face.
So the questions come down to do I have to write the font-face differently for different types or is there a way I can combine them.
You can combine all the different font formats into one #font-face. Here's an example:
#font-face{
font-family: 'font-name';
src: url('example-font.eot');
src: url('example-font.eot?iefix') format('eot'),
url('example-font.woff') format('woff'),
url('example-font.ttf') format('truetype'),
url('example-font.svg#webfont') format('svg');
}
There are two different approaches to the issue of using more than one typeface of a font:
1) Specify each typeface in a #font-face declaration, using the same font-family value but different font-style, font-weight, or (in principle) font-variant.
2) Specify each typeface as if it were a font family, using a distinctive name for each typeface as the font-family value. Do not set font-style, font-weight, or font-variant.
Method 1 is more logical, whereas method 2 is what some font generators use, so you may need to edit the CSS code they generate if you wish to use method 1.
Method 1 is compatible with default CSS settings that many elements have. For example, heading elements have font-weight: bold by default.
I have the following CSS:
font-family: 'HelveticaNeue-UltraLight', 'Helvetica Neue UltraLight', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-weight: 100; letter-spacing: 1px; }
It works on all Mac browsers (Chrome, Safari) But I opened my project on Chrome and Internet explorer on Windows, it displays the font as bold rather than light. I'm not sure how to fix this but I need the design to work cross platform with the design that appears on mac.
Thanks in advance.
Edit: I've tried using arial but arial doesn't become light on both mac and windows.
The font you see on Windows is not bold, it is just regular Arial.
In almost all Windows systems, the first available font family among those listed in the font-family value is Arial. Since Arial has no typeface of weight 100, or of any weight less than 400, the normal (400) weight typeface is used instead, by the font matching algorithm.
Fonts in standard distributions of Windows generally lack typefaces with weight less than normal. So to use lighter typefaces, you would need to use downloadable fonts (web fonts) via #font-face. See e.g. Is #font-face usable now?
(SO has many specific questions on using #font-face, check them if you run into specific problems with it).
The font-family property inform the browser that it's needed to use that font. If there is no path for it, it will check if the system have that one.
In order to be able to have a font that will work on all systems, you need to use the #font-face property.
This last one will allow you to specify path for all the format font, that most of the browsers will download to display it correctly. (For your information all recent browser support it)
#font-face {
font-family: 'myFont';
src: url('myFont.eot');
src: url('myFont.eot?#iefix') format('embedded-opentype'),
url('myFont.woff') format('woff'),
url('myFont.ttf') format('truetype'),
url('myFont.svg#myFont') format('svg');
font-weight: normal;
font-style: normal;
}
If you want more information about that property you can check the reference here:
http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp
Unfortunetly in your case the font HelveticaNeue is copyrighted, you need to buy the rights to be able to use it as a webfont.
You can take a look here about pricing:
http://www.fonts.com/search/all-fonts?searchtext=HelveticaNeue#product_top
Also, if you have already the right and have one of the format that you wish to convert to a webfont, you can accomplish that here:
http://www.fontsquirrel.com/
Finally, if you prefer you can use Google Fonts that will host the files for you, and you will just have a small script to insert inside your pages:
http://www.google.com/fonts
You can use web fonts (free or paid) as suggested by others, or just use a nice font stack that is likely to cover all bases. CSS Tricks has a nice set of them: http://css-tricks.com/snippets/css/font-stacks/
In terms of font weight, your CSS specifies a very light font weight:
font-weight: 100;
So if you want to use bold Arial instead, you need to change that.
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.
I was wondering if it's possible to, when using #font-face, have a fallback setup so that if the text on my page contains characters that are not accounted for within the font (Japanese characters for example), only those characters are presented in a basic font and every other character remains as the custom font?
I'm imagining that potentially there'd be a mix of two fonts within one paragraph on occasion.
What you described is the default behaviour of a browser - it should naturally fall back to basic font for missing characters.
However, sometimes custom fonts use blank characters, in that case you can try using the unicode-range
For example:
#font-face {
font-family: BBCBengali;
src: url(fonts/BBCBengali.ttf) format("opentype");
unicode-range: U+00-FF;
}
Taken from this interesting article: Creating Custom Font Stacks with Unicode-Range
Unfortunatelly there are browser support issues.
CSS has default fallback to the system font if the specified font doesn't contain a character.
You can also specify which font to fall back to.
Example for a serif font:
body {
font-family: "MyNiceFontWithoutJapanesChars", "common serif font", serif;
}
As long as the fallback font has those characters your default font misses, you should be all right.