Is it possible to create a fontface with several fonts in it, in such a way that:
font-weight: normal resolves to Roboto-Regular.ttf
font-weight: lighter -> Roboto-Thin.ttf
font-weight: bold -> Roboto-Black.ttf
font-weight: bolder -> Roboto-Bold.ttf
At the moment I'm defining a #fontface for each.
You can do it all in one statement just be aware the more font variations you add it will add size to the font library so be selective :)
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#100;300;400;500;700;900&display=swap" rel="stylesheet">
or as an import in css you can do...
#import url("https://fonts.googleapis.com/css2?family=Roboto:wght#100;300;400;500;700;900&display=swap");
and per your comment for sourcing fonts locally I don't know a way to do it in a concise manner...but the following might work
#font-face { font-family: "Roboto"; src: url("/fonts/Roboto-Regular.eot"); src: url("/fonts/Roboto-Regular.eot?#iefix") format("embedded-opentype"), url("/fonts/Roboto-Regular.woff2") format("woff2"), url("/fonts/Roboto-Regular.woff") format("woff"), url("/fonts/Roboto-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; }
#font-face { font-family: "Roboto"; src: url("/fonts/Roboto-Bold.eot"); src: url("/fonts/Roboto-Bold.eot?#iefix") format("embedded-opentype"), url("/fonts/Roboto-Bold.woff2") format("woff2"), url("/fonts/Roboto-Bold.woff") format("woff"), url("/fonts/Roboto-Bold.ttf") format("truetype"); font-weight: 500; font-style: bold; }
Related
I am running the Joints-WP-CSS version 6 theme which uses Foundation.
I have #font-face’d the following fonts in my style.css file like below. However, I am the only person who can see the proper fonts (here is a screenshot: http://erinstruble.com/wp-content/uploads/2020/03/Screen-Shot-2020-03-09-at-13.16.36.png). Other people are getting the fallbacks. Someone at Go-Daddy said they saw this error “DevTools failed to parse SourceMap: http://erinstruble.com/wp-content/themes/JointsWP-CSS-master/assets/styles/style.css.map”. How can I get these fonts to work properly for others?
#font-face {
font-family: "StudioFeixenSans-Book" !important;
src: url("http://miyfood.com/home/erinstruble/public_html/erinstruble.com/wp-admin/css/webfont/StudioFeixenSans-Book.eot")!important;
src: url("http://miyfood.com/home/erinstruble/public_html/erinstruble.com/wp-admin/css/webfont/StudioFeixenSans-Book.eot") format("embedded-opentype"),
url("http://miyfood.com/home/erinstruble/public_html/erinstruble.com/wp-admin/css/webfont/StudioFeixenSans-Book.woff2") format("woff2"),
url("http://miyfood.com/home/erinstruble/public_html/erinstruble.com/wp-admin/css/webfont/StudioFeixenSans-Book.woff") format("woff"),
url("http://miyfood.com/home/erinstruble/public_html/erinstruble.com/wp-admin/css/webfont/StudioFeixenSans-Book.ttf") format("truetype")!important;
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "StudioFeixenSerif-Regular"!important;
src: url("http://miyfood.com/home/erinstruble/public_html/erinstruble.com/wp-admin/css/webfont/StudioFeixenSerif-Regular.eot")!important;
src: url("http://miyfood.com/home/erinstruble/public_html/erinstruble.com/wp-admin/css/webfont/StudioFeixenSerif-Regular.eot") format("embedded-opentype"),
url("http://miyfood.com/home/erinstruble/public_html/erinstruble.com/wp-admin/css/webfont/StudioFeixenSerif-Regular.woff2") format("woff2"),
url("http://miyfood.com/home/erinstruble/public_html/erinstruble.com/wp-admin/css/webfont/StudioFeixenSerif-Regular.woff") format("woff"),
url("http://miyfood.com/home/erinstruble/public_html/erinstruble.com/wp-admin/css/webfont/StudioFeixenSerif-Regular.ttf") format("truetype")!important;
font-weight: normal;
font-style: normal;
}
Blocked loading mixed active content “http://materializecss.com/fonts/roboto/Roboto-Bold.woff2”
I see mixed content warnings for font downloads in firefox when I try to use a website built on materialize css. My concern is not the warning but, where is the font being requested to be downloaded in the code, i.e.
I do not see any files or refrences containing the links to the Materialize website in the files I have included in my HTML. So, just curious on how is it reaching out to that URL to download them.
EDIT: Here's the snippet from materialize.css
#font-face {
font-family: "Roboto";
src: local(Roboto Thin), url("../fonts/roboto/Roboto-Thin.woff2") format("woff2"), url("../fonts/roboto/Roboto-Thin.woff") format("woff");
font-weight: 100;
}
#font-face {
font-family: "Roboto";
src: local(Roboto Light), url("../fonts/roboto/Roboto-Light.woff2") format("woff2"), url("../fonts/roboto/Roboto-Light.woff") format("woff");
font-weight: 300;
}
#font-face {
font-family: "Roboto";
src: local(Roboto Regular), url("../fonts/roboto/Roboto-Regular.woff2") format("woff2"), url("../fonts/roboto/Roboto-Regular.woff") format("woff");
font-weight: 400;
}
#font-face {
font-family: "Roboto";
src: local(Roboto Medium), url("../fonts/roboto/Roboto-Medium.woff2") format("woff2"), url("../fonts/roboto/Roboto-Medium.woff") format("woff");
font-weight: 500;
}
#font-face {
font-family: "Roboto";
src: local(Roboto Bold), url("../fonts/roboto/Roboto-Bold.woff2") format("woff2"), url("../fonts/roboto/Roboto-Bold.woff") format("woff");
font-weight: 700;
}
request is sent from CSS. Search for '#font-face' in your CSS.
On our site we have a few fonts. I embed them like this
#font-face {
font-family: "Calibri Light";
src: url("fonts/calibri/light/calibri-light.eot?") format("eot"),
url("fonts/calibri/light/calibri-light.woff") format("woff"),
url("fonts/calibri/light/calibri-light.ttf") format("truetype"),
url("fonts/calibri/light/calibri-light.svg") format("svg");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "Calibri";
src: url("fonts/calibri/regular/calibri.eot?") format("eot"),
url("fonts/calibri/regular/calibri.woff") format("woff"),
url("fonts/calibri/regular/calibri.ttf") format("truetype"),
url("fonts/calibri/regular/calibri.svg") format("svg");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "Calibri Bold";
src: url("fonts/calibri/bold/calibri-bold.eot?") format("eot"),
url("fonts/calibri/bold/calibri-bold.woff") format("woff"),
url("fonts/calibri/bold/calibri-bold.ttf") format("truetype"),
url("fonts/calibri/bold/calibri-bold.svg") format("svg");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "Caviar Dreams";
src: url("fonts/caviar-dreams/regular/caviar-dreams.eot?") format("eot"),
url("fonts/caviar-dreams/regular/caviar-dreams.woff") format("woff"),
url("fonts/caviar-dreams/regular/caviar-dreams.ttf") format("truetype"),
url("fonts/caviar-dreams/regular/caviar-dreams.svg") format("svg");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "Caviar Dreams Bold";
src: url("fonts/caviar-dreams/bold/caviar-dreams-bold.eot?") format("eot"),
url("fonts/caviar-dreams/bold/caviar-dreams-bold.woff") format("woff"),
url("fonts/caviar-dreams/bold/caviar-dreams-bold.ttf") format("truetype"),
url("fonts/caviar-dreams/bold/caviar-dreams-bold.svg") format("svg");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "TeX Gyre Adventor";
src: url("fonts/tex-gyre-adventor/regular/tex-gyre-adventor.eot?") format("eot"),
url("fonts/tex-gyre-adventor/regular/tex-gyre-adventor.woff") format("woff"),
url("fonts/tex-gyre-adventor/regular/tex-gyre-adventor.ttf") format("truetype"),
url("fonts/tex-gyre-adventor/regular/tex-gyre-adventor.svg") format("svg");
font-weight: normal;
font-style: normal;
}
The problem is that the Caviar Dreams Bold doesn't load. It just doesn't appear in the Sources tab in the Inspector (all others are shown). Chrome 32 works well. No errors or warnings are thrown.
I use the font like this:
#feedback input[type="submit"] {
text-transform: uppercase;
font-family: "Caviar Dreams Bold", "Calibri", sans-serif;
font-variant: small-caps;
}
The Calibri font is used by Opera instead.
Update 1
It seems that Calibri Bold is ignored too. Why are the bold fonts ignored?
Update 2
Don't be surprised that I don't specify font-weight: bold in the #font-face queries: for some reasons it didn't work and I had to do my job fast. So that fact that different font-family doesn't being load seems very interesting to me. And it's more interesting that as we know that Opera's rendering should work as Blink do.
Does the Caviar Dreams Bold font actually contain small caps? If not, Opera probably concludes the request glyps can't be found and will fall back to Calibri. What happens if you remove the font-variant: small-caps; rule?
Edit: Interesting bug report on why Blink doesn't fall back to "small-caps synthesis" (as it is apparently called): https://code.google.com/p/chromium/issues/detail?id=298970 Seems like removing the SVG font from your #font-face rule will do the trick.
On myfonts.com I purchased the Didot font which comes in regular, bold, italics and bold italics (one separate file for each of these styles).
When my WordPress users write articles with bold and italic characters, I want the corresponding font style to be used.
But so far, it is always the regular font which is used, even for italics or bold. As a result, the italics that I see on my site seem to be an "italics version" of my regular font. But this result is different from the real italics that is advertized on myfonts.com.
Their customer service is unable to help with these "development issues" in their own words. How can the proper font file be used for each style on my WordPress site?
Here is the code to add in CSS that myfonts.com provides with the files:
#import url("//hello.myfonts.net/count/xxxxx");
#font-face {font-family: 'LinotypeDidoteTextPro';font-weight: normal;font-style: normal;src: url('webfonts/xxxxxxx1.eot');src: url('webfonts/xxxxxxx1.eot?#iefix') format('embedded-opentype'),url('webfonts/xxxxxxx1.woff') format('woff'),url('webfonts/xxxxxxx1.ttf') format('truetype');}
#font-face {font-family: 'LinotypeDidoteTextPro';font-weight: bold;font-style: italic;src: url('webfonts/xxxxxxx2.eot');src: url('webfonts/xxxxxxx2.eot?#iefix') format('embedded-opentype'),url('webfonts/xxxxxxx2.woff') format('woff'),url('webfonts/xxxxxxx2.ttf') format('truetype');}
#font-face {font-family: 'LinotypeDidoteTextPro';font-weight: normal;font-style: italic;src: url('webfonts/xxxxxxx3.eot');src: url('webfonts/xxxxxxx3.eot?#iefix') format('embedded-opentype'),url('webfonts/xxxxxxx3.woff') format('woff'),url('webfonts/xxxxxxx3.ttf') format('truetype');}
#font-face {font-family: 'LinotypeDidoteTextPro';font-weight: bold;font-style: normal;src: url('webfonts/xxxxxxx4.eot');src: url('webfonts/xxxxxxx4.eot?#iefix') format('embedded-opentype'),url('webfonts/xxxxxxx.woff') format('woff'),url('webfonts/xxxxxxx4.ttf') format('truetype');}
Your #font-face declarations are all the same. you need them to each be different(LinotypeDidoteTextPro-normal, LinotypeDidoteTextPro-bold-italic, LinotypeDidoteTextPro-italic, LinotypeDidoteTextPro-bold) in order to use the declarations in your css. Also using classes like "bold" and "italic" instead of elements like "b" and "i" allow you to use the bold italic font properly, otherwise you have to choose which one to use.
CSS File should be:
#font-face {font-family: 'LinotypeDidoteTextPro-normal'; src: url('webfonts/xxxxxxx1.eot');src: url('webfonts/xxxxxxx1.eot?#iefix') format('embedded-opentype'),url('webfonts/xxxxxxx1.woff') format('woff'),url('webfonts/xxxxxxx1.ttf') format('truetype');}
#font-face {font-family: 'LinotypeDidoteTextPro-bold-italic'; src: url('webfonts/xxxxxxx2.eot');src: url('webfonts/xxxxxxx2.eot?#iefix') format('embedded-opentype'),url('webfonts/xxxxxxx2.woff') format('woff'),url('webfonts/xxxxxxx2.ttf') format('truetype');}
#font-face {font-family: 'LinotypeDidoteTextPro-italic'; src: url('webfonts/xxxxxxx3.eot');src: url('webfonts/xxxxxxx3.eot?#iefix') format('embedded-opentype'),url('webfonts/xxxxxxx3.woff') format('woff'),url('webfonts/xxxxxxx3.ttf') format('truetype');}
#font-face {font-family: 'LinotypeDidoteTextPro-bold'; src: url('webfonts/xxxxxxx4.eot');src: url('webfonts/xxxxxxx4.eot?#iefix') format('embedded-opentype'),url('webfonts/xxxxxxx.woff') format('woff'),url('webfonts/xxxxxxx4.ttf') format('truetype');}
body{
font-family: "LinotypeDidoteTextPro-normal";
font-weight: normal;
font-style: normal;
}
i,
.italic{
font-family: "LinotypeDidoteTextPro-italic";
}
b,
.bold{
font-family: "LinotypeDidoteTextPro-bold";
}
b i,
i b,
.bold.italic{
font-family: "LinotypeDidoteTextPro-bold-italic";
}
As #Albert pointed out (reference: http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/) you can work better with the browsers and be forced to override less if you use font-style and font-weight in your font-face declarations. So an optimized version would be:
#font-face {
font-family: 'LinotypeDidoteTextPro';
src: url('webfonts/xxxxxxx1.eot');
src: url('webfonts/xxxxxxx1.eot?#iefix') format('embedded-opentype'),url('webfonts/xxxxxxx1.woff') format('woff'),url('webfonts/xxxxxxx1.ttf') format('truetype');
font-weight: normal;
font-style: normal;}
#font-face {
font-family: 'LinotypeDidoteTextPro';
src: url('webfonts/xxxxxxx2.eot');
src: url('webfonts/xxxxxxx2.eot?#iefix') format('embedded-opentype'),url('webfonts/xxxxxxx2.woff') format('woff'),url('webfonts/xxxxxxx2.ttf') format('truetype');
font-weight: bold;
font-style: italic;}
#font-face {
font-family: 'LinotypeDidoteTextPro';
src: url('webfonts/xxxxxxx3.eot');
src: url('webfonts/xxxxxxx3.eot?#iefix') format('embedded-opentype'),url('webfonts/xxxxxxx3.woff') format('woff'),url('webfonts/xxxxxxx3.ttf') format('truetype');
font-weight: normal;
font-style: italic;}
#font-face {
font-family: 'LinotypeDidoteTextPro';
src: url('webfonts/xxxxxxx4.eot');
src: url('webfonts/xxxxxxx4.eot?#iefix') format('embedded-opentype'),url('webfonts/xxxxxxx.woff') format('woff'),url('webfonts/xxxxxxx4.ttf') format('truetype');
font-weight: bold;
font-style: normal;}
body{
font-family: "LinotypeDidoteTextPro";
font-weight: normal;
font-style: normal;
}
i, .italic{ font-style: italic; }
b, .bold{ font-weight: bold; }
you're close, you just need to clean up your syntax: here's how i declare open sans regular for font-weights: regular and bold:
#font-face{font-family:"open_sansregular";
src:url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/open-sans-regular.eot");
src:url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/open-sans-regular.eot?#iefix") format("embedded-opentype"),
url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/open-sans-regular.woff") format("woff"),
url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/open-sans-regular.ttf") format("truetype"),
url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/open-sans-regular.svg#open_sansregular") format("svg");
font-weight:normal; font-style:normal}
#font-face{font-family:"open_sansregular";
src: url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/bold/open-sans-bold.eot");
src: url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/bold/open-sans-bold.eot?#iefix") format("embedded-opentype"),
url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/bold/open-sans-bold.woff") format("woff"),
url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/bold/open-sans-bold.ttf") format("truetype"),
url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/bold/open-sans-bold.svg#open_sansbold") format("svg");
font-weight:bold; font-style:normal}
continue that code for the rest of your #font-face declarations, swapping out file urls and font-weight/font-style/font-(etc) and also make sure that this is declared atop the first style sheet in your document. you can see the whole thing here: http://dev.bowdenweb.com/a/css/sandbox01.css
also, i used fontsquirrel to generate the different font file formats.
I have a few weird issues I need to solve.
First, let me show my #font-face declarations in my CSS file.
#font-face {
font-family: "Conv_Gotham-Book";
src: url("fonts/Gotham-Book.eot");
src: local("☺"),
url("fonts/Gotham-Book.woff") format("woff"),
url("fonts/Gotham-Book.ttf") format("truetype"),
url("fonts/Gotham-Book.svg#Gotham-Book") format("svg");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "Conv_Gotham-Light";
src: url("fonts/Gotham-Light.eot");
src: local("☺"),
url("fonts/Gotham-Light.woff") format("woff"),
url("fonts/Gotham-Light.ttf") format("truetype"),
url("fonts/Gotham-Light.svg#Gotham-Light") format("svg");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "Conv_Gotham-Medium";
src: url("fonts/Gotham-Medium.eot");
src: local("☺"),
url("fonts/Gotham-Medium.woff") format("woff"),
url("fonts/Gotham-Medium.ttf") format("truetype"),
url("fonts/Gotham-Medium.svg#Gotham-Medium") format("svg");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "Conv_Gotham-Bold";
src: url("fonts/Gotham-Bold.eot") format("eot");
src: local("☺"),
url("fonts/Gotham-Bold.woff") format("woff"),
url("fonts/Gotham-Bold.ttf") format("truetype"),
url("fonts/Gotham-Bold.svg#GothamBold") format("svg");
font-weight: normal;
font-style: normal;
}
Problems: Hyperlinks using any of those custom fonts don't work in only one browser/platform combination Firefox 13.0.1/Mac (Example here: http://lonely-dev.com/leapfrogbeta/?page_id=896 on the headlines, )
Second Problem: Font disappears on iPad2/Safari browser.
Everything else is fine, would love some insight.
You have declared to use a font called "Journal" in your css for .custom .headline_area h2 a in custom.css while in the above code example you're calling for the Gotham Family (which, btw, has no web license at the moment). Journal is loaded correctly in both Firefox/Mac and iPad/Safari. Links work in both.
Update: the font loads fine in all mentioned cases but the links aren't working. This is because of a being an inline element. Also, declaring a height for the heading a is a bad idea. Just use this rule:
.custom .headline_area h2 a {
display: block;
}
and the links will work.
Another thing is that you should declare the heading font on the h1, h2 etc. and not just on their contained links.