Help - Fonts not showing up correctly in IE 11?

(Ashley) #1

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?

(Ashley) #2

@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; }
#3

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.

(Joe Gillespie) #4

.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.

(Ashley) #5 
<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