[SOLVED] Using font-face with SASS/Compass on default 1.6 theme

[frogtaku]

I am trying to add a custom font in a copy of the default theme but I had no luck so far. Here's what I have done:

 

• I have included the fonts in css/stylesheets/fonts/
• I wrote in global.scss, right before "@import "theme_variables";":

@import "compass/css3/font-face";
@include font-face("customFont", font-files('customFont.ttf'), 'customFont.eot');

• And in _theme_variables.scss:

$font-family:                          "customFont", Arial, Helvetica, sans-serif;

The compiled global.css includes the font as such:

@font-face {
  font-family: "customFont";
  src: url('/stylesheets/fonts/customFont.eot');
  src: url('/stylesheets/fonts/customFont.eot?#iefix') format('eot'), url('/stylesheets/fonts/customFont.ttf') format('truetype');
}

But the font-family that are set afterward all ignore the font completely... I guess it has something to do with the fact that $font-family is set in a different file (my 2 cents), but I can't figure a workaround...

Edited April 21, 2014 by frogtaku (see edit history)

[frogtaku]

I didn't check properly, really sorry: the font is actually mentionned in my global.css.

 

Sadly, it is still not appearing at all... Did I put my fonts in the correct path? Could something else be the cause?

[dioniz]

Hey frogtaku

 

Is this path: css/stylesheets/fonts/ in your root or in theme folder?

[frogtaku]

Hey, thanks for answering.

 

It is in the theme folder. I tried in the root folder (/prestashop/css/stylesheets/fonts/) out of curiosity but it didn't change anything, predictably.

[dioniz]

Path looks ok to me.

 

Have you set font-family in a style Asking because i keep forgeting that

[frogtaku]

I am not sure what you mean but I guess we are on to something.

 

There's a $font variable setting the style, but I am not sure where it's used:

$font-family:                          "customFont", Arial, Helvetica, sans-serif!important;
$font:                                  normal 13px/18px $font-family;

In global.scss, the style is set this way in all the elements I have encountered so far:

font: 600 18px / 22px $font-family;

Just in case, I tried to set it through font-face but it didn't help me (unless I messed up the syntax):

@include font-face("customFont", font-files('customFont.ttf'), 'customFont.eot', normal, normal);

[dioniz]

I'm using custom font and all i have done is add this to global.css:

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

My fonts are in folder: ../mytheme/font

Edited April 21, 2014 by dioniz (see edit history)

[frogtaku]

Would you think it is because I only have ttf and eot? I am judging by the comments on your generated code. font2web is down right now so I can't test immediately.

[dioniz]

Could be.

Maybe you can use this http://www.fontsquirrel.com/tools/webfont-generator

[frogtaku]

Thanks! Unfortunately, adding all the formats didn't change anything...

[dioniz]

Can you try and remove first / from path in sources make it like this:

 

src: url('stylesheets/fonts/customFont.eot');

[frogtaku]

That was it! Thanks a lot! I'll have to find a way to prevent SCOUT from doing that or work directly through cmd-lines.

[dioniz]

You are welcome

Gotta check my eyes, since i didn't see it earlier