WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Font face weight not showing right in FF (6 posts)

  1. fundin
    Member
    Posted 1 year ago #

    I'm having issues with font weights being messued up in Firefox. The Post title and links on the left side should all be font weight "Bolder" from my set @font face weight but it won't show in firefox at all. It works great in both Safari and Chrome.

    When I remove my @font face code it seems to "correct" the issue but but doesn't render it very well when i do. Plus I feel like that shouldn't work since it's still the right font.

    I'm building the site out Twenty Ten with child theme Thirty Ten. My guess is maybe there is some CSS parameter overriding my CSS on firefox but I can't seem to find it. I appreciate any help on this. Thanks

    This is a link to the site I'm working on

    @font-face {
    font-family: Graphik;
    font-weight: normal;
    font-style: normal;
    src: url('http://anasanga.se/blog/fonts/Graphik-Regular.otf') format('truetype');
    } 
    
    @font-face {
    font-family: Graphik;
    font-style: normal;
    font-weight: bolder; src: url('http://anasanga.se/blog/fonts/Graphik-Bold.otf') format('truetype');
    } 
    
    @font-face {
    font-family: Graphik;
    font-style: normal;
    font-weight: bold; src: url('http://anasanga.se/blog/fonts/Graphik-Medium.otf') format('truetype');
    } 
    
    @font-face {
    font-family: Graphik;
    font-weight: lighter;
    font-style:italic;
    src: url('http://anasanga.se/blog/fonts/Graphik-LightItalic.otf') format('truetype'); }

  2. Ivo Delin
    Member
    Posted 1 year ago #

    Did you try with:

    font-weight: (normal, bold, 100, 200, 300, 400, 500, 600, 700, 800, 900)

    NOT WITH: lighter and bolder

    http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

  3. Andrew
    Forum Moderator
    Posted 1 year ago #

    Well you only have otf font, you need a variety for a variety of browsers.
    E.g

    @font-face {
    		font-family: 'Lane-Narrow';
    		src: url('/application/assets/fonts/lanenar_.eot');
    		src: url('/application/assets/fonts/lanenar_.eot?#iefix') format('embedded-opentype'),
    				 url('/application/assets/fonts/lanenar_.woff') format('woff'),
    				 url('/application/assets/fonts/lanenar_.ttf') format('truetype'),
    				 url('/application/assets/fonts/lanenar_.svg#lanenar_') format('svg');
    		font-weight: normal;
    		font-style: normal;
    }
  4. fundin
    Member
    Posted 1 year ago #

    Thanks Ivo, that seems to work!!

    Andrew, is that really needed still? granted this is my first time using font face but it seems to work in in different browsers now. If needed, how can I create the different types on fonts? I only have the .otf one

  5. Andrew
    Forum Moderator
    Posted 1 year ago #

    To create the different types of fonts, try a font face generator, whereby you upload an .otf file and the generator generates the other fonts for you.

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

  6. fundin
    Member
    Posted 1 year ago #

    Thanks Andrew!!

Topic Closed

This topic has been closed to new replies.

About this Topic