[Solved] Use a custom font (Compass/PS1.6)

[Templar77400]

Hi everyone,

New problem on my website (PS1.6) when I try to use a custom font.

Here is the code in global scss :

@include font-face("Font-Autourde", font-files("OratorStd.otf", "OratorStd.woff", "OratorStd.ttf", "OratorStd.svg"), "OratorStd.eot");

But when I use it, it doesn't work, in the Chrome Inspector there are errors :
 

GET http://localhost/font/OratorStd.otf 404 (Not Found) jquery-1.11.0.min.js:2
GET http://localhost/font/OratorStd.woff 404 (Not Found) jquery-1.11.0.min.js:3
GET http://localhost/font/OratorStd.ttf 404 (Not Found) /font/OratorStd.ttf:1
GET http://localhost/font/OratorStd.svg 404 (Not Found) 

I see there is a problem with the path but I can't solve it.

I tried this too :

@font-face {
	font-family: 'Font-Autourde';
	src: url('../font/OratorStd.eot?') format('eot'), 
	     url('../font/OratorStd.otf')  format('opentype'),
	     url('../font/OratorStd.woff') format('woff'), 
	     url('../font/OratorStd.ttf')  format('truetype'),
	     url('../font/OratorStd.svg#OratorStd') format('svg');
}

But it's weird, I shouldn't have to put this path, the config.rb should be enough to indicate the fonts path no ? And anyway this does'nt work either, for module css, the path is wrong, I have errors saying it can't find the fonts in "theme/mytheme/css/font", normal because the fonts are in "theme/mytheme/font".

Here is the important part of config.rb :

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "img"
javascripts_dir = "js"
fonts_dir = "font"

Do you have any solution to use a custom font please ?

Thank you !

Templar

Edited July 25, 2014 by Templar77400 (see edit history)

[dioniz]

I have set my custom font icons like this in mytheme/css/global.css:

@font-face {
    font-family: 'myfont';
    src:url('../font/myfont.eot?oyl7ah');
    src:url('../font/myfont.eot?#iefixoyl7ah') format('embedded-opentype'),
    url('../font/myfont.woff?oyl7ah') format('woff'),
    url('../font/myfont.ttf?oyl7ah') format('truetype'),
    url('../font/myfont.svg?oyl7ah#myfont') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="myfont-"], [class*=" myfont-"] {
    font-family: 'myfont';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

and then in mytheme/font i have fonts.

 

This works for me.

[Templar77400]

Thanks for the answer

 

So I use something similar :

@font-face {
	font-family: 'Font-Autourde';
	src: url('../font/OratorStd.eot?') format('eot'), 
	     url('../font/OratorStd.otf')  format('opentype'),
	     url('../font/OratorStd.woff') format('woff'), 
	     url('../font/OratorStd.ttf')  format('truetype'),
	     url('../font/OratorStd.svg#OratorStd') format('svg');
}

But I still have errors in Chrome Inspector

Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/autourdelamaison/themes/autourde/css/modules/blocktopmenu/font/OratorStd.otf
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/autourdelamaison/themes/autourde/css/modules/themeconfigurator/font/OratorStd.otf
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/autourdelamaison/themes/autourde/css/modules/font/OratorStd.otf
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/autourdelamaison/themes/autourde/css/modules/blocktopmenu/font/OratorStd.woff
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/autourdelamaison/themes/autourde/css/modules/themeconfigurator/font/OratorStd.woff
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/autourdelamaison/themes/autourde/css/modules/font/OratorStd.woff
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/autourdelamaison/themes/autourde/css/modules/blocktopmenu/font/OratorStd.ttf
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/autourdelamaison/themes/autourde/css/modules/themeconfigurator/font/OratorStd.ttf
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/autourdelamaison/themes/autourde/css/modules/font/OratorStd.ttf
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/autourdelamaison/themes/autourde/css/modules/blocktopmenu/font/OratorStd.svg#OratorStd
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/autourdelamaison/themes/autourde/css/modules/themeconfigurator/font/OratorStd.svg#OratorStd
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/autourdelamaison/themes/autourde/css/modules/font/OratorStd.svg#OratorStd

I work on local, not sure I'm gonna see the font if I host the website online.
And anyway, the website takes a very long time to load because of that :/

Any idea ?

EDIT : I uninstalled the font on my computer and I refreshed the page, I can still see the font so I suppose it works but I still get those errors and the texts written in OratorStd are very long to load (maybe because it was downloading the font I don't know)

Edited July 3, 2014 by Templar77400 (see edit history)

[Templar77400]

Up, pages are taking so much time to load because of that, any idea ? 

@dioniz : Where did you declare the font-face ? I did it in the _theme_variables.scss.

Edited July 4, 2014 by Templar77400 (see edit history)

[Templar77400]

Up ... I can't figure out why I have that many errors, it's working but every text written in this font is taking like 3s to load :/

[Templar77400]

Bump

[vekia]

hello

these files aren't empty? if so, chrome will spawn 404

[Templar77400]

These files are empty, fonts are only in theme/mytheme/font, I don't know why it's looking inside those files. Compass should be able to detect the font file with the config.rb right ?

I'm on local, cache is off and force compilation is on (maybe that's why it tries to load the fonts every time ?)

I don't know if there is really a problem (normally errors mean problem right ?) or if it's normal. Maybe if you can try to define a font-face like me and tell me if you have the same errors ?

[dioniz]

Up, pages are taking so much time to load because of that, any idea ? 

@dioniz : Where did you declare the font-face ? I did it in the _theme_variables.scss.

 

As i said, i declared font-face in mytheme/css/global.css

And i have font files in mytheme/font folder

[Templar77400]

I read this topic like 10 times and I just realized how stupid I am. 2 times you tell me you declared it in global.css, and I still don't try.
Of course it's the solution, I declared it in global.scss, so it was declared in every css file using it, but the path was wrong in some.

Thanks a lot dioniz

 

TL;DR : Declare it in global.css and not in global.scss

[dioniz]

Glad you solved it

[Templar77400]

Ok, I just realised this solution is not very good. When I modify my global.SCSS file, the global.CSS is regenerated and everything I wrote directly in the CSS file is lost. 
So it's not a solution to write directly in the css file, do you have any idea how to do ?

I start to be very frustrated with this ...

Thanks

[Templar77400]

Bump

[Templar77400]

Bump ^^

[Templar77400]

I just found a solution, here is what you have to do :

 

In global.SCSS, at the top, include this :

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

The "@include font-face" will generate a font-face only once in global.CSS. If you use "@font-face" in global.SCSS, this will generate a @font-face in every css file that uses the font, and that's not what you want, you'll get errors.
 

Your global.CSS will then look like this

@font-face {
font-family: "customFont";
src: url('../font/myfont.ttf') format('truetype'), url('../font/myfont.eot') format('embedded-opentype'), url('../font/myfont.woff') format('woff'), url('../font/myfont.svg') format('svg'), url('../font/myfont') format('opentype'); } 

Which works

if it doesn't work, verify your config.rb

You need to set relative_assets to true !

relative_assets = true 

It gives you relatives paths and not absolute paths. If you don't do it, your font urls will look like this in global.CSS : "/font/myfont.eot" and it's not going to work

 

After modifying the config.rb, don't forget to do a "compass clean". (Will regenerate every .css file)

I hope it will help, sorry for my bad english

Templar