Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jan 2012
    Posts
    40
    Thanks
    8
    Thanked 0 Times in 0 Posts

    @font-face not recognized

    Ok I have my site up so far but the two fonts I used are not showing up. I transferred the fonts and put them in the same folder as my webpages. I also used @font-face in css (styless.css). I'm not sure where I went wrong.

    Website: http://envycosmetics.zxq.net/TestSit...ges/index.html

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Your font-face declaration within styless.css is

    Code:
    @font-face {
        font-family: abeatbyKai;
        src: url('abeatbyKaiRegular.otf');
    }
    
    @font-face {
        font-family: OptimusPrincepsSemiBold;
        src: url('OptimusPrincepsSemiBold.ttf');
    }
    which suggests the font files should be in the same directory as the css file, not the webpages. Also, I'd expect for this to work cross-browser you'll need more than those font files. Try FontSquirrel for more help with generating the right @font-face files.

  • Users who have thanked SB65 for this post:

    kamaro (02-19-2012)

  • #3
    New Coder
    Join Date
    Jan 2012
    Posts
    40
    Thanks
    8
    Thanked 0 Times in 0 Posts
    wow haha silly mistake, thanks tho! With this Font Squirrel, how does it work. The font I used isn't on the site.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,479
    Thanks
    6
    Thanked 981 Times in 954 Posts
    Go to the font face generator and upload your font file(s) – provided they are legal to be embedded with CSS this way. It will also generate all file formats and CSS for you for cross-browser compatibility.


  •  

    Posting Permissions

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