Cost of font-family vs font-weight - css

I've inherited a code project wherein the fonts are not set up in the most sensible way. The site uses a few weights of the Proxima Nova font.
Instead of binding these font files to the same font family (i.e. font-family: "Proxima Nova"), a new font-family is created for each weight of the Proxima Nova font.
In practice, what this means is that in order to change the font weight, you write font-family: "Proxima Nova Bold" instead of font-weight: 700.
I am curious to know if this has consequences other than the obvious legibility problems. The more technical the answer, the better.
EDIT:
Here is an example to illustrate what my preferred method is, in case there's something wrong with how I do things:
#font-face {
font-family: 'Ubuntu';
src: url('Ubuntu-RI-webfont.eot');
src: url('Ubuntu-RI-webfont.eot?#iefix') format('embedded-opentype'),
url('Ubuntu-RI-webfont.woff') format('woff'),
url('Ubuntu-RI-webfont.ttf') format('truetype'),
url('Ubuntu-RI-webfont.svg#UbuntuItalic') format('svg');
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: 'Ubuntu';
src: url('Ubuntu-B-webfont.eot');
src: url('Ubuntu-B-webfont.eot?#iefix') format('embedded-opentype'),
url('Ubuntu-B-webfont.woff') format('woff'),
url('Ubuntu-B-webfont.ttf') format('truetype'),
url('Ubuntu-B-webfont.svg#UbuntuBold') format('svg');
font-weight: 700;
font-style: normal;
}
Another example: #font-face: Only using one font-family with different font-weights?

Short answer: no.
The properties you specify in a #font-face rule are used to resolve "the font-... values tuple" to "the actual font resource on the network indicated by src", so whether you declare your font as:
#font-face {
/* identifying font-... values: 1 */
font-family: SillyBoldItalicSmallcaps;
/* font resource to use when values match: */
src: url(./font-bold-italic-SC.woff) format("WOFF");
}
and then resolve it with some document CSS using:
.rulename {
/* values to use to find a specific font resource: 1 */
font-family: SillyBoldItalicSmallcaps;
}
(where the tuple {font-family} is matched against the declared tuple) or whether you declare your font as:
#font-face {
/* identifying font-... values: 4 */
font-family: MyFont;
font-weight: bold;
font-style: italic;
font-variant: smallcaps;
/* font resource to use when values match: */
src: url(./font-bold-italic-SC.woff) format("WOFF");
}
and then resolve it with some document CSS using:
.rulename {
/* values to use to find a specific font resource: 4 */
font-family: MyFont;
font-weight: bold;
font-style: italic;
font-variant: smallcaps;
}
(where the tuple {font-family,font-weight,font-style,font-variant} is matched against the declared tuple) there is no difference in the actual resource found by the CSS engine based on the font-... values you provided. Both end up finding the ./font-bold-italic-sc.WOFF font for styling the text: the core mechanic is the same in both cases, in that we "resolve a font-... values tuple to the declared resource that matches that values tuple". The important thing to note is that in both cases the tuples are unique. In the first case because the font-family is a uniquely identifying string, in the second case because while the font-family may no longer be uniquely identifying, the additional property values yield a unique combination that can resolve to a single font resource.
The only real difference is that the latter makes life considerably easier when it comes to development and maintenance (the end result is identical as far as the consuming client is concerned). And ease translates directly into improved efficient, better code, lower cost, and a whole slew of things that all translate into "we should be doing it this way".

It is often a result of the actual font file encoding and not related to any usage. Some font vendors do not package their fonts into one nice, easy family. But instead the foundry itself splits each weight into a new file. (I dislike this, but it's not really that uncommon.)
I believe that Proxima Nova is one such font -- where each weight is a separate file and not part of one "family" file.

Related

Manipulate unicode-range while importing from Google Fonts

My question can be seen as a follow-up of this answer.
I use Google Fonts for my project and now want to change the unicode-range, so only numbers are affected (see linked answer above). My problem is that I don't get it to work with an include:
#import url("http://fonts.googleapis.com/css?family=Lato:300,400,700");
When I import the font like this, the font-face is already generated by Google (Google provides also the correct font-face setup to avoid cross browser problems, very convenient). I tried overwriting the imported font-face like this:
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
unicode-range: U+30-39;
}
But that didn't work. To achieve the desired affect of having only numbers attached, I need to take the CSS from the Google import URL and copy it into my own CSS/SASS document. But then I lose the cross browser service that was done by Google Fonts API and also the speed of their CDN.
Is there a way to change the unicode-range while maintaining the Google font import or do I really need to host the fonts myself when I want to use unicode-range?
If you want set the range while you are importing, just add to the link the variable 'subset'.
For example:
#import url("http://fonts.googleapis.com/css?family=Lato:300,400,700&subset=latin");
Or, if the text is very small you can change the subset variable for text, and add the content inside.
For example:
#import url("http://fonts.googleapis.com/css?family=Inconsolata&text=Hello");
Documentation
What is unicode-range?
It's a prop used to tell the browser when to download a font file. As soon as any character that belongs to the given range is rendered: the font file is downloaded.
The unicode-range is not intended to assign the style to the characters from the given range .
Solution
The best option is to use the text parameter to get a font file per style that contains just the characters you need, in this case the range [0-9].
URL:
https://fonts.googleapis.com/css?family=Lato:300,400,700&text=0123456789
Google Fonts response:
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 300;
src: url(https://fonts.gstatic.com/l/font?kit=S6u9w4BMUTPHh7USewqdFhfZ3-4B28Jv7vc&skey=91f32e07d083dd3a&v=v22) format('woff2');
}
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/l/font?kit=S6uyw4BMUTPHvxwiUT-eLhTc2OsC1s0&skey=2d58b92a99e1c086&v=v22) format('woff2');
}
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 700;
src: url(https://fonts.gstatic.com/l/font?kit=S6u9w4BMUTPHh6UVewqdFhfZ3-4B28Jv7vc&skey=3480a19627739c0d&v=v22) format('woff2');
}

Font weights (normal, bold, ...)

I have three files for a font, the normal one, the bold one and the light one.
How can I set the light one on font-face, since font-weight:light does not exist?
By the way, is font-weight:lighter relative to something? If yes, to what?
Try these (one at a time):
font-weight: lighter;
font-weight: 100;
font-weight: 200;
font-weight: 300;
You need to get font that supports font-weight of different sizes, you should be able to specify the font weight as a number, for example:
font-weight:300 - should be light
font-weight:400 - should be normal
font-weight:700 - should be bold
But it will depend on how you are defining them in your font-face declaration, you should put the font weights in there, for example here is one for HelveticaNeue-Light
#font-face{
font-family:"HelveticaNeue";
src: url("/fonts/fontfile.eot");
src: local('Helvetica Neue Light'), local('HelveticaNeue-Light'),
url("/fonts/fontfile.eot?#iefix") format("embedded-opentype"),
url("/fonts/fontfile.woff") format("woff"),
url("/fonts/fontfile.ttf") format("truetype"),
url("/fonts/fontfile.svg") format("svg");
font-weight: 300;
font-style: normal;
font-stretch: normal;
}
Then you can use:
p {
font-family:"HelveticaNeue";
font-weight:300;
}
And it will use that font-face definition, you can define multiple of these with different font-weights that match up to various files of different weights should you need to.
You can get font files that have multiple weights embedded into one file but most of the time now I believe the come in separately!

font-family of a font, what is it?

I'm trying to find the CSS font-family name of the Helvetica Neue LT Std 97 Black Condensed font located here: http://fontscore.com/fonts/Helvetica-Neue-LT-Std-97-Black-Condensed_22554.html
I'm using #font-face to load the font onto the webpage, if not already on the users computer, however, I would like to be able to load the font, if found on the users computer first. I've tried several methods here, but none of these work:
font-family: HelveticaNeueLT Std Blk Cn
font-family: HelveticaNeueLT Std ExtBlk Cn
What is the name of this font that I should use when calling font-family? I probably have to put 97 somewhere in there also, but nothing works, have tried a ton of different ways to call it.
Here's what I'm using in the CSS:
#font-face {
font-family: hnc_font;
src: local('HelveticaNeueLT Std Blk Cn'), local('HelveticaNeueLTStd-BlkCn'), url('../fonts/hnc.otf') format('opentype'), url('../fonts/hnc.woff') format('woff'), url('../fonts/hnc.ttf') format('truetype'), url('../fonts/hnc.svg') format('svg');
font-weight: normal;
}
#font-face{
font-family: MyFont_IE;
src: url('../fonts/swiss_bc.eot');
}
.big_text
{
padding-top: .4em;
font-size: 5.5em;
font-family: HelveticaNeueLT Std Blk Cn, HelveticaNeueLTStd-BlkCn, hnc_font, MyFont_IE;
}
First of all try all your combinations by wrapping the name of the font in " quotes.
For example font-family: "Helvetica Neue LT Std 97 Black Condensed"
Then, the name that you call is defined by your #font-face declaration before the font-family. You can call it what ever you want.
For example if you first declare it like this
#font-face{
font-family: "MY_FONT_NAME";
src: url('PATH_TO/FONT_FILENAME.ttf');
}
you can later refer to it like this
font-family: "MY_FONT_NAME";
Edit based on the added CSS
try this
.big_text
{
padding-top: .4em;
font-size: 5.5em;
font-family: "HelveticaNeueLT Std Blk Cn", "HelveticaNeueLTStd-BlkCn", "hnc_font", "MyFont_IE";
}
Cheat with some javascript: http://jsfiddle.net/ucd2L/
var x = $("#test").css('font-family');
$("#test").append(x);
HTML
<p id="test">Text</p>
When using #font-face, there are two separate questions about font names.
The name you use in font-family declaration inside an #font-face rule is up to you, as long as it is a syntactically valid font name and you use that very same name in font-family declarations in normal CSS rules. So it can be font-family: foobar.
The name you use in the local(...) constructor when setting src in an #font-family rule must match the name under which the font is known in the system. It should be name you would use to get a local font in a font-family rule without any #font-face, and in principle it should be the PostScript name or the full name of the font, though browsers may accept other names too; see
css - machine specific font-family.

In #font-face CSS rule, can we have a separate 'src' declaration for 'local' definition?

Here's an example #font-face CSS rule:
#font-face {
font-family: 'DroidSerifBoldItalic';
font-weight: normal;
font-style: normal;
src: url('DroidSerif-BoldItalic-webfont.eot');
src: url('DroidSerif-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
local('Droid Serif Bold Italic'), local('DroidSerif-BoldItalic'),
url('DroidSerif-BoldItalic-webfont.woff') format('woff'),
url('DroidSerif-BoldItalic-webfont.ttf') format('truetype');
}
Don't you think, the following #font-face CSS rule is better? (As you can see, the browsers, in this case even IE, can first check if the font is available on the user's computer, before downloading it.)
#font-face {
font-family: 'DroidSerifBoldItalic';
font-weight: normal;
font-style: normal;
src: local('Droid Serif Bold Italic'), local('DroidSerif-BoldItalic');
src: url('DroidSerif-BoldItalic-webfont.eot');
src: url('DroidSerif-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('DroidSerif-BoldItalic-webfont.woff') format('woff'),
url('DroidSerif-BoldItalic-webfont.ttf') format('truetype');
}
Are there any gotchas here? If not, why isn't everyone using the latter?
From what i know about #font-face, the main fear behind using local is that the font will not be named the same on someone's desktop. You're ceding control there, and if you're wrong it'll fail. You do pose an interesting question though, and i'm not saying you're wrong. You can read more about that here and here.
ADDENDUM
Normally, it’s used as a mask to prevent unwanted http requests in IE.
The order matters because IE (at least until IE8) doesn't support the local descriptor, and placing the local descriptor right after the EOT font format prevents the older versions of Internet Explorer from downloading the other font formats (in the src declaration) as they aren't supported, and won't be used anyway.
What #BoltClock commented is true. And that's the reason why we use two local definitions -- local('Droid Serif Bold Italic'), local('DroidSerif-BoldItalic'),. The first is the normal name of the font (which is recognized by all browsers except Safari), and the latter is the PostScript name of the font which is required by Safari (at least on Mac / OS X systems).
To avoid issues like two different fonts (mostly on two different OSs) having the same name, some simply use local('☺').

Why not define font-weight or font-style in #font-face, Font Squirrel?

When we define #font-face styles, we can define whether the referenced files are for the bold, italic, or bold italic versions of a font, as discussed in this SO question:
How to add multiple font files for the same font?
Example:
#font-face {
font-family: 'FontinSans';
src: local('☺'), url('fontin_sans_regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'FontinSans';
src: local('☺'), url('fontin_sans_bold.woff') format('woff');
font-weight: bold;
font-style: normal;
}
However, Font Squirrel doesn't generate #font-face kits this way. They do something like this instead:
#font-face {
font-family: 'FontinSans';
src: local('☺'), url('fontin_sans_regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'FontinSansBold';
src: local('☺'), url('fontin_sans_bold.woff') format('woff');
font-weight: normal;
font-style: normal;
}
Which means in our CSS files we have to do things like this:
h2 {
font-family: 'FontinSansBold', Verdana, sans-serif;
font-weight: normal;
}
Why doesn't Font Squirrel use the font-weight and font-style declarations to distinguish the bold and italic variants? Why use a separate font family? Do they know something about (lack of) support for this feature in some browser?
By default, Font-Squirrel does this in order to increase support with user-agents that do not follow specification (those that ignore font-weight and font-style).
If you do not care about those outdated user-agents, you may enable the "Style Linking" option which is available in the expert section of the #font-face kit generator. Note that IE8 and below ignores numbered font-weight values and only support normal and bold (and corresponding 400, 700 weight values).
It does involve poking around inside the font to determine when a font is bold or italic. And certain bits must be set inside the font in order for IE to pick up the style linking. Most bold / italic fonts have these bits set, but not all. We are working on a way to make this more automatic.
It seems Internet Explorer 8 may be one of those "older" user agents that doesn't support font-weight and font-style
I am trying to make bold/italic/bolditalic automatic using the #font-face and font-family.
My attempts so far have yielded nothing. Here is a page demonstrating the problem.
http://clearimageonline.com/apps/playground/fonts/test_IE.html
Anyone here encountered this and have a solution that works with IE8?
I have searched and fiddled most of this week for an answer to this. It appears that IE8 wont let me do this.
Here is a proposed workaround (very ugly workaround)....
http://clearimageonline.com/apps/playground/fonts/proposed_IE.html
These test pages are designed for Internet Explorer ONLY. This test is limited to IE. Cross Browser functionality will obviouosly be a part of a final solution.
The problem using the default FontSquirrel's approach is that if the fallback font loads, all weights will be lost because they are all set to normal. I think the style linking is the best approach.
If you are worried about IE8 users you can use a conditional css.

Resources