Results 1 to 3 of 3

Thread: How to add a font face properly using compass and touch

  1. #1

    Default How to add a font face properly using compass and touch

    So I downloaded a font face kit from font squirrel and uploaded them to my server.

    I added a few lines to my scss
    PHP Code:
    @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
    PHP Code:
    @font-face {
      
    font-family"Pacifico";
      
    srcurl('/stylesheets/fonts/pacifico-fontfacekit.eot');
      
    srcurl('/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 {
      
    colorwhite;
      
    text-shadowrgba(2552552550.80 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/co...ss3/font-face/

    I Also tried hard coding the css just like the example with the following and it still didn't work
    PHP Code:
    @font-face {
      
    font-family"Pacifico";
      
    srcurl('/stylesheets/fonts/pacifico-fontfacekit.ttf'format('truetype'), url('/stylesheets/fonts/pacifico-fontfacekit.otf'format('opentype');


  2. #2
    Sencha User Olivierco's Avatar
    Join Date
    Nov 2011
    Location
    Paris - France
    Posts
    65

    Default path url generated is wrong

    Hi,

    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

  3. #3
    Sencha User Olivierco's Avatar
    Join Date
    Nov 2011
    Location
    Paris - France
    Posts
    65

    Default inline-font-files

    your wrote font-files

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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •