font embedding

Could you try to use absolute URLs instead (by adding your site URL in front of the path, e.g. https://mysite.com/wp-content/uploads/2013/12/american_typewriter-webfont.eot )

Let me know if it helps.

I tried absolute URLs but it didn’t seem to work. Funny things is, if I do the absolute URL and edit the theme CSS it works. However when I cut and paste the same code into the JetPack CSS it stops working.

I wonder if it doesn’t have to do with the font having to be relative to the page with the CSS.

Thanks for the extra details. It seems to be a bug with the Custom CSS module. I took note of the issue here, and we’ll take a closer look.

I’ll post again here once I have some news.

Another user was able to use @font-face with the custom CSS module as mentioned here:
https://github.com/Automattic/jetpack/issues/66#issuecomment-32239757

Could you give it another try and doublecheck that the font URLs are correct?

Thanks!

One of my colleagues gave me a bit more information about @font-face, that might help us understand the issue on your site:

Firefox and IE >= 9 block cross-origin font requests. You’ll need a Access-Control-Allow-Origin “*” HTTP header when serving your font files if they’re coming from a different domain. You may also need to ensure that your server is sending appropriate Content-type headers with your various font formats.

Let me know if it helps.

I’ve been playing with it for a while now and not getting any where… I looked over the website annienymotee.com that is mentioned and I can’t find any discernible differences on the one I’m working on which is currently at https://www.bshique.com/blog/

Our header section in the HTML is nearly word for word.

I don’t believe the files are coming from a different domain, because I uploaded them with media manager, not sure what “appropriate Content-type headers” is but I’ll look into it.

Just thought of this, what is the recommend url path to the font currently located at “www.bshique.com/blog/wp-content/uploads/2013/12/american_typewriter-webfont.eot”? That way I can at least rule out that it isn’t a simple linking issue.

/blog/ is currently the root for WordPress

They placed the font at the root of their site:
https://www.annienymotee.com/fonts/AlwaysFat.otf

Yes I saw that they placed it in the root of their website but how could “/font/~the_font” be any different than “/wp-content/uploads/2013/12/~the_font”. I don’t see how that would make a difference.

I’ve even played with “/blog/wp-content/uploads/2013/12/~the_font” thinking that might be the issue.

Could you try to rebuild your @font-face declaration with a generator like this one:
https://www.fontsquirrel.com/tools/webfont-generator

Your CSS might not be complete at the moment.

Font Squirrel is the website that I originally used. Anyway, I just started completely over beginning with using a different font but I was editing the theme “Style.css” and not the JetPack Edit CSS. I got the different font to work fine. Then I switched to the font I want, worked fine. Moved the location of the font to a different folder, again worked fine. Then I used the original location of the font, again it worked fine.

Finally I tried to use JetPack Edit CSS and it failed yet again. So I messed with the url link to a bunch of different things and none of them work. For example:

• ../../uploads/2013/12/typewriter.eot
• wp-content/uploads/2013/12/typewriter.eot
• blog/wp-content/uploads/2013/12/typewriter.eot

and others, but I think those three are the most likely.

I still think you have a coding issue.

I have the left the website with Style.CSS edited so that the font works because I’m running out of time for the customer.

It would be worth giving it a try with another font, just to make sure the problem is not linked to that exact font.

You could try with another Typewriter font like Cutive for example:
https://www.google.com/fonts#UsePlace:use/Collection:Cutive

The Google @import works just fine with Cutive, I left some of the code in there so you can easily inspect the page using firefox and switch it over from the Typewriter font.

I think the real problem is the linking structure required to link the font isn’t exactly what you think it would be. Possible because of the permalink structure, or something…

I tested the following CSS code in both Firefox and Chrome:

/*
Commented out Cutive
@import "https://fonts.googleapis.com/css?family=Cutive";body,h1,h2,h3,h4,h5,h6{font-family:'typewriter'}
*/

.page-id-43 .contents{background:none;box-shadow:none}.stylist{border:6px solid #c18e2d;border-radius:50%;box-shadow:0 0 1em #111}.break{clear:both;width:100%;height:2em}ul.services li{font-size:1.25em;line-height:1.75em;list-style-type:none;padding:0 2%;min-height:1.75em;width:96%}ul.services{background:#f0e9d7 url(wp-content/uploads/2013/12/table.jpg);border-image:url(wp-content/uploads/2013/12/frame.png) 35% 23% stretch stretch;border-image-width:8%;box-shadow:0 0 .75em rgba(0,0,0,.5);margin:0;padding:4em 5%;width:90%}.services li:nth-child(2n+3){background:rgba(0,0,0,.03)}.services li span{float:right;width:4em}

/* Added @font-face */
@font-face {
font-family: 'amertype_md_btmedium';
src: url('/blog//wp-content/uploads/2013/12/american_typewriter-webfont.eot');
src: url('/blog/wp-content/uploads/2013/12/american_typewriter-webfont.eot?#iefix') format('embedded-opentype'),
    url('/blog/wp-content/uploads/2013/12/american_typewriter-webfont.woff') format('woff'),
    url('/blog/wp-content/uploads/2013/12/american_typewriter-webfont.ttf') format('truetype'),
    url('/blog/wp-content/uploads/2013/12/american_typewriter-webfont.svg#amertype_md_btmedium') format("svg");
font-weight: normal;
font-style: normal;
}

body,h1,h2,h3,h4,h5,h6 {
font-family: 'amertype_md_btmedium';
}

Everything seems to look good:

• In Chrome: https://i.wpne.ws/TWq8
• In Firefox: https://i.wpne.ws/TWn0

Could you give it a try?