Help - Fonts not showing up correctly in IE 11?

Hi,

I have tested the ad in several browsers most are fine, but having a few issues with the font in Internet Explorer. Anyone give any advice on this matter?

I added a custom CSS font and uploaded the font in the resources folder, so I don’t know what the problem is?

   <style>
@font-face {
	font-family: 'GothamOffice-Bold';
	src: url('Default.hyperesources/GothamOffice-Bold.ttf');
}
</style>
	<style>
@font-face {
	font-family: 'GothamOffice-Regular';
	src: url('Default.hyperesources/GothamOffice-Regular.ttf');
}
</style>

This is what shows in my header, is there any code to make it work in all IE e.g. 11 version. Is there alternative font extensions I need to provide?

@Daniel / @jonathan can you shed some light on this?

I have found some code while researching the issue similar to mine:

@font-face {
font-family: 'Some Font';
src: url('fonts/some-font.eot');
src: url('fonts/some-font.eot?#iefix') format('eot'),
     url('fonts/some-font.woff') format('woff'),
     url('fonts/some-font.ttf') format('truetype'),
     url('fonts/some-font.svg') format('svg');
font-weight: normal;
font-style: normal; }

Here’s a start-to-finish workflow for adding a font: How do I add SF UI Display + Text fonts to prototype for IOS9? (San Francisco Mac System Font)

It is likely not working in IE because it can’t load the .ttf file – so it needs additional font formats (I’m not positive which IE requires).

Keep in mind once your font is added to your resource library, you’ll need to use ${resourcesFolderName}/file.ttf to access it in your code.

.TTF works fine in all versions of IE. I was a type designer in an earlier life - but you may be running into a type naming problems. I always produced my Windows fonts using exactly 8.3 filenames e.g. FONTNAME.TTF for best compatibility.

<style>
@font-face {
    font-family: 'GothamOffice-Bold';
    src: url('assets/GothamOffice-Bold.eot');
    src: url('assets/GothamOffice-Bold.eot?#iefix') format('embedded-opentype'),
         url('assets/GothamOffice-Bold.woff') format('woff'),
         url('assets/GothamOffice-Bold.ttf') format('truetype'),
         url('assets/GothamOffice-Bold.svg#GothamOffice-Bold') format('svg');
    font-weight: normal;
    font-style: normal;

}
</style>
	<style>
@font-face {
    font-family: 'GothamOffice-Light';
    src: url('assets/GothamOffice-Regular.eot');
    src: url('assets/GothamOffice-Regular.eot?#iefix') format('embedded-opentype'),
         url('assets/GothamOffice-Regular.woff') format('woff'),
         url('assets/GothamOffice-Regular.ttf') format('truetype'),
         url('assets/GothamOffice-Regular.svg#GothamOffice-Bold') format('svg');
    font-weight: normal;
    font-style: normal;

}
</style>

This was my solution for fixing the issue and the fonts now show in all major browsers @mrpixel

Hi all,

Same problem (specifically with Gotham font)

None of the code samples posted here worked in IE 11

Anyone have any other suggestions?

Kind regards,

Showing your file may help us to see how and what. It’s a bit hard to remotely investigate what be the culprit without it. :relaxed:

1 Like