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 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation @Font-Face fonts disappear in FireFox when used on subpages

    I am using the @font-face property to spice up the appearance of my website headers. They display just fine on the home page when viewed in FF, Chrome, & IE (latest versions).

    The only time my headers don't display the @font-face is when I'm using FF and viewing a subpage on my site (which is inside a folder of the main directory). However, they seem to appear just fine when I view this same page in Chrome & IE.

    I remember somebody mentioning something about how FF will only allow @font-face fonts to display if they're in the same directory or something? Could somebody please help me out with this?

    Here is a simple breakdown of my site structure:
    -------------------------------------------------------
    TheDesignKoop.com
    /css
    default.css
    /type
    BebasNeue-webfont.ttf
    /projects
    project-details-template.dwt
    project1.html
    -------------------------------------------------------
    (Please note that this site has not been uploaded yet, so you won't be able to view it in your browser.)

    I created project1.html from the project-details-template.dwt (Dreamweaver Template). The CSS file is correctly referenced in the Template because everything shows up great except for the @font-face.

    Please let me know, why is FF not displaying the @font-face on my project1.html subpage headers?

    Thanks!

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 725 Times in 719 Posts
    In your @font-face property in your css, how are you referring to the src file? You mighttry making this an absolute reference if it isn't already.

  • #3
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi SB65, thanks for your response.
    This is how it's set up in my CSS:

    @font-face {
    font-family: 'BebasNeueRegular';
    src: url('../css/type/BebasNeue-webfont.eot');
    src: local('☺'),
    url('../css/type/BebasNeue-webfont.woff') format('woff'),
    url('../css/type/BebasNeue-webfont.ttf') format('truetype'),
    url('../css/type/BebasNeue-webfont.svg') format('svg');
    }

    What do you mean by an 'absolute reference'?

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 725 Times in 719 Posts
    An absolute reference starts from the root of your site wherever the calling file is located, as opposed to a relative reference which shows the path to the file from that of the calling file. In your case, assuming the css folder is in the root folder, you could try:

    Code:
    @font-face {
    font-family: 'BebasNeueRegular';
    src: url('/css/type/BebasNeue-webfont.eot');
    src: local('☺'),
    url('/css/type/BebasNeue-webfont.woff') format('woff'),
    url('/css/type/BebasNeue-webfont.ttf') format('truetype'),
    url('/css/type/BebasNeue-webfont.svg') format('svg');
    }

  • #5
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I think I tried doing that, but the problem is that the subpage 'projects1.html' isn't just sitting top level in the root, it's in a 'projects' folder (which is top level in the root).

    So if I used the code you supplied, wouldn't it try to find a 'css' folder within the 'projects' folder?

    & a side question:
    What do those two periods in the start of the reference path mean? Is that telling the reference to start from the root?

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 725 Times in 719 Posts
    The periods are relative, they'll go up a level from the current page - so the target file location will vary dependent on where the cllaing file is located. Using absolute references gets around this, because the root is always the root wherever the calling page is located.

    So the code above will always look for a folder called css in the root, wherever it's called from.

  • #7
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Alright, I have tried that code and it doesn't appear to be working for me. Now, the @font-face doesn't even work on the home page either.

    I have actually uploaded my site online so you can take a look at the HTML and CSS.

    http://www.thedesignkoop.com

    If you click on one of the first 3 projects in the 'Work' section it will take you to the temporary 'project1.html' page that I am having trouble with.
    All images and copy on the site are just placeholders for now.

    I appreciate the time and effort you are putting in to help me

  • #8
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 725 Times in 719 Posts
    That looks fine to me - your font BebasNeueRegular shows up on both the Home page and Project1 page in the menu, using FF3.

  • #9
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hmm. That's odd. I am now on my work computer (a Mac) and it is showing up right for me too in FF. However when I am at home on my PC, it doesn't display correctly.

    What OS are you running and do you think that could have something to do with it? I am also noticing that when I'm viewing my site in FF on my work Mac, the nav buttons at the top (Work, About, Blog, Contact) are flush up against the top of the nav bar, whereas in FF on my PC they are floating in the middle of it like they should.

  • #10
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 725 Times in 719 Posts
    FF3 on Win XP. The Nav buttons are in the middle for me too.

    Hypothesising wildly, do you have the font loaded natively on your home PC - and it's got corrupted somehow?

    Re the Mac difference in the button positioning, don't know, sorry. Something to do with Macs and ttf files? Just guessing.

  • #11
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    It works for me too. Did you hard-refresh on your home PC?

  • #12
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    Wow, well I'm not sure why, but it appears to be working for me now (Firefox on my home PC running Windows 7). I have no idea why, but I'm just going to accept it.

    I did just try reinstalling the BebasNeue font on my computer so maybe you were right in that the file was corrupted on my machine.

    Thanks so much for your help guys!


  •  

    Tags for this Thread

    Posting Permissions

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