www.webdeveloper.com
Results 1 to 4 of 4

Thread: Path to Webfonts files in the correct way

  1. #1
    Join Date
    Sep 2005
    Posts
    1,630

    Question Path to Webfonts files in the correct way

    I have the following CSS structure:
    PHP Code:
    @font-face{
        
    font-family'MyWebFont';
        
    srcurl('WebFont.eot');
        
    srcurl('WebFont.eot?#iefix'format('embedded-opentype'),
             
    url('WebFont.woff'format('woff'),
             
    url('WebFont.ttf'format('truetype'),
             
    url('WebFont.svg#webfont'format('svg');

    1. How to set correct path to this Webfont as I like to set different folder for all webfonts.
    PHP Code:
    @font-face{
        
    font-family'webfonts/MyWebFont';
        
    srcurl('webfonts/WebFont.eot');
        
    srcurl('webfonts/WebFont.eot?#iefix'format('embedded-opentype'),
             
    url('webfonts/WebFont.woff'format('woff'),
             
    url('webfonts/WebFont.ttf'format('truetype'),
             
    url('webfonts/WebFont.svg#webfont'format('svg');

    Check folder webfonts/

    2. Should be always all files in the same directory like defined CSS?

    3. Should we separate Google webfonts, Myfonts, Cufon folder inside CSS folder?

    Sample Cufon:
    PHP Code:
    <script type="text/javascript" src="js/cufon.js"></script>
    <script type="text/javascript" src="js/.font.js"></script> 
    Cufon.registerFont(

    Sample Myfonts.com:
    PHP Code:
    <script type="text/javascript">
        
    //change this to true to enable troubleshooting mode
        
    var myfont_webfont_test false;
        
    // change this to false if you're having trouble with WOFFs
        
    var woffEnabled true;
        
    // to place your webfonts in a custom directory, uncomment this and set it to where your webfonts are.
        
    var customPath ".../Fonts";
    </script> 
    Check /Fonts directory

    4. Should be Webfont CSS before basic stylesheet?
    Last edited by toplisek; 05-03-2012 at 06:33 AM.

  2. #2
    Join Date
    Aug 2010
    Location
    San Diego
    Posts
    242
    You can put your web fonts in it's own directory, but don't include that directory name in the name of the font, that is simply a name you're going to use and not a file name:
    Code:
    @font-face{
        font-family: 'MyWebFont';
        src: url('webfonts/WebFont.eot');
        src: url('webfonts/WebFont.eot?#iefix') format('embedded-opentype'),
             url('webfonts/WebFont.woff') format('woff'),
             url('webfonts/WebFont.ttf') format('truetype'),
             url('webfonts/WebFont.svg#webfont') format('svg');
    }
    body { font-family: MyWebFont, Arial, Helvetica, sans-serif; }
    I don't know how Cufon or google fonts work.

  3. #3
    Join Date
    Sep 2005
    Posts
    1,630
    How to set path actually? Absolute?Relative? /

  4. #4
    Join Date
    Aug 2010
    Location
    San Diego
    Posts
    242
    Quote Originally Posted by toplisek View Post
    How to set path actually? Absolute?Relative? /
    I set it relative to CSS file that references the font. Usually I have a subdir for CSS and a subdir for fonts so the css looks like this:
    Code:
    @font-face {
        font-family: 'AmaticSCRegular';
        src: url('../fonts/AmaticSC-Regular-webfont.eot');
        src: url('../fonts/AmaticSC-Regular-webfont.eot?#iefix') format('embedded-opentype'),
             url('../fonts/AmaticSC-Regular-webfont.woff') format('woff'),
             url('../fonts/AmaticSC-Regular-webfont.ttf') format('truetype'),
             url('../fonts/AmaticSC-Regular-webfont.svg#AmaticSCRegular') format('svg');
        font-weight: normal;
        font-style: normal;
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles