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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 18
  1. #1
    New Coder
    Join Date
    Nov 2011
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts

    @font-face issues

    I'm not a web designer by any stretch of the imagination, but I operate a horror-themed website as a hobby. I've managed to a lot of minor alteration on my own, but I'm having difficulty with one particular area: a custom font. I have the font on my server, but when I try to implement it on my site, specifically with my menu and title of content, I can't seem to get it to work.

    I've placed this code within my default.CSS. I've verified that the destination is accurate yet I can't use the font on my website. Any help would be greatly appreciated.

    Code:
    @font-face { 
     font-family: feastofflesh; 
     src: url ('http://kingcripple.com/degradationofmorality/fonts/feastofflesh.eot'); 
    }

  • #2
    Regular Coder
    Join Date
    Sep 2011
    Posts
    339
    Thanks
    3
    Thanked 35 Times in 35 Posts
    That can have several causes. If you would have the lot online, that would make it much easier to diagnose.
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  • #3
    New Coder
    Join Date
    Nov 2011
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ud the code you write is the ondt change you have done, you will also need change the font where you want it to be. But a little more detail and it will be much easier to help you

  • #4
    Regular Coder
    Join Date
    Aug 2011
    Location
    U.S.A.
    Posts
    233
    Thanks
    2
    Thanked 48 Times in 48 Posts
    try putting feastofflesh in quotes.
    WordPress Designer and theme developer. KlongDesigns - helping bloggers and non-technical folks claim their space on the internet.

  • #5
    New Coder
    Join Date
    Nov 2011
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Here's my website – it's currently a work in progress: www.kingcripple.com

    I've tried to utilize my custom font, feastofflesh, at the following locations on my website. I've used the code below, but it still doesn't work. I'm not sure what additional information would be helpful in order to solve this problem – I'll provide whatever anyone requests.

    Code:
    .home-title { 
     font-family: 'feastofflesh'; 
    }
    #nav .sf-menu a { 
     font-family: 'feastofflesh'; 
    }
    Last edited by Kingcripple; 11-23-2011 at 06:39 PM.

  • #6
    Regular Coder
    Join Date
    Aug 2011
    Location
    U.S.A.
    Posts
    233
    Thanks
    2
    Thanked 48 Times in 48 Posts
    The eot version of the font only works on Internet Explorer:

    Internet Explorer only supports EOT
    Mozilla browsers support OTF and TTF
    Safari and Opera support OTF, TTF and SVG
    Chrome supports TTF and SVG.

    What browser are you looking at it on? The website you gave did not have the font family applied, so it's difficult to see the problem. since you're using wordpress, can you create a templated page that pulls a different header linked to a different CSS using the font so we can see what code you have?

    Normally when you use @font-face, you need to include all the different variations in order for all browsers to render it correctly.
    WordPress Designer and theme developer. KlongDesigns - helping bloggers and non-technical folks claim their space on the internet.

  • #7
    New Coder
    Join Date
    Nov 2011
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by resdog View Post
    try putting feastofflesh in quotes.
    I tried this but it didn't help.

    Quote Originally Posted by resdog View Post
    The eot version of the font only works on Internet Explorer:

    Internet Explorer only supports EOT
    Mozilla browsers support OTF and TTF
    Safari and Opera support OTF, TTF and SVG
    Chrome supports TTF and SVG.

    What browser are you looking at it on? The website you gave did not have the font family applied, so it's difficult to see the problem. since you're using wordpress, can you create a templated page that pulls a different header linked to a different CSS using the font so we can see what code you have?

    Normally when you use @font-face, you need to include all the different variations in order for all browsers to render it correctly.
    I'm aware that the current font will only work on IE. I would like to get it to work on at least one browser before I move on to the other browsers. I apologize for not having the font applied when you took a look at my website. I took it down to try and work on something else for a little while, and I suspect you looked at my website during this period of time. I haven't applied now and will leave it applied until the problem is resolved.

    Thank you everyone for graciously taking a look at my problem. It's highly appreciated!

  • #8
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    I cannot see the @font-face declaration in default.css.

  • #9
    Regular Coder
    Join Date
    Apr 2010
    Location
    Somerset,UK
    Posts
    138
    Thanks
    10
    Thanked 1 Time in 1 Post
    Interesting thread! Am having similar trouble, so I hope you don't mind me jumping in......

    Am using the font minya nouvelle.ttf which shows up fine in browsers except for in IE. What is the best way around this? I can't find a .eot version of this font and obviously can't change the extension. I have tried some font converters online to convert the .ttf to .eot but the .eot version never seems to work.

    I have tried using the <!--[if IE]> IE only stuff here <![endif]--> fix, with using an image for IE but can't get this to work either (am prob doing it wrong but I don't know)

    Any clues as to what is the best fix for the @font-face not working on a certain browser?

    My site ishttp://www.joho-designs.co.uk/

    Thanks
    Last edited by claire_t; 11-23-2011 at 06:52 PM.
    Hmmmm......scratchy head time......

  • #10
    New Coder
    Join Date
    Nov 2011
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    I cannot see the @font-face declaration in default.css.
    I apologize, I had the wrong URL. Take a look at: www.kingcripple.com

    Many thanks once again!

  • #11
    Regular Coder
    Join Date
    Aug 2011
    Location
    U.S.A.
    Posts
    233
    Thanks
    2
    Thanked 48 Times in 48 Posts
    try removing the space between url and (:

    Code:
    @font-face { font-family: 'feastofflesh'; src: url('http://kingcripple.com/degradationofmorality/fonts/feastofflesh.eot'); }
    WordPress Designer and theme developer. KlongDesigns - helping bloggers and non-technical folks claim their space on the internet.

  • #12
    New Coder
    Join Date
    Nov 2011
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by resdog View Post
    try removing the space between url and (:

    Code:
    @font-face { font-family: 'feastofflesh'; src: url('http://kingcripple.com/degradationofmorality/fonts/feastofflesh.eot'); }
    I removed the space between but it still didn't work.

  • #13
    Regular Coder
    Join Date
    Aug 2011
    Location
    U.S.A.
    Posts
    233
    Thanks
    2
    Thanked 48 Times in 48 Posts
    Oh, it looks like it's an IE 9 issue, as the font renders perfectly in IE 8 and below. Add this to your css:

    Code:
    src: url('http://kingcripple.com/degradationofmorality/fonts/feastofflesh.eot'); /* IE9 Compat Modes */
    	src: url('http://kingcripple.com/degradationofmorality/fonts/feastofflesh.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    Not sure if that will fix it, but at least now you know it's an issue specific with IE9. If you use the font-face generator http://www.fontsquirrel.com/fontface/generator
    to generate all the fonts, you shouldn't have any problems.
    WordPress Designer and theme developer. KlongDesigns - helping bloggers and non-technical folks claim their space on the internet.

  • #14
    New Coder
    Join Date
    Nov 2011
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Okay, it didn't seem to fix the issue, but when I was looking on font squirrel, which I'm familiar with, I believe it says WOFF is compatible starting with IE9. So, I downloaded the kit based on my font, and I've uploaded all of the additional font types. My problem, however, is I don't know what to make of the CSS font squirrel includes in the kit.

    Code:
    @font-face {
        font-family: 'FeastofFleshBBItalic';
        src: url('feasfbi_-webfont.eot');
        src: url('feasfbi_-webfont.eot?#iefix') format('embedded-opentype'),
             url('feasfbi_-webfont.woff') format('woff'),
             url('feasfbi_-webfont.ttf') format('truetype'),
             url('feasfbi_-webfont.svg#FeastofFleshBBItalic') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    It's my understanding I can change the "font-family" to whatever I want, in this case, feastofflesh, which is in line with the rest of my CSS specifications. I also assume I have to identify the URLs to the four font files. Is my understanding right? If so, I've added the following to my CSS with no change:
    Code:
    @font-face {
        font-family: 'feastofflesh';
        src: url('http://kingcripple.com/degradationofmorality/fonts/feastbi_-webfont.eot');
        src: url('http://kingcripple.com/degradationofmorality/fonts/feasfbi_-webfont.eot?#iefix') format('embedded-opentype'),
             url('http://kingcripple.com/degradationofmorality/fonts/feasfbi_-webfont.woff') format('woff'),
             url('http://kingcripple.com/degradationofmorality/fonts/feasfbi_-webfont.ttf') format('truetype'),
             url('http://kingcripple.com/degradationofmorality/fonts/feasfbi_-webfont.svg#FeastofFleshBBItalic') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    As always, many thanks to those who read and reply.

  • #15
    Regular Coder
    Join Date
    Sep 2011
    Posts
    339
    Thanks
    3
    Thanked 35 Times in 35 Posts
    Beats me. I checked the path and the presence of the font files, and they are OK. And the only thing I see wrong in your code is the 'FeastofFleshBBItalic' in the svg line, which should be 'feastofflesh'. But the rest seems OK.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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