View Full Version : How to add a font face properly using compass and touch

2 Aug 2011, 3:19 AM
So I downloaded a font face kit from font squirrel and uploaded them to my server.

I added a few lines to my scss

@import "compass/css3";
@include font-face("Pacifico", font-files("pacifico-fontfacekit.woff", woff, "pacifico-fontfacekit.otf", opentype), "pacifico-fontfacekit.eot");

I then compiled it and my output css shows

@font-face {
font-family: "Pacifico";
src: url('/stylesheets/fonts/pacifico-fontfacekit.eot');
src: url('/stylesheets/fonts/pacifico-fontfacekit.eot?iefix') format('eot'), url('/stylesheets/fonts/pacifico-fontfacekit.woff') format('woff'), url('/stylesheets/fonts/pacifico-fontfacekit.otf') format('opentype');

.x-toolbar .x-toolbar-title {
color: white;
text-shadow: rgba(255, 255, 255, 0.8) 0 1px 20px;
font-family: 'Pacifico';

However It doesn't seem to show up(I just see it in times new roman), I believe it has to do with the font face part because I can make the font family Arial or any other default font and my title font will change.

Does anyone have any ideas?

You can find an example of how to use font faces with compass using either scss or css http://compass-style.org/examples/compass/css3/font-face/

I Also tried hard coding the css just like the example with the following and it still didn't work

@font-face {
font-family: "Pacifico";
src: url('/stylesheets/fonts/pacifico-fontfacekit.ttf') format('truetype'), url('/stylesheets/fonts/pacifico-fontfacekit.otf') format('opentype');

12 Nov 2013, 6:12 PM

try to remove the first / in the generated css file.

it works, so I think it's a path problem maybe in your config.rb or in your scss file.

good luck

12 Nov 2013, 7:01 PM
your wrote font-files

but it is @include font-face('YourFont', inline-font-files('path/YourFont.ttf', truetype));