embedded fonts missing version 1.4.4
-
I have several fonts embedded in my theme. After the most recent theme upgrade, these fonts are no longer displaying. I check my custom CSS and the file location on the back end – everything is in place and correct.
-
Hi GideonJagged
Sorry to hear about the hassle. Could we check your site out so we can inspect the CSS? Please, send a link. Thanks.
alchemyoftheword.net
Thanks.
The only font family you’re specifying is Cardo and that is being successfully rendered.
The following won’t render because you’re not listing their values anywhere that I can see:
@font-face { font-family: 'aquilineregular'; src: url('/wp-content/fonts/aquiline-webfont.eot'); font-weight: 400; font-style: normal } @font-face { font-family: 'aquilinetworegular'; src: url('/wp-content/fonts/aquilinetwo-webfont.eot'); font-weight: 400; font-style: normal } @font-face { font-family: 'kazhiregular'; src: url('/wp-content/fonts/kazhi-webfont.eot'); font-weight: 400; font-style: normal } @font-face { font-family: 'bosporosuregular'; src: url('/wp-content/fonts/bosporosu-webfont.eot'); font-weight: 400; font-style: normal } @font-face { font-family: 'ezra_sil_srregular'; src: url('/wp-content/fonts/sileotsr-webfont.eot'); font-weight: 400; font-style: normal }
Unless you’re using inline CSS to use the above. If that’s the case, please, let me know where the inline CSS is and I’ll take a look.
Ahh ok, I see it. One moment…
I’m no expert on web fonts but your problem might be that you’re missing several font types. I’m using OS X Chrome 45 for example, it doesn’t support EOT:
When you create a web font you usually land up with something like this:
@font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff2') format('woff2'), /* Super Modern Browsers */ url('webfont.woff') format('woff'), /* Pretty Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ }
THis is the code in my custom css file
@font-face {
font-family: ‘aquilineregular’;
src: url(‘/wp-content/fonts/aquiline-webfont.eot’);
src: url(‘/wp-content/fonts/aquiline-webfont.eot?#iefix’) format(’embedded-opentype’), url(‘/wp-content/fonts/aquiline-webfont.woff2’) format(‘woff2’), url(‘/wp-content/fonts/aquiline-webfont.woff’) format(‘woff’), url(‘/wp-content/fonts/aquiline-webfont.ttf’) format(‘truetype’), url(‘/wp-content/fonts/aquiline-webfont.svg#aquilineregular’) format(“svg”);
font-weight: normal;
font-style: normal;
}@font-face {
font-family: ‘aquilinetworegular’;
src: url(‘/wp-content/fonts/aquilinetwo-webfont.eot’);
src: url(‘/wp-content/fonts/aquilinetwo-webfont.eot?#iefix’) format(’embedded-opentype’), url(‘/wp-content/fonts/aquilinetwo-webfont.woff2’) format(‘woff2’), url(‘/wp-content/fonts/aquilinetwo-webfont.woff’) format(‘woff’), url(‘/wp-content/fonts/aquilinetwo-webfont.ttf’) format(‘truetype’), url(‘/wp-content/fonts/aquilinetwo-webfont.svg#aquilinetworegular’) format(“svg”);
font-weight: normal;
font-style: normal;
}@font-face {
font-family: ‘kazhiregular’;
src: url(‘/wp-content/fonts/kazhi-webfont.eot’);
src: url(‘/wp-content/fonts/kazhi-webfont.eot?#iefix’) format(’embedded-opentype’), url(‘/wp-content/fonts/kazhi-webfont.woff2’) format(‘woff2’), url(‘/wp-content/fonts/kazhi-webfont.woff’) format(‘woff’), url(‘/wp-content/fonts/kazhi-webfont.ttf’) format(‘truetype’), url(‘/wp-content/fonts/kazhi-webfont.svg#kazhiregular’) format(“svg”);
font-weight: normal;
font-style: normal;
}@font-face {
font-family: ‘bosporosuregular’;
src: url(‘/wp-content/fonts/bosporosu-webfont.eot’);
src: url(‘/wp-content/fonts/bosporosu-webfont.eot?#iefix’) format(’embedded-opentype’), url(‘/wp-content/fonts/bosporosu-webfont.woff2’) format(‘woff2’), url(‘/wp-content/fonts/bosporosu-webfont.woff’) format(‘woff’), url(‘/wp-content/fonts/bosporosu-webfont.ttf’) format(‘truetype’), url(‘/wp-content/fonts/bosporosu-webfont.svg#bosporosuregular’) format(“svg”);
font-weight: normal;
font-style: normal;
}@font-face {
font-family: ‘ezra_sil_srregular’;
src: url(‘/wp-content/fonts/sileotsr-webfont.eot’);
src: url(‘/wp-content/fonts/sileotsr-webfont.eot?#iefix’) format(’embedded-opentype’), url(‘/wp-content/fonts/sileotsr-webfont.woff2’) format(‘woff2’), url(‘/wp-content/fonts/sileotsr-webfont.woff’) format(‘woff’), url(‘/wp-content/fonts/sileotsr-webfont.ttf’) format(‘truetype’), url(‘/wp-content/fonts/sileotsr-webfont.svg#ezra_sil_srregular’) format(“svg”);
font-weight: normal;
font-style: normal;I have all the fonts formatted that way. I also have the files themselves in the /wp-content/fonts/ folder
This is what your Custom CSS looks like after I’ve un-minfied it:
@font-face { font-family: 'aquilineregular'; src: url(/wp-content/fonts/aquiline-webfont.eot); font-weight: 400; font-style: normal } @font-face { font-family: 'aquilinetworegular'; src: url(/wp-content/fonts/aquilinetwo-webfont.eot); font-weight: 400; font-style: normal } @font-face { font-family: 'kazhiregular'; src: url(/wp-content/fonts/kazhi-webfont.eot); font-weight: 400; font-style: normal } @font-face { font-family: 'bosporosuregular'; src: url(/wp-content/fonts/bosporosu-webfont.eot); font-weight: 400; font-style: normal } @font-face { font-family: 'ezra_sil_srregular'; src: url(/wp-content/fonts/sileotsr-webfont.eot); font-weight: 400; font-style: normal }
Try clearing your caching plugin’s cache and then de-activate CSS minification.
If that doesn’t help, de-activate your caching plugin and re-test.
My code was in the wrong file. I put in in style.css and now it works fine. amateur error. derp.
thanks for the help.
—Gideon
Awesome 🙂 Glad to hear you’re up and running and your CSS is now update safe.
All the best with your site.
Cheers
- The topic ‘embedded fonts missing version 1.4.4’ is closed to new replies.