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!
Related
It's reasonably common for sites I'm building to use the semibold weight of a given font for their "bold" variant. Usually, this is very easy to set up by using a custom #font-face declaration that points at the semibold files and has font-weight: 700;.
That's fine when the fonts are available under a free licence, and can be hosted directly alongside the website. Sometimes, however, the fonts I need to use are only available under a paid licence. My employer pays for a subscription to Adobe Fonts to give us access to these fonts.
However, Adobe Fonts sets up its own #font-face declarations in the CSS files it provides for a given web project, and for semibold weights it uses the standard font-weight: 600;.
Unfortunately I've found very little information online about using #font-face with Adobe Fonts (or Typekit, which it used to be called). The closest thing I found on Adobe's own website (https://www.adobe.com/devnet/edge-web-fonts/articles/use-at-font-face-with-with-font-services.html) doesn't say anything about using #font-face with Adobe Fonts/Typekit.
I don't trust the file URLs Adobe Fonts uses in its CSS to remain static, so I don't think I can reuse them in my own CSS without risking breaking the fonts once those URLs are no longer correct.
Is there any way in CSS I can do something like create a new #font-face declaration based on a previous one created in an imported CSS file, or modify a #font-face declaration that was included this way? I'd much rather just set up the font to use its semibold files when the browser thinks it should be bold, instead of telling the browser to use the semibold font-weight where it would would normally use bold.
For anyone else running into this issue, the solution I've gone with for now is to create my own #font-face declaration using the URLs from Adobe Fonts' CSS file, but with a different name for the font family.
I'm using the Adobe Fonts font family as a fallback for if the one I've created doesn't load, so if the URLs break it should at least fall back to the one Adobe Fonts has set up with the font weights that don't match what I need.
/* Here Adobe Fonts uses #font-face to create the font family "adobe-font" */
#import "https://use.typekit.net/<my-project-key>.css";
#font-face {
font-family: "Custom Font";
src: url("https://use.typekit.net/path/to/font/file/regular.woff2") format("woff2"),
url("https://use.typekit.net/path/to/font/file/regular.woff") format("woff"),
url("https://use.typekit.net/path/to/font/file/regular.ott") format("opentype");
font-weight: 400;
font-style: normal;
font-display: auto;
}
#font-face {
font-family: "Custom Font";
src: url("https://use.typekit.net/path/to/font/file/italic.woff2") format("woff2"),
url("https://use.typekit.net/path/to/font/file/italic.woff") format("woff"),
url("https://use.typekit.net/path/to/font/file/italic.ott") format("opentype");
font-weight: 400;
font-style: italic;
font-display: auto;
}
#font-face {
font-family: "Custom Font";
src: url("https://use.typekit.net/path/to/font/file/semibold.woff2") format("woff2"),
url("https://use.typekit.net/path/to/font/file/semibold.woff") format("woff"),
url("https://use.typekit.net/path/to/font/file/semibold.ott") format("opentype");
font-weight: 700;
font-style: normal;
font-display: auto;
}
#font-face {
font-family: "Custom Font";
src: url("https://use.typekit.net/path/to/font/file/semibold-italic.woff2") format("woff2"),
url("https://use.typekit.net/path/to/font/file/semibold-italic.woff") format("woff"),
url("https://use.typekit.net/path/to/font/file/semibold-italic.ott") format("opentype");
font-weight: 700;
font-style: italic;
font-display: auto;
}
.my-class {
font-family: "Custom Font", "adobe-font", sans-serif;
}
It's not perfect, but since I haven't been able to find any assurance from Adobe that their font file URLs will never change this at least gives me some security if they do change.
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.
As a small optimisation technique I want to serve the 'Avenir Next - Regular' font locally via css (so if a user has this font locally it will use it rather than download a woff2/woff/etc).
This font, for example, has been in IOS since version 6 so it's a quick win.
However I am not sure how to specify the local font name in the css stack? Do I need the word regular? Is there a program that would help?
#font-face {
font-family: 'Avenir';
src: local("Avenir Next Regular"), /* THIS? */
local("Avenir-Next-Regular"), /* THIS? */
local("Avenir-Next"), /* SOMETHING ELSE? */
url('/fonts/AvenirNextLTW04Regular.woff2') format('woff2'),
url('/fonts/AvenirNextLTW04Regular.woff') format('woff'),
url('/fonts/AvenirNextLTW04Regular.ttf') format('truetype');
}
Do I need to specify a font weight to get the 'regular' version? And then is there a way in devtools to see if it works? I presume not seeing a call to an external font file means success?
You should use the correct font name as defined in the font file. If you are on Windows you can install Microsoft's Font properties extension. When installed, you just right click the font file and select Properties. There you will find extra tabs with the font's info. One of them will show the fonts name.
I guess it will be like this:
#font-face {
font-family: 'Avenir Next - Regular';
src: local('Avenir Next'),
url('/fonts/AvenirNextLTW04Regular.woff2') format('woff2'),
url('/fonts/AvenirNextLTW04Regular.woff') format('woff'),
url('/fonts/AvenirNextLTW04Regular.ttf') format('truetype');
}
The font family reflects the base name of a font, while the variants are the children (font faces) and are defined by weight (e.g. Regular, Bold) and style (normal & italic).
When defining custom #font-faces, make sure to define a common font-family, so that font-weight and font-style gets applied properly and the font-face switches accordingly within the same font family.
There is no official naming convention for the various font faces themselves, but most fonts do follow this this pattern:
[Font Name] [Weight?] [Italic?]
The names for the common weights are usually Thin, ExtraLight, Light, Regular, Medium, SemiBold, Bold, ExtraBold and Black.
However, some fonts may introduce an extra space in the Extra-variants or substitute Semi with Demi. More about the possible names can be found here.
Minor common exception: For the default 400-weight font, the name usually is Font Name Regular, while the weight is left out of the italic variant: Font Name Italic
Here is a table of possible font names for the imaginary font family Cool Font:
Weight
Style
Likely name
100
normal
Cool Font Thin
200
normal
Cool Font ExtraLight
300
normal
Cool Font Light
400
normal
Cool Font Regular
500
normal
Cool Font Medium
600
normal
Cool Font SemiBold
700
normal
Cool Font Bold
800
normal
Cool Font ExtraBold
900
normal
Cool Font Black
100
italic
Cool Font Thin Italic
200
italic
Cool Font ExtraLight Italic
300
italic
Cool Font Light Italic
400
italic
Cool Font Italic
500
italic
Cool Font Medium Italic
600
italic
Cool Font SemiBold Italic
700
italic
Cool Font Bold Italic
800
italic
Cool Font ExtraBold Italic
900
italic
Cool Font Black Italic
Keep in mind, that your font family might diverge from this table, so it is always best to check the font itself.
Example:
Assuming the entire family of Cool Font consists of an (italic) Regular and Bold font face sharing the naming convention described above, the correct definition could be:
#font-face {
font-family: 'Cool Font';
src: local('Cool Font Regular'),
url('Cool_Font_Regular.woff2') format('woff2'),
url('Cool_Font_Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
}
#font-face {
font-family: 'Cool Font';
src: local('Cool Font Bold'),
url('Cool_Font_Bold.woff2') format('woff2'),
url('Cool_Font_Bold.woff') format('woff');
font-weight: 700;
font-style: normal;
}
#font-face {
font-family: 'Cool Font';
src: local('Cool Font Italic'),
url('Cool_Font_Italic.woff2') format('woff2'),
url('Cool_Font_Italic.woff') format('woff');
font-weight: 400;
font-style: italic;
}
#font-face {
font-family: 'Cool Font';
src: local('Cool Font Bold Italic'),
url('Cool_Font_Bold_Italic.woff2') format('woff2'),
url('Cool_Font_Bold_Italic.woff') format('woff');
font-weight: 700;
font-style: italic;
}
If you don't know the correct variant name of a font, you can always define multiple local variants without any downsides:
#font-face {
font-family: 'Cool Font';
src: local('Cool Font SemiBold'),
local('Cool Font Semi Bold'),
local('Cool Font DemiBold'),
local('Cool Font Demi Bold'),
url('Cool_Font_SemiBold.woff2') format('woff2'),
url('Cool_Font_SemiBold.woff') format('woff');
font-weight: 600;
font-style: normal;
}
When you don't want to let the user download a font and let it use the 'Avenir Next - Regular' font, you should put this font first in line in the font-declaration. Look into your own fonts for the exact name and set (only):
font-family: "Avenir Next - Regular", Arial, Helvetica, "sans-serif";
But check if 'Avenir Next - Regular' is so widely local available (not likely, because it is an expensive font).
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');
}
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.