How do I set the default font settings?
How do I set the default font settings for a font?
I am using two different fonts in my current project and want to include font options for both of them. Currently I have to do this with a selector *
:
*, *:before, *:after {
-webkit-font-feature-settings: "kern", "liga", "pnum" "ss01";
-moz-font-feature-settings: "kern", "liga", "pnum" "ss01";
-ms-font-feature-settings: "kern", "liga", "pnum" "ss01";
font-feature-settings: "kern", "liga", "pnum" "ss01";
}
So far so good; this way I set kerning, ligatures and proportional numbers by default. The problem lies in the alternate stylistic set. I want to have this in every instance of one of my fonts. Another font has one more stylistic set that I don't want to use.
My preferred way would be to include the defaults in the @font-face
following way:
@font-face {
font-family: 'FFDin';
font-weight: normal;
font-style: normal;
-webkit-font-feature-settings: "kern", "liga", "pnum" "ss01";
-moz-font-feature-settings: "kern", "liga", "pnum" "ss01";
-ms-font-feature-settings: "kern", "liga", "pnum" "ss01";
font-feature-settings: "kern", "liga", "pnum" "ss01";
src: url("fonts/DINWeb-Light.eot");
src: url("fonts/DINWeb-Light.eot?#iefix") format("embedded-opentype"),
url("fonts/DINWeb-Light.woff") format("woff"),
url("fonts/DINWeb-Light.ttf") format("truetype");
}
I tested this in chrome but it doesn't work. Is there a way to declare default font options for a font?
source to share
Its the possible way you tried, but Chrome and IE don't support it; Firefox does.
CSS Font Level 3 font is somewhat obscure as it does not provide a formal description of what is allowed internally @font-face
, but since section 4 Font Resources appears to be
@font-face
and has defined font-feature-settings
as a descriptor, your approach should work. It is also described in the MDN information at@font-face
. However, the W3C CSS validator rejects it, possibly due to the ambiguity of the specification (candidate recommendation).
I tested this using Google Source Sans Pro font and function ordn
. While the following code won't run unless you have a suitable local Source Sans Pro, it makes it easy to customize the approach:
<style>
@font-face {
font-family: Source Sans Pro;
src: url('sourcesanspro-regular-webfont.eot');
src: url('sourcesanspro-regular-webfont.eot?#iefix')
format('embedded-opentype'),
url('sourcesanspro-regular-webfont.woff') format('woff'),
url('sourcesanspro-regular-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
-webkit-font-feature-settings: "ordn";
-moz-font-feature-settings: "ordn";
-o-font-feature-settings: "ordn";
font-feature-settings: "ordn";
}
.no-ordn {
-webkit-font-feature-settings: "ordn" 0;
-moz-font-feature-settings: "ordn" 0;
-o-font-feature-settings: "ordn" 0;
font-feature-settings: "ordn" 0;
}
.ordn {
-webkit-font-feature-settings: "ordn";
-moz-font-feature-settings: "ordn";
-o-font-feature-settings: "ordn";
font-feature-settings: "ordn";
}
p {
font-family: Source Sans Pro;
}
</style>
<p>1st 2nd 3rd 4th
<p class=no-ordn>1st 2nd 3rd 4th
<p class=ordn>1st 2nd 3rd 4th
The first paragraph was supposed to strip the 1st 2nd 4th with superscript letters and that's what happens in Firefox. The second paragraph is only intended to check that the font feature set on the font can be overridden in normal CSS for some elements. The third paragraph is intended to test that the browser fully supports font functionality.
source to share