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;
}
Related
I use the font icon to display the icons, but when I update the fonts and add a new icon to the font, because the fonts are cached, they are difficult to display and the cache must be emptied.
How can I solve this problem?
You can use sass in your source. Use its Random() feature, as follows:
Every time the source is built, its version will be changed and the browser will call it without cache.
$version: random(9999);
$path: /YOUR_FOTNS_PATH
#font-face {
font-family: "font-icon";
src: url("#{$path}/fonticon.eot?v=#{$version}");
src: url("#{$path}/fonticon.eot?#iefix&v=#{$version}")
format("embedded-opentype"),
url("#{$path}/fonticon.ttf?v=#{$version}") format("truetype"),
url("#{$path}/fonticon.woff?v=#{$version}") format("woff"),
url("#{$path}/fonticon.svg?#afam&v=#{$version}") format("svg");
font-weight: normal;
font-style: normal;
font-display: block;
}
Your generated css will be:
#font-face {
font-family: "font-icon";
src: url('fonticon.eot?v=3889');
src: url('fonticon.eot?#iefix&v=3889') format("embedded-opentype"), url('fonticon.ttf?v=3889') format("truetype"), url('fonticon.woff?v=3889') format("woff"), url('fonticon.svg?#afam&v=3889') format("svg");
font-weight: normal;
font-style: normal;
font-display: block;
}
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; }
I'm attempting to load 4 fonts using #font-face as critical styles in the header for above-the-fold content, within <style> tags.
Rubik-Bold
Rubik-Italic
Rubik-LightItalic
Rubik-Regular
From what I can tell this should be correct, however only the first in the list loads. If I removed the first one, the next-in-line will be the first to load.
HTML:
#font-face {
font-family: 'Rubik';
src: url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-Bold.eot?2568338257603816725');
src: url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-Bold.eot?2568338257603816725#iefix') format("embedded-opentype"),
url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-Bold.woff?2568338257603816725') format("woff"),
url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-Bold.woff2?2568338257603816725') format("woff2"),
url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-Bold.ttf?2568338257603816725') format("truetype"),
url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-Bold.svg?2568338257603816725#timber-icons') format("svg");
font-weight: 700;
font-style: normal;
};
#font-face {
font-family: 'Rubik';
src: url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-Italic.eot?2568338257603816725');
src: url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-Italic.eot?2568338257603816725#iefix') format("embedded-opentype"),
url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-Italic.woff?2568338257603816725') format("woff"),
url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-Italic.woff2?2568338257603816725') format("woff2"),
url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-Italic.ttf?2568338257603816725') format("truetype"),
url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-Italic.svg?2568338257603816725#timber-icons') format("svg");
font-weight: 400;
font-style: italic;
};
#font-face {
font-family: 'Rubik';
src: url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-LightItalic.eot?2568338257603816725');
src: url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-LightItalic.eot?2568338257603816725#iefix') format("embedded-opentype"),
url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-LightItalic.woff?2568338257603816725') format("woff"),
url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-LightItalic.woff2?2568338257603816725') format("woff2"),
url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-LightItalic.ttf?2568338257603816725') format("truetype"),
url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-LightItalic.svg?2568338257603816725#timber-icons') format("svg");
font-weight: 300;
font-style: italic;
};
#font-face {
font-family: 'Rubik';
src: url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-Regular.eot?2568338257603816725');
src: url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-Regular.eot?2568338257603816725#iefix') format("embedded-opentype"),
url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-Regular.woff?2568338257603816725') format("woff"),
url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-Regular.woff2?2568338257603816725') format("woff2"),
url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-Regular.ttf?2568338257603816725') format("truetype"),
url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-Regular.svg?2568338257603816725#timber-icons') format("svg");
font-weight: 400;
font-style: normal;
};
This is what I get in Chrome's inspector:
Things I've tried based on similar threads I've read:
Eliminated all whitespace and put each #font-face on one line (solved the issue in another thread).
Tested the links that Shopify's CDN outputs, and they do work.
On the page, in the header:
HTML:
<div class="gift-line show-for-large">
<span>The Gift Line</span><span class="phone-number">XXX-XXX-XXXX</span>
</div>
And CSS, loaded before the font-face declarations (span should be inheriting this rule and therefore Rubik-Regular should be downloading):
body {
font-family: "Rubik", sans-serif;
font-weight: normal;
font-style: normal;
}
So in this case, I know that at least Rubik-Regular should be called in addition to Rubik-Bold. (There are no
Any suggestions? Thanks
Browsers try to minimize network connections by analizing your css and html to determine what font files you end up using and only download those.
Since you're using the same font-family name here you have to make sure you use each style combination of font-weight and font-style on the page for the browser to download all of them.
Also don't be tricked by some of the caching smarts browser put into place. Font's are cached quickly to prevent http requests.
I suggest you ignore the network traffic and inspect your element that is supposed to get the font and look at the computed tab.
For more information around how to debug fonts have a look at this short article by Paul Irish.
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.
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.