[Solved] Typekit fonts much bolder in Firefox

[julieslv]

I had the same problem… it seems that 900 is too bold for FF. I reduced this down to 700 and defined this in my font-face rules.

    @font-face{
    font-family:"HelveticaNeueW01";
    src:url("Fonts/HelveticaNeueW01.eot?#iefix");
    src:url("Fonts/HelveticaNeueW01?#iefix") format("eot"),
    url("Fonts/HelveticaNeueW01.ttf") format("truetype"),
    url("Fonts/HelveticaNeueW01.woff") format("woff"),
    url("Fonts/HelveticaNeueW01.svg") format("svg");
    font-style: normal;
    font-weight: 700;
        }

I hope this helps

[seaneking]

This is likely an issue with antialiasing on OSX, and FF allows you to control it via css just for OSX to fix it (similar to the -webkit-font-smoothing property), see this bug for details.

Long story short, add this to your styles and you’ll be set:
-moz-osx-font-smoothing: grayscale;

[peezy]

Thanks, @seaneking… your solution works perfectly!

[kiddotco]

you legend @seaneking! … gave me an almighty headache this one… but now all is good! :)

[Alan]

@seaneking you absolute legend! :D

[ErikGloor]

Experienced the same thing in Win7 using FireFox 48.0. FireFox was smudging out my headings by making them overly-bolded. Top of the cascade was a reset and then added to the universal sheet the following:

h1, h2, h3, h4, h5, h6 {
font-weight:normal;
}

Totally solved the problem.

[Zander]

It also solved a problem I had with Chrome (on MacOSX) which was rendering a font too bold.

[jpkelly]

@seanking This has been annoying me for years! Thank you! Thank you! Thank you!

[jum]

Hi!

I have made a webpage with Adobe Muse, and am experiencing this problem. It seems theres no solution to this within Muse, so I have to edit the CSS. I am not very familiar with CSS though, and I dont want to mess anything up.

So, my white text looks bolder than it should in Chrome, but not in Safari. Probably also in Firefox, I havent tested that. I get that there are some code lines I should add somewhere, but can somebody help me figure out where?

Muse exports a file called site_global.css, I am guessing thats the file that needs to be edited. And I could put it in quite early right, as long as there is no command that contradicts it later on?

The file starts like this:
html{min-height:100%;min-width:100%;-ms-text-size-adjust:none;}body,div,dl,dt,dd,ul,ol,li,nav,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td,a{margin:0px;padding:0px;border-width:0px;border-style:solid;border-color:transparent;-webkit-transform-origin:left top;-ms-transform-origin:left top;-o-transform-origin:left top;transform-origin:left top;background-repeat:no-repeat;}….

Or here: http://codepen.io/jum/pen/bqWKMK

Where do I put the code I need to fix my problem?

And @zander; did the same exact solution work in chrome, or did you change moz to chr or something like that?

[Beverleyh]

> I could put it in quite early right, as long as there is no command that contradicts it later on?

Yes

> Where do I put the code I need to fix my problem?

Anywhere you want in your CSS file, accounting for any overrides in the cascade, as mentioned in your above comment. This includes any additionally linked CSS files or CSS that may have been inserted inline in the document head element. If in doubt, put it at the bottom, although this logic may cause difficulties during maintenance later on if silimar elements/related CSS is scattered throughout the document. It depends how big your codebase is. Unfortunately I can’t comment further because I have no personal experience of the code/structure that Muse creates/exports. Others will have a hard time commenting further too because we don’t know anything about your site or the elements used to create its layout, except for general elements that we could guess at (but nobody likes to guess). Try it and see what happens, and test the result in different browsers to see if it does what you expect for your particular setup in each case. You can help yourself by researching and learning more about CSS though (how to apply it to certain elements, basic selectors, how the cascade works) so that you can more easily work with the tools you have. And you should learn to use the developer console (F12 in most browsers) so that you can test style changes live in the browser.

Good luck with your project.

[Zander]

@jum
Sorry, I don’t remember.

[jum]

Thank you for your answers!

I tried using the developer console, and it works, the live view changes. But when I change the CSS-file in the file manager at the hosts page, nothing changes… I copypasted it, so I am sure Ive written exactly the same, and it is at the end of the same file. Shouldnt it change when I press the save button? I dont see any publish button, so dont know what else to do.

[Beverleyh]

Sorry – I have never used Muse so I cannot advise how to use it, neither can I comment on your web host’s file editor. I would check with them if I were you as they might be able to point you in the right direction; to a user-guide, video help, or forum.

Another thought – maybe files are being cached so that changes do not show for a little while. Again, this is something to ask your web host.

[Author]

Posts