SitePoint Sponsor

User Tag List

Results 1 to 11 of 11

Thread: css3 and @font

  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Location
    Auckland, NZ
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    css3 and @font

    I have just tried embedding my fonts. I am sure that I had it working in both FF 3.5 and IE 8 but now it only works in FF.

    Code:
    @font-face {
      font-family: Decade;
      src: url(Decade.ttf);
    }
    .quote {
      font-family: Decade;
      font-size:2em;
      line-height:1em;
      text-align: center;
    }
    The site in question is http://www.idop.org.nz/

    From my reading IE 8 supports css3 so I must be doing something wrong.

  2. #2
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    IE does not support TTF, you have to use the special EOT format for it to be able to work properly.

    http://jontangerine.com/log/2008/10/...web-fonts-work

    PS: Are you licensed to use that font online? You need a special online license from the font manufacturer (if they offer one) or you are comitting copyright theft. That is the main problem faced today with using the @font CSS elements, 99.9% of all font's do not allow in their license for online distribution (which this is!).

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Location
    Auckland, NZ
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that. I looked and seem to be fine with the permission.

    I created the eot font and it works fine when put into the format.css file. However then FF won't work. Following an online example I left the format.css with the ttf declaration and included a contional statement in the main index.php

    Code:
    <!--[if IE]>
    <style>
    @font-face {
      font-family: Decade;
      src: url(Decade.eot);
    }
    </style>
    <![endif]-->
    But IE won't work when I do this.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Well why don't you just feed FF/other browsers the style, and then include the IE conditonal comment to set it as the .eot?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Location
    Auckland, NZ
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, That's what I though I was doing above:

    the main format.css as the ttf declaration and in the index.php I have the conditional IE part.

    But it is not working

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Ok so I'm judging by your last post, when you left off you had it working in FF but not IE.

    Does it read the conditioonal comment at all? What kind of IE program do you use? Is it native or did you get it (for example) from multipleIEs?
    If you have a way to get FF or IE working, there is a way to join them together.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #7
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Location
    Auckland, NZ
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Doesn't appear to be reading the conditonal statement. I want it to work for all IEs but then only IE 7+ supports fonts like this (as far as I understand). I'm using IE 8.

    I got FF to work.

    I will look at my syntax again tonight to see if I'm doing something wrong as I've been very busy an in my rush might have made a typo or something... will look tonight when things are quieter

  8. #8
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Location
    Auckland, NZ
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    k... so I am probably going mad.... it works now using the following code... must have had a typo or something....

    Code:
    <!--[if IE]>
    <link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/ie.css" type="text/css" />
    <![endif]-->
    and

    ie.css

    Code:
    @charset "utf-8";
    /* CSS Document */
    @font-face {
      font-family: Decade;
      src: url(Decade.eot);
    }
    Thanks for the help

  9. #9
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Location
    Auckland, NZ
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Aaagh I AM going Mad.

    It appears that

    Code:
    <!--[if IE]>
    <link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/ie.css" type="text/css" />
    <![endif]-->
    is being called by the FF browser

    I've put a red backgound in so that I can see when it's called

    Oh yes I am using FF 3.5

    Code:
    @charset "utf-8";
    /* CSS Document */
    @font-face {
      font-family: Decade;
      src: url(Decade.eot);
    }
    body {
    	background-color:#F00;
    }
    When I have the conditional link it, my font doesn't work for FF as it is passing the eot file.

    BUT why is the conditional css being passed to FF? HELP again
    Last edited by abasel; Sep 9, 2009 at 03:04. Reason: forgot to mention browser version

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You are calling the file twice

    Once in the normal situation and once from within the IE comments.

    Code:
    <link rel="stylesheet" href="/templates/IDOP/css/ie.css" type="text/css" />
    <!--[if IE]>
    <link rel="stylesheet" href="/templates/IDOP/css/ie.css" type="text/css" />
    <![endif]-->
    Remove the first link.

  11. #11
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Location
    Auckland, NZ
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Embarrasing... just saw that too.. cheers


Bookmarks

Posting Permissions

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