Multiple font-weights, one @font-face query
Actually there is a special flavor of @font-face that will permit just what you're asking.
Here's an example using the same font-family name with different styles and weights associated with different fonts:
@font-face {
font-family: "DroidSerif";
src: url("DroidSerif-Regular-webfont.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "DroidSerif";
src: url("DroidSerif-Italic-webfont.ttf") format("truetype");
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: "DroidSerif";
src: url("DroidSerif-Bold-webfont.ttf") format("truetype");
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: "DroidSerif";
src: url("DroidSerif-BoldItalic-webfont.ttf") format("truetype");
font-weight: bold;
font-style: italic;
}
You can now specify font-weight:bold or font-style:italic to any element you like without having to specify the font-family or overriding font-weight and font-style.
body { font-family:"DroidSerif", Georgia, serif; }
h1 { font-weight:bold; }
em { font-style:italic; }
strong em {
font-weight:bold;
font-style:italic;
}
For a full overview of this feature and the standard use take a look at this article.
EXAMPLE PEN
How can I get multiple font weights working using @font-face
The problem is in the minified CSS. In WordPress, child themes need to have a Template header in style.css stylesheet. If this is missing, the theme will be "broken" and cause random issues.
/*
Theme Name: foo
Version: foo
Description: foo
Author: foo
Author URI: foo
template: foo
*/
How I found the answer: Having broken theme also prevented upload of featured image for posts and in solving that, the fonts were also resolved.
How to use font-weight with font-face fonts?
@font-face {
font-family: 'DroidSerif';
src: url('DroidSerif-Regular-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'DroidSerif';
src: url('DroidSerif-Italic-webfont.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'DroidSerif';
src: url('DroidSerif-Bold-webfont.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'DroidSerif';
src: url('DroidSerif-BoldItalic-webfont.ttf') format('truetype');
font-weight: bold;
font-style: italic;
}
From the tutorial: http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/
CSS @font-face does not work with multiple font weights
It appears there is an error in your CSS syntax, causing some of the fonts to not be loaded.
To fix the syntax, use a semicolon on the second line of the second src value.
@font-face {
font-family: 'CalibreWeb';
src: url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Regular.eot');
src: url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Regular.woff2') format('woff2'),
url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Regular.woff') format('woff');
font-weight: 400;
}
@font-face {
font-family: 'CalibreWeb';
src: url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Semibold.woff2');
src: url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Semibold.woff2') format('woff2'),
url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Semibold.woff') format('woff');
font-weight: 600;
}
Packaging multiple weights into one web font
Set the font-weight and font-style properties accordingly in your @font-face calls (instead of FontSquirrel's default output where all of them are set to normal and they have separate names for each weight/style instead), and name them all the same font.
Here's an example from a site I built last year:
@font-face {
font-family: 'CartoGothic';
src: url('library/fonts/CartoGothicStd-Book-webfont.eot');
src: url('library/fonts/CartoGothicStd-Book-webfont.eot?#iefix') format('embedded-opentype'),
url('library/fonts/CartoGothicStd-Book-webfont.woff') format('woff'),
url('library/fonts/CartoGothicStd-Book-webfont.ttf') format('truetype'),
url('library/fonts/CartoGothicStd-Book-webfont.svg#CartoGothicStdBook') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'CartoGothic';
src: url('library/fonts/CartoGothicStd-Bold-webfont.eot');
src: url('library/fonts/CartoGothicStd-Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('library/fonts/CartoGothicStd-Bold-webfont.woff') format('woff'),
url('library/fonts/CartoGothicStd-Bold-webfont.ttf') format('truetype'),
url('library/fonts/CartoGothicStd-Bold-webfont.svg#CartoGothicStdBold') format('svg');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'CartoGothic';
src: url('library/fonts/CartoGothicStd-Italic-webfont.eot');
src: url('library/fonts/CartoGothicStd-Italic-webfont.eot?#iefix') format('embedded-opentype'),
url('library/fonts/CartoGothicStd-Italic-webfont.woff') format('woff'),
url('library/fonts/CartoGothicStd-Italic-webfont.ttf') format('truetype'),
url('library/fonts/CartoGothicStd-Italic-webfont.svg#CartoGothicStdItalic') format('svg');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'CartoGothic';
src: url('library/fonts/CartoGothicStd-BoldItalic-webfont.eot');
src: url('library/fonts/CartoGothicStd-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('library/fonts/CartoGothicStd-BoldItalic-webfont.woff') format('woff'),
url('library/fonts/CartoGothicStd-BoldItalic-webfont.ttf') format('truetype'),
url('library/fonts/CartoGothicStd-BoldItalic-webfont.svg#CartoGothicStdBoldItalic') format('svg');
font-weight: bold;
font-style: italic;
}
Note that FontSquirrel doesn't automatically generate code this way for a reason - which is that some older browsers / user agents do not support font-weight and font-style properties inside of @font-face declarations, so it's more backwards compatible to use the method where you name the fonts differently for each weight and style (CartoGothicRegular, CartoGothicBold, CartoGothicItalic, CartoGothicBoldItalic and so forth).
Also, FontSquirrel actually can do this for you - if you click Expert settings in the Webfont Generator, there is an option under "CSS" called Style Link which will output them in this format.
Some font weights won't load on mobile with different @font-face loads
If this is directly copied from your source code, you’re mixing single and double quotes. That’s probably interfering with the other CSS. Try:
@font-face {
font-family: 'Glober';
src: url('/includes/fonts/globerbold.otf') format('opentype');
font-weight: 700;
}
/* Etc. */
You’ll notice I’ve also changed the format from embedded-opentype, which was for the old EOT format used by old versions of Internet Explorer to opentype.
The browser will (usually helpfully) only load the styles that are actually used, so your other HTML & CSS will be a factor. If only one style is applied, that might be the reason why the others aren’t showing up as being loaded in your developer tools.
If you purchase or already have a package with a web font license for Glober, they should include WOFF and WOFF2 files as well, which will be a better choice than the OpenType font. Most likely, that will also come with a sample CSS file you can use or modify.
@font-face {
font-family: 'Glober';
src: url('/includes/fonts/globerbold.woff2') format('woff2'),
url('/includes/fonts/globerbold.woff') format('woff');
font-weight: 700;
}
Hope that’s helpful!
Using specific instance for @font-face in TTF file containing multiple instance
Ok, I mostly figured it out. I've got a fundamental solution, I just don't have the browser compatibility nailed down.
So what I called "variants" are actually called "instances". Essentially, they're just named presets (stored in the file) that specify values for a collection of OpenType axes.
The Windows 10 built in font inspector can be used to inspect the axis/value sets for a given instance, presuming the font is installed on the system and is a variable font:
Open Font Settings
Search for and select the font under "Available Fonts"
In the next windows that opens, scroll all the way down and click "Variable Font Properties".
Here you can select the instance then go through each axis to see its tag and value:
Related Topics
Make CSS3 Triangle with Linear Gradient
I Want to Vertical-Align Text in Select Box
Css3 ::Selection Behaves Differently in Ff & Chrome
How to Use Apple's New San Francisco Font on a Webpage
CSS @Font-Face Not Working in IE8
Bug in CSS3 Rotatey Transition on Safari
Rails 4: How to Use SASS Mappings
Google Maps V3 - Prevent API from Loading Roboto Font
Input Height Differences in Firefox and Chrome
Why Does Stacking Order Change on Webkit Filter Hover
Good Rules for Setting Up Print CSS
How to Make Firefox Print a Background-Color Style
How to Make Twitter Bootstrap Modal Full Screen
How to Remove Blue "Selected" Outline on Buttons
Add a Space (" ") After an Element Using :After
Wonky Text Anti-Aliasing When Rotating with Webkit-Transform in Chrome