SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Thread: css3 @font-face

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Mar 2011
    Posts
    146
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile css3 @font-face

    hi new to css3

    i cant see why this wont work

    *the font is in the root folder,
    *The font is otf and compatible

    I have suspisions about the url reference

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="joe.css" type="text/css" media="all" />
    </head>
    <body>
    <div class="pic">
    why wont this work
    </div>
    </body>
    </html>
    --------------------------------------
    @font-face
    {
    font-family: Chunkfive;
    src: url ('Chunckfive.otf');
    }

    .pic
    {
    font-family: Chunkfive.otf;
    }

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    You need different versions of a font for different platforms. So there's a lot more code and a few fonts needed to make this work. You can download the necessary font formats and code from here:

    http://www.fontsquirrel.com/fontfacedemo/ChunkFive

    Code:
    @font-face {
        font-family: 'ChunkFiveRegular';
        src: url('Chunkfive-webfont.eot');
        src: url('Chunkfive-webfont.eot?#iefix') format('embedded-opentype'),
             url('Chunkfive-webfont.woff') format('woff'),
             url('Chunkfive-webfont.ttf') format('truetype'),
             url('Chunkfive-webfont.svg#ChunkFiveRegular') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    The Font-squirrel site is a great @font-face resource.

  3. #3
    SitePoint Zealot
    Join Date
    Mar 2011
    Posts
    146
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    so ichecked out that squirrell site

    I am i right in thinking that to call a font in my css i need to have uploadeded it to that site???

  4. #4
    SitePoint Zealot
    Join Date
    Mar 2011
    Posts
    146
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    TehYoyo

    thanks for you help.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by minusten View Post
    am i right in thinking that to call a font in my css i need to have uploadeded it to that site???
    No, you upload the fonts that they supply to your own site, and then link to them in your CSS file. Simply modify the code I posted above to point to the location of the font files. If you place the fonts in the same folder as your CSS file, you can leave the links untouched. Just upload the fonts, add the above CSS to your CSS file, and then call the font by the font name on any element that needs that font, as TehYoyo said.

    E.g.

    Code:
    .pic {font-family:ChunkFiveRegular;}

  6. #6
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    In reference to your specific code (from my limited knowledge of the @font-face (which is actually not CSS3))...

    When defining the font-family in the div with class "pic", you don't need the '.otf'.

    It should look like:

    Code:
    .pic
    {
     font-family:Chunkfive;
    }
    That should make it work.

    As Ralph said, you need to define it for multiple web browser supports.

    I know that Google Web Fonts (the resource that I use) and, now, Font Squirrel are both excellent for automatically providing the code for you so you don't have to worry about .otf, .ttf, .eot, .woff. and .svg.

    ~TehYoyo

    Note:

    It's cool to see someone who formats their css the same way I do

    It's normally frowned upon as the web standard is to format as such:

    Code:
    .pic {
    font-family: Chunkfive;
    }

  7. #7
    SitePoint Zealot
    Join Date
    Mar 2011
    Posts
    146
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    okay so i have a better understanding now

    when i generate a font kit

    what is all that webfont stuff in the code mean
    i understand the differnet formats for different browsers etc.

    Hypothetically why couldn't i just design for one browser?

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by minusten View Post
    okay so i have a better understanding now

    when i generate a font kit

    what is all that webfont stuff in the code mean
    i understand the differnet formats for different browsers etc.

    Hypothetically why could i just design for one browser?
    We cross-posted, so see my reply above.

    The webfont stuff has been worked out as the most reliable way to get @font-face working in the current environment. Designing for one browser only is not much use in general, but you can do it.

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,599
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by minusten View Post
    Hypothetically why couldn't i just design for one browser?
    You can only design for one browser, realistically, if you are doing an intranet (company website)
    Always looking for web design/development work. Willing to do it cheap to build portfolio!


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
  •