@Font-Face Eot Not Loading Over Https

@font-face EOT not loading over HTTPS

I know this is an old thread but I just had to weigh in. We had the same issue with EOT and WOFF fonts in all versions of Internet Explorer (7-11) not loading over HTTPS. After hours of trial and error and comparing our headers with other working sites we found it was the vary header that was messing things up. Unsetting that header for those file types fixed our issue right away.

<FilesMatch "\.(woff)$">
    Header unset Vary
</FilesMatch>

<FilesMatch "\.(eot)$">
    Header unset Vary
</FilesMatch>

Bonus Reading

• Eric Lawrence: Vary with Care (archive)
• IE Blog: Caching Improvements in Internet Explorer 9 (archive)

@Font-Face won't load via https in IE

So, I just figured out a way that is working for IE, Safara, Firefox and Chrome as far as I can see.

Since all the things I tried did not work out, I was trying to find a way that could "embed" the fonts eitherway to my websites, to my CSS or to my server. Added the font to my server wasn't an option according to my server-guy so I decided to get back to Font-Squirrel and see if there was an option they offered in converting the fonts.

I reuploaded my fonts en chose the export mode. Somewhere around the bottom of the settings fields it says "Base64 Encode", luckily I knew what this meant (I can imagine someone who doesn't easily looks over this option) so I genereted my CSS files with base64 embdedded fonts.

This works flawlessly. Ofcourse this made my CSS files some kb's bigger (5kb vs 129kb). But I don't see a big adventage of 100kb extra with the current internet connections.

Just to compare, non base64 encoded CSS:

@font-face {
    font-family: 'ProximaNovaSemibolds';
    src: url('../font-face/proximanova-semibold-webfont.eot');
    src: url('../font-face/proximanova-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font-face/proximanova-semibold-webfont.woff') format('woff'),
         url('../font-face/proximanova-semibold-webfont.ttf') format('truetype'),
         url('../font-face/proximanova-semibold-webfont.svg#ProximaNovaSemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}

Base64 encoded CSS:

@font-face {
    font-family: 'ProximaNovaBold';
    src: url('proximanova-bold-webfont-webfont.eot');
    }

@font-face {
    font-family: 'ProximaNovaBold';
    src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAF+8ABMAAAAArzAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABqAAAABwAAAAcYT+YZ0dERUYAAAHEAAAALQAAADIC+wHsR1BPUwAAAfQAAAf7AAAURoqljoZHU1VCAAAJ8AAAACAAAAAgbJF0j09TLzIAAAoQAAAAWwAAAGB+FsNBY21hcAAACmwAAAGdAAAB+uY47ZljdnQgAAAMDAAAADoAAAA..alotmorecharacters...FDmYlYoTkE8HdsTFF2cwU74AAU/lecUAAA==) format('woff'),
         url('proximanova-bold-webfont-webfont.ttf') format('truetype'),
         url('proximanova-bold-webfont-webfont.svg#ProximaNovaBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face not working

Double period (..) means you go up one folder and then look for the folder behind the slash.
For example:

If your index.html is in the folder html/files and the fonts are in html/fonts, the .. is fine (because you have to go back one folder to go to /fonts). Is your index.html in html and your fonts in html/fonts, then you should use only one period.

Another problem could be that your browser might not support .eot font-files.

Without seeing more of your code (and maybe a link to a live version of your website), I can't really help you further.

Edit: Forget the .eot part, I missed the .ttf file in your css.

Try the following:

@font-face { 
font-family: Gotham;
src: url(../fonts/gothammedium.eot);
src: url(../fonts/Gotham-Medium.ttf); 
}

Why my STYLE to import external font-face doesn't work

Link you provided doesn't support HTTPS, so if your site have HTTPS connection and headers which restrict access to unsecured HTTP it's can be the problem.

Also, OpenType isn't so suitable for web now, you can use WOFF or WOFF2 version of the same font. I found one here: https://github.com/dreampulse/computer-modern-web-font. Use it like this:

@font-face { font-family: 'Computer Modern Typewriter'; src: url('cmuntt.eot'); src: url('cmuntt.eot?#iefix') format('embedded-opentype'),   url('cmuntt.woff') format('woff'),   url('cmuntt.ttf') format('truetype'),   url('cmuntt.svg#cmuntt') format('svg'); font-weight: normal; font-style: normal;}
@font-face { font-family: 'Computer Modern Typewriter'; src: url('cmuntb.eot'); src: url('cmuntb.eot?#iefix') format('embedded-opentype'),   url('cmuntb.woff') format('woff'),   url('cmuntb.ttf') format('truetype'),   url('cmuntb.svg#cmuntb') format('svg'); font-weight: bold; font-style: normal;}
@font-face { font-family: 'Computer Modern Typewriter'; src: url('cmunit.eot'); src: url('cmunit.eot?#iefix') format('embedded-opentype'),   url('cmunit.woff') format('woff'),   url('cmunit.ttf') format('truetype'),   url('cmunit.svg#cmunit') format('svg'); font-weight: normal; font-style: italic;}
@font-face { font-family: 'Computer Modern Typewriter'; src: url('cmuntx.eot'); src: url('cmuntx.eot?#iefix') format('embedded-opentype'),   url('cmuntx.woff') format('woff'),   url('cmuntx.ttf') format('truetype'),   url('cmuntx.svg#cmuntx') format('svg'); font-weight: bold; font-style: italic;}

@font-face {
    font-family: "GothamBook";
    src: url("../fonts/Gotham-Book.eot");
    src: url(".../fonts/Gotham-Book.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Gotham-Book.woff") format("woff"), 
    url("../fonts/Gotham-Book.ttf") format("truetype"), 
    url("../fonts/Gotham-Book.svg#Gotham-Book") format("svg");
}

font-family: GothamLight, "sans-serif";

font-family: GothamLight, Arial, Helevetica, "sans-serif";