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; }
Daniel
February 21, 2017, 1:37pm
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.
mrpixel
(Joe Gillespie)
February 21, 2017, 11:47pm
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.
<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
jarf
(Roger)
November 4, 2019, 9:35am
6
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,
Rick4F
(Rick)
November 4, 2019, 9:51am
7
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.
1 Like