Custom Webfont Trouble

You’re only loading the font in EOT format, which is only supported by IE. Do you have files for other formats? I think using the FontSquirrel generator will generate the other font formats, if possible.

All those other fonts are in the same folder. https://www.mytributejournal.com/wp-content/uploads/fonts/

There is:
ITCEDSCR.svg
ITCEDSCR.ttf
ITCEDSCR.woff
ITCEDSCR.eot

So I’m not sure why it is only pulling the EOT.

It’s because you were only calling in the EOT format. You can call in multiple formats for the same font within a @font-face rule:

@font-face {
  font-family: 'Conv_ITCEDSCR';
  src: url('https://www.mytributejournal.com/wp-content/uploads/fonts/ITCEDSCR.eot') format('eot'),
    url('https://www.mytributejournal.com/wp-content/uploads/fonts/ITCEDSCR.woff') format('woff'),
    url('https://www.mytributejournal.com/wp-content/uploads/fonts/ITCEDSCR.ttf') format('ttf');
  font-weight: 400;
  font-style: normal;
}

YES! Thank you. Ah the joys and frustrations of being a cut and paste coder:(

Thank you so so much. I have to make sure the font is still working on the owners IE browser but it appears to be working great on my browsers and on mobile now. Thanks so much Stephen.

I’ll mark this as resolved once I’m sure it’s working on my friends end.

GAH!!! OK. It’s working on everything but IE. And as much as I would love to say “who cares about IE” that is the browser that the owner of the website uses.

Here is my CSS:

@font-face {
	font-family: 'Conv_ITCEDSCR';
	src: url('https://www.mytributejournal.com/wp-content/uploads/fonts/ITCEDSCR.eot') format('eot'), url('https://www.mytributejournal.com/wp-content/uploads/fonts/ITCEDSCR.woff') format('woff'), url('https://www.mytributejournal.com/wp-content/uploads/fonts/ITCEDSCR.svg') format('svg'), url('https://www.mytributejournal.com/wp-content/uploads/fonts/ITCEDSCR.ttf') format("ttf");
	font-weight: 400;
	font-style: normal;
}

h1,h2,h3,h4 {
	font-family: 'Conv_ITCEDSCR';
}

.entry-title {
	font-family: 'Conv_ITCEDSCR' !important;
	font-size: 45px;
	font-weight: normal !important;
}

.widget-title {
	font-family: 'Conv_ITCEDSCR';
	font-size: 40px;
}

Which version of Internet Explorer does the owner use (if you know)?

I don’t. I will see if I can walk her through finding out for me.

She is using IE 11. With thew previous code it worked on IE 11 but nowhere else – now it is working on everything but IE 11. .eot is still called for. Is it an order issue?

Joseph

(First off, thanks to Microsoft for making it so hard to debug these kinds of issues with IE 11.)

Does it work correctly if the EOT font declaration is moved to the end of the @font-face call:

@font-face {
	font-family: 'Conv_ITCEDSCR';
	src: url('https://www.mytributejournal.com/wp-content/uploads/fonts/ITCEDSCR.woff') format('woff'), url('https://www.mytributejournal.com/wp-content/uploads/fonts/ITCEDSCR.svg') format('svg'), url('https://www.mytributejournal.com/wp-content/uploads/fonts/ITCEDSCR.ttf') format("ttf"), url('https://www.mytributejournal.com/wp-content/uploads/fonts/ITCEDSCR.eot') format('embedded-opentype');
	font-weight: 400;
	font-style: normal;
}

Testing

That did the trick! Thanks so much Stephen! and a sarcastic thank you to Microsoft for creating the problem.