[SOLVED] @font-face Rule for Custom Fonts Not Working (1.6)

[ASP]

Hi,

 

I've read through similar threads and many guides, yet haven't been able to solve this problem.

 

I'm using the current version of PrestaShop and have customised the standard theme with basic CSS, although I am having trouble displaying my custom fonts using the @font-face rule.

I have applied the following CSS code in Wordpress, Tumblr and other sites with perfect results, but can't seem to get it working for Prestashop and have spent hours trying various fixes such as, ' instead of ", relative URL path instead of absolute etc.:

html {
  font-family: "Imperator", Palatino, "Palatino LT STD", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  
@font-face {font-family:"PlainGermanica";src:url("http://DOMAIN.com/fonts/PlainGermanica.eot?") format("eot"),url("http://DOMAIN.com/fonts/PlainGermanica.woff") format("woff"),url("http://DOMAIN.com/fonts/PlainGermanica.ttf") format("truetype"),url("http://DOMAIN.com/fonts/PlainGermanica.svg#PlainGermanica") format("svg");font-weight:normal;font-style:normal;}

@font-face {font-family:"Imperator";src:url("http://DOMAIN.com/fonts/Imperator.eot?") format("eot"),url("http://DOMAIN.com/fonts/Imperator.woff") format("woff"),url("http://DOMAIN.com/fonts/Imperator.ttf") format("truetype"),url("http://DOMAIN.com/fonts/Imperator.svg#Imperator") format("svg");font-weight:normal;font-style:normal;}

 }

PlainGermanica for headings:
 

.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: "PlainGermanica", Palatino, serif !important;
  font-weight: normal;
  line-height: 1.1; }

Imperator for body:

font-family: "Imperator", Palatino, "Palatino LT STD", "Palatino Linotype", "Book Antiqua", Georgia, serif; }

Any help would be greatly appreciated, I'm getting rather desperate!

 

As I said above, I have applied the exact same CSS code in Wordpress, Tumblr and other sites with perfect results.

Edited August 5, 2014 by ASP (see edit history)

[dioniz]

Maybe this will help you:

 

http://www.prestashop.com/forums/topic/324999-solved-using-font-face-with-sasscompass-on-default-16-theme/?do=findComment&comment=1644674

[ASP]

Thank you for the response. I had already read through that thread and also have the font files in the theme/font path to match the pre-installed and working FontAwesome path and code. Have just tried again using your exact code layout, but still no joy:

 

@font-face {
font-family: 'Imperator';
src: url('../font/Imperator.eot'); /* IE9 Compat Modes */
src: url('../font/Imperator.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../font/Imperator.woff') format('woff'), /* Modern Browsers */
url('../font/Imperator.ttf') format('truetype'), /* Safari, Android, iOS */
url('../font/Imperator.svg#svgImperator') format('svg') /* Legacy iOS */
}

@font-face {
font-family: 'PlainGermanica';
src: url('../font/PlainGermanica.eot'); /* IE9 Compat Modes */
src: url('../font/PlainGermanica.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../font/PlainGermanica.woff') format('woff'), /* Modern Browsers */
url('../font/PlainGermanica.ttf') format('truetype'), /* Safari, Android, iOS */
url('../font/PlainGermanica.svg#svgPlainGermanica') format('svg') /* Legacy iOS */
}

Edited August 5, 2014 by ASP (see edit history)

[ASP]

The font path for the pre-installed and working FontAwesome is as follows. I'll see if copying this phrasing works.

/* FONT PATH
 * -------------------------- */
@font-face {
  font-family: 'FontAwesome';
  src: url("../font/fontawesome-webfont.eot?v=3.2.1");
  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");
  font-weight: normal;
  font-style: normal; }

[ASP]

SOLVED!

 

I noticed that the FontAwesome code was placed outside of any other threads, so all I had to do was move my original code down outside of the 'html' bracket as follows:

html {
  font-family: "Imperator", Palatino, "Palatino LT STD", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  
 }

@font-face {font-family:"PlainGermanica";src:url("http://MYSITE.com/fonts/PlainGermanica.eot?") format("eot"),url("http://MYSITE.com/fonts/PlainGermanica.woff") format("woff"),url("http://MYSITE.com/fonts/PlainGermanica.ttf") format("truetype"),url("http://MYSITE.com/fonts/PlainGermanica.svg#PlainGermanica") format("svg");font-weight:normal;font-style:normal;}

@font-face {font-family:"Imperator";src:url("http://MYSITE.com/fonts/Imperator.eot?") format("eot"),url("http://MYSITE.com/fonts/Imperator.woff") format("woff"),url("http://MYSITE.com/fonts/Imperator.ttf") format("truetype"),url("http://MYSITE.com/fonts/Imperator.svg#Imperator") format("svg");font-weight:normal;font-style:normal;}

Edited August 5, 2014 by ASP (see edit history)