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 7 of 7
  1. #1
    Regular Coder
    Join Date
    Sep 2011
    Posts
    265
    Thanks
    49
    Thanked 1 Time in 1 Post

    CSS font works in Chrome, not in Firefox/Opera

    Hi. This site has CSS:

    Code:
    .main-navigation li {
    	font-family: 'MyriadPro-BoldCond', Arial;
    	font-size: 12px;
    	font-size: 0.857142857rem;
    }
    It displays as intended in Chrome, but the Myriad Pro Bold Condensed font does not display in Firefox or Opera.

    Can you see why?

  • #2
    New Coder
    Join Date
    Jan 2012
    Posts
    36
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I'm using Chrome and I'm getting what looks like Arial (I checked your font here http://fontzone.net/font-details/MyriadPro-BoldCond/)

    Have you tried embedding the font using @font-face rule?

  • #3
    Regular Coder
    Join Date
    Sep 2011
    Posts
    265
    Thanks
    49
    Thanked 1 Time in 1 Post
    I've tried that, following instructions here, but this has broken the page layout in Firefox and IE8.

    Chrome and Opera are not broken, but they don't display the font I have uploaded.

  • #4
    Regular Coder
    Join Date
    Sep 2011
    Posts
    265
    Thanks
    49
    Thanked 1 Time in 1 Post
    Nothing stand out, gingerbread?

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,696
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    Just for the records: Myriad (Pro) is a licensed font and not allowed to be embedded with CSS in such a way that the source files can be downloaded (and they can if you upload them to the server and reference them in the stylesheet).

    Now, as to the differences: I don’t know if and how this still applies but I remember Webkit browsers using PostScript font names while others use the normal names. Also http://rachaelmoore.name/posts/desig...-family-stack/ might be an interesting read.

  • #6
    Regular Coder
    Join Date
    Sep 2011
    Posts
    265
    Thanks
    49
    Thanked 1 Time in 1 Post
    Thanks for the heads up RE: licensing. I will discuss that with the client.

    I ended up using this generator. The broken page layout in IE & Firefox has been resolved.

    However, Firefox, IE & Opera still do not display the font in the main navigation properly.

  • #7
    Regular Coder
    Join Date
    Sep 2011
    Posts
    265
    Thanks
    49
    Thanked 1 Time in 1 Post
    The filenames on the server had capital letters, while the CSS reference to the files did not contain capital letters. /wince


  •  

    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
    •