CODEWITHSUNDEEP
csssassfont-facecompass-sass
Adrian Elder
Adrian Elder

Reputation: 2071

Compass font-face outputs wrong path to font file

@font-face {
  font-family: "HelveticaNeueLTStd-Lt";
  src: url('/css/fonts/HelveticaNeueLTStd-Lt.otf') format('opentype');
}

That is the output of my compass code: 

@include font-face('HelveticaNeueLTStd-Lt', font-files('HelveticaNeueLTStd-Lt.otf'));

I can't seem to get the output url to be either just 'Helvetica......otf' or just 'fonts/Helvetica......otf'.

My directory assets are as followed:

http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "img"
javascripts_dir = "js"
fonts_dir = "fonts"

I have tried taking off fonts_dir and changing it to "" with no luck

Upvotes: 5

Views: 3623

Answers (3)

MarvinVK
MarvinVK

Reputation: 3073

If I understand correctly you path output is '/css/fonts/HelveticaNeueLTStd-Lt.otf' but you want it to go to '/fonts/HelveticaNeueLTStd-Lt.otf.

Maybe try changing your config.rb file to

fonts_dir = "../fonts"

I would not recommend using a .otf file for web

I usually use the mixin this way:

@include font-face('HelveticaNeueLTStd-Lt', font-files(
'HelveticaNeueLTStd-Lt.woff', woff,
'HelveticaNeueLTStd-Lt.ttf', ttf,
'HelveticaNeueLTStd-Lt.svg', svg),
'HelveticaNeueLTStd-Lt.eot');

Upvotes: 0

user3679516
user3679516

Reputation: 11

i had the same problem. Just use URL instead font-files

@include font-face('HelveticaNeueLTStd-Lt', url('HelveticaNeueLTStd-Lt.otf'));

Upvotes: 1

sam
sam

Reputation: 40688

Set http_fonts_path or :relative assets, true. :)

Upvotes: 4

Related Questions