Font face weight not showing right in FF

  • Resolved fundin

    (@fundin)


    11 years, 5 months 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'); }
Viewing 5 replies - 1 through 5 (of 5 total)
  • Ivo Delin

    (@ivo-delin)

    11 years, 5 months 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

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 5 months 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;
}

    Thread Starter fundin

    (@fundin)

    11 years, 5 months 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

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 5 months 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

    Thread Starter fundin

    (@fundin)

    11 years, 5 months ago

    Thanks Andrew!!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Font face weight not showing right in FF’ is closed to new replies.