@font-face does not work with custom font

Question

I followed this video: https://www.youtube.com/watch?v=t1nX5_2FQ8g Generated a folder with font content and css file, I copied the css code to my global.css

@font-face {
font-family: 'Conv_Origram';
src: url('fonts/Origram.eot');
src: local('☺'), url('fonts/Origram.woff') format('woff'), url('fonts/Origram.ttf') format('truetype'), url('fonts/Origram.svg') format('svg');
font-weight: normal;
font-style: normal;

}

@font-face {
    font-family: "FontAwesome";
    font-style: normal;
    font-weight: normal;
    src: url("../font/fontawesome-webfont.eot?#iefix&v=3.2.1") format("embedded-opentype"), url("../font/fontawesome-webfont.woff?v=3.2.1") format("woff"), url("../font/fontawesome-webfont.ttf?v=3.2.1") format("truetype"), url("../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1") format("svg");
}

I copied the font files to the folder and also tried the location of fontAwesome, which works at my theme. But for my origram font it doesnt work. I tried just simple html and css on blank domain and it worked, but in my prestashop theme it doesnt. Thank you for your time

Answer 1

Font-face requires a little understanding of browser inconsistencies and may require some changes on the web server itself. First thing you have to do is check the console to see if/what messages are being generated. Is it a permissions issue or resource not found....?

Secondly, because each browser is expecting a different font type I would use Font Squirrel to upload your font and then generate the additional files and CSS needed. http://www.fontsquirrel.com/fontface/generator

And finally, versions of FireFox and IE will not allow fonts to be loaded cross-domain. You may need to modify your Apache config or .htaccess (Header set Access-Control-Allow-Origin "*")