Web fonts displaying bolder in browser

Hello!
I am working with web fonts (Abel and Lato, namely, but have noticed the issue with others).
The way the fonts display in Muse is different from the way they end up displaying in the browser, whether I use "preview page in browser" or I export to HTML.
The fonts end up being bolder, on all browsers I have tested.
Is there a way to prevent this from happening, and make sure the end results is consistent with what is created in Muse?
See the image attached for a comparison.
Thank you!

I would also like to know why this happens.

Similar Messages

Firefox 14.0.1 @font-face displaying most web fonts in bold, even though it works fine on Windows FireFox, IE9, Chrome, and Safari

Have been working with a web site and half of the @font-face web fonts have turned to extreme bold only on Firefox 14.0.1 for Mac OS X, they work fine on windows versions of firefox and all of the other browsers.
My firefox updated a couple days ago, which is when I noticed the problem.

You can do a check for corrupted and duplicate fonts and other font issues:
*http://www.thexlab.com/faqs/multipleappsquit.html - Font Book 2.0 Help: Checking for damaged fonts
*http://www.creativetechs.com/iq/garbled_fonts_troubleshooting_guide.html
You can check the <b>gfx.downloadable_fonts.*</b> prefs on the <b>about:config</b> page.
*http://kb.mozillazine.org/about:config

Problem with Web-Fonts displayed on Windows PCs?

Hi,
I am creating my first site with Muse, and am having problems getting the web-fonts to display correctly on Windows computers. This happens with both Chrome and IE, however you can see the rendering is much worse in IE. On my Mac (that I'm creating this on, the fonts all display perfectly).
This consistently happens across all web-fonts, currently it is using 'Comfortaa'. There are some design inconsistencies on the website still - it's a work in progress! The temporary Business Catalyst site is http://levante2.businesscatalyst.com.
Shots from the Windows PC:
Chrome on Windows (hard to see the imperfections given the only thing I have to save a jpg is MSPaint on this PC and the compression looks poor anyway) - effectively the problem is that lines are jagged rather than smooth:
IE8:
Strangely, I did some playing around with this over the weekend, and now there is one set of headers (on the 'Food' page), though I'm not entirely sure why this is ok and the rest are not?
IE8, Dark green on light green header is correct:
Any help would be massively appreciated! I'm tearing my hair out.

I think what you're seeing is simply the normal (if unfortunate) variation in font rendering in different browsers and on different operating systems and OS versions. There's a multi-post blog on the Typekit site that describes all the variations caused by different rendering systems across browsers and OS'es <http://blog.typekit.com/2010/10/21/type-rendering-web-browsers/>.
Short of converting the text to images (which has many disadvantages versus live text), I'm not aware of any way to avoid these variations.

WebHelp Font Displays Incorrectly in Browser

Using version X5.0.2
Generated WebHelp and uploaded files from SSL! folder to
client's FTP site. When they upload files (all files from the SSL!
folder), the Help text font displays as Times New Roman. However,
the style sheet I used to create the Help set font type at Tahoma.
Also, I'm not sure why, but when I generate the WebHelp, two style
sheet files appear, one named MS_Help.css and the other named
MS_Help_ns.css.

Hello MaLoCo123 -
Re: two style sheets - correct and normal (one for IE and one
for Netscape).
As to the displayed font, not your fault UNLESS you didn't
follow your agreed upon project standards. This is user (client)
setting dependant.
If I opened your Webhelp from my home I would not get what
you want because I don't do Windows and I don't have Tahoma on one
of my Linux boxes (the one I would use to view your project).
I would see what I specify in my browser preferences
regardless of what you wanted, even on a Windows box.
Regards,
GEWB

Safari (web) Font Display NIGHTMARE %= P

This call for "HEEEEELP" might be better placed into the Support section for "Fonts" but, here goes...
Safari (as well as all other browsers i have, but dont often use, here on my G4 laptop) started, just this morning, showing the nuttiest font for portions of each and (darn near) every web page i browes to.
I hope i can post the screen-shot of it here to this forum but dont know if i can. Perhaps it doesn't matter. Needless to say i can OVER-ride it by choosing, if prefs, to force my own font choices to overide those of each website i visit but that's no fix, no fun, and no solution for what i am suffereing here.
Please help!
Thanks
David
[email protected]
PS: my suspicion is that it has to do with having imported a whole bunch of fonts off and older back-up archive from my g-3 but how that = this prob i have no idea.... i mean i already had a TON of fonts (standard and "nutty") installed/running on my system. ???

Interestingly enough: this FONT problem prevades also my Apple EMAIL application....but WHICH font or what type of font is it that is now being substituted for this wacky one?!?!
Could i just use Font Book to find THIS font that is being substituted and just delete it? What are the websites and the emails "pointing" to in my system fonts to get this crazy result?...and what were they "pointing to" before such that it always looked fine?
AAAAaaargh!
little help would be SO appreciated!

Font Display Size in Browser

Using the increase font function in Firefox, the fonts on my website increase in some text boxes and not in others, and I can't figure out for the life of me why.
All of the text is in various text boxes, yet text size in some boxes increases while text size in others does not. As far as I know, I created all these boxes in the same manner.
What gives?
I would like to do one of two things: (1) either fix the font sizes in EVERY text box (so it does not react to increase/decrease commands), or (2) make the text in ALL boxes increase/decrease, with the text boxes stretching to accommodate it.
I can't find anything about this in iWeb help.
Help!

In Firefox, text entered in a text box without a shadow etc. will increase/decrease. Text that is converted to a graphic, such as that typed in a shape, will not.

How to use Adobe Edge Web Fonts correctly

I am a Dreamweaver newbie and am trying to learn how to use it through the tutorials. I am stuck at part 3 trying to use Adobe Edge Web Fonts correctly in my web site. As far as I can tell I have followed the instructions in the tutorial correctly, but the font style effect does not show up on my site. I am working on a Windows 7 machine and using Dreamweaver 5.5. I have copied and pasted the javascript into the correct spot in the head of the index.html page as well as included the font-family name in the CSS file and saved the whole smash. The source code for my index page looks exactly like the sample in the tutorial, and I have tried to view my site in my browser, but no dice. Doesn't display the Edge Web Font style in the web page. I believe I've done everything according to the directions, but I suppose I've missed some small detail. Any suggestions greatly appreciated

You need to add a <script> to the head of your documents like the example below. In my example, I'm using all of the aguafina-script and league-gothic fonts.

<script src="//use.edgefonts.net/aguafina-script:n4:all;league-gothic:n4:all.js"></script>
CSS:
     h1 {
     font-family: league-gothic, sans-serif;
     font-weight:bold;
     color: #639;
     font-size: 250%;
A simple way to get the correct codes is to go to Adobe Edge Web Fonts and select the font you wish to use.
https://edgewebfonts.adobe.com/fonts
NOTE: You won't see the custom web fonts displayed in Design View, Live View or when previewed locally unless you use a local testing server. An easier way to test is by uploading the page to your remote server.
Hope this helps,
Nancy O.

10.4.7 Font Display

Since updating to 10.4.7 I've noticed that fonts displayed on my browser seem a little chunkier and fuzzier than usual. I've checked both Mozilla Firefox and Safari and it's the same.
Has anyone else had this issue - or maybe know how to resolve it? So many sites now seem to use a bolder, fuzzier font it's really quite annoying.

This is definitely sounding like a 10.4.7 induced problem. I first noticed it on starting a PowerPoint document on a train en route to a meeting, and then having to sit through 20 minutes of clicking OK as it reported how DOZENS of my fonts were corrupted and should be removed. Since then I also noticed that Mail's default font, and those in many other programs, had changed to a blockier or harder to read font. I came home, and quietly dragged the Fonts folder from my external cloned backup and did a restart. No joy, the problem remained. I started Word and it too reports the same fonts as corrupted, though the Fonts folder was copied from the external drive. Something in 10.4.7 either changed how applications access some fonts or did something else to them.
Apple's updates are getting buggier every time, more like Windows.
Imran

Incorrect font display in pdf document(web view)

Adobe helpers,
I am encountering a very peculiar problem with incorrect display of fonts in pdf documents when viewed in a web browser. Briefly, the problem typically affects the first page of a pdf document, the font being displayed as an unidentified mix of large and very small, skinny type. Other pages may or may not be affected, and if one back-clicks to the previous page the text often displays the correct font, so the problem is in some (but not all) cases non-persistent. The problem however is resolved completely if I uncheck the 'display pdf in browser' option under edit>preferences in adobe reader. Fonts I use include Arial, Cambria, Franklin Gothic Book, and Garamond; as straight-up pdfs, the documents look fine. FYI, I have Adobe reader X 10.0.1 (Win 7) and 9.0 (Win XP sp3) installed on two different machines. Firefox 3.6 and IE9 are equally at fault. FWIW, all the pdf documents begin life as MS Word or Publisher 2010 documents, which are converted to pdf within these applications before publishing to web. Since I can't control how people choose to view web pdfs, I'm concerned that display of the prone documents is impaired when viewed in a web browser.
Not sure if this is a reader, browser, or distiller problem but this seems a logical place to start looking for answers. Any thoughts?
Thanks!

I've also had problems printing with Reader X.
When printing an attachment from an email in Outlook, if I don't open the attachment first, sometimes it doesn't print correctly as everything shows with the following number or letter. Example 12345 will print as "23456" and invoice will show as "jowpjdf". Even if I open the attachment, sometimes it will print the first page ok, but the next pages will "mppl mjlf uijt".
Never had this problem with previous versions.

Web Kit Font Display Problem with "BEBAS NEUE"?

Since today font "Bebas Neue" is not displayed correctly.
Online connection is ok. Font is displayed only when published.
Thanks for help.

I tried that temporary solution but, in my design, I use boxes and triggers etc. and since the "replacement" font for the Bebas Neue is so different from the original, it somehow effected my design (white rectangles under the boxes).
The first image: Font uploaded manually, hence rendered as image, and the contour is not good. (Look at the letter A) (partial screenshot from browser)
The second image: The font is Bebas Web Font(!) in Adobe Muse (partial screenshot from adobe muse)
The third image: Font left as is; Bebas Web Font published as it is in the second image, displayed correctly as font BUT there is a white rectangle under the box. (partial screenshot from browser)
By the way I am using Macbook Pro, Mac OS X 10.9.2, Adobe Creative Cloud Single Edition (Muse CC v7.2 Build 232). Yesterday I worked with the same design without any problems. Nothing updated since then.

Font display in design view is wrong / browser displays it correctly

The links I place on my webstie pages display with the wrong (too large) font in design view but when the page is viewed in a browser, the links are displayed correctly. I have CSS entries in place that control link behavior and display and they work just fine in a browser but in design view, the link displays as a larger font than it should. I make all of the links bold. If I put a "class= " specification inside the <a> tag, then the size is right but if I then make the text bold, the size is once again displayed too large. If the text is not inside the <a> tag and it it's part of <p class="..." and I make it bold, it displays as bold and as specified by the class..
In other words
<p class="class1">text1
<strong><a href="reference">text2</a></strong>
</p
Tthe size of text2 is always too large in display mode but is correctly displayed in a browser.
Any ideas?
B. Berkov

Good point ... I inherited the code and CSS and changed a couple of 10pt to 12px so changing the CSS for links to 12px instead of 10pt will probably fix it. Still, I would have thought that design view would match what's seen in the browser regardless.
Thanks,
B. Berkov

Since I installed Helvetica Black, all fonts display in bold, but when I uninstall it, they're fine again.

I've seen many other people having issues with all fonts displaying in bold with the latest Firefox update. For me, the update did nothing, but when I installed Helvetica Black to my computer, many fonts on the web show up in bold where they shouldn't.
I have no problems with any of my other Helvetica weights being installed, just Black.
As a graphic designer, I want to have the font, but I also want to see all the websites with the fonts they intended to use, rather than a default font. Is there any kind of add-on or fix I can use so that I can keep websites in their own fonts, AND have Helvetica Black installed?
Other details:
I have the latest Firefox.
I'm on Windows 7.
4 of my Helvetica weights are fine, the Black is not.

Hi there - I'm having similar bold text issues with a customer's instance of Firefox 5.0.1 running on Windows 7, Home Premium, SP1 on a Lenovo laptop. There are two issues to be exact:
# text that is supposed to be normal weight appears bold
# some text has an incorrect amount of spacing (padding/margin) around it
These symptoms appear only on this one machine and appears to be fine in Firefox 5.0.1 across at least 3 other machines running Win 7 as well as all other browsers (IE, Chrome, Safari) we've tested in across a variety of platforms.
I've attached an image with a side-by-side comparison of the normal view next to the broken view as it appears on this specific machine.
I've tried unchecking the hardware acceleration option and restarting Firefox - did not work.
I've also tried running Firefox in Windows XP compatibility mode (as suggested here: http://www.groovypost.com/howto/how-to/repair-the-google-and-gmail-bold-font-issue/) - did not work.
Any advice would be greatly appreciated!
Thanks.

Fire fox displays web fonts correctly but when i try to print it the webfonts are not identified by the firefox so in print preview it doesnot show web fonts

i am using web fonts in my web page, this web fonts are for displaying bar-code, they seem to work properly when seen while browsing but when i try to print that displayed bar-code it is unable to recognize the web fonts.

What you are experiencing is 100% related to Malware.
Sometimes a problem with Firefox may be a result of malware installed on your computer, that you may not be aware of.
You can try these free programs to scan for malware, which work with your existing antivirus software:
* [http://www.microsoft.com/security/scanner/default.aspx Microsoft Safety Scanner]
* [http://www.malwarebytes.org/products/malwarebytes_free/ MalwareBytes' Anti-Malware]
* [http://support.kaspersky.com/faq/?qid=208283363 TDSSKiller - AntiRootkit Utility]
* [http://www.surfright.nl/en/hitmanpro/ Hitman Pro]
* [http://www.eset.com/us/online-scanner/ ESET Online Scanner]
[http://windows.microsoft.com/MSE Microsoft Security Essentials] is a good permanent antivirus for Windows 7/Vista/XP if you don't already have one.
Further information can be found in the [[Troubleshoot Firefox issues caused by malware]] article.
Did this fix your problems? Please report back to us!

Dreamweaver fonts displaying as bold in many browsers...

I am going crazy trying to figure this out - I have no properties in my style sheet or within the seperate .html pages set to bold and have added properties to try to compat the issue such as; font-weight: normal and font-style: normal; but when I preview the code in my browsers (safari and firefox) the fonts look bold. I have also looked at my co-workers computer who is also on a MAC and the same issue is displaying on his. However when I preview on an older IE browser on a PC the font is not bold.. I have tried using different fonts and all are appearing bold so I don't think it is an issue with my font library... any insight?
Thanks!
www.jbsavant.com/test/

Did the opacity trick not work for FireFox?
Bummer.
It appears to be a known issue with Mac browsers and "certain fonts". I haven't been developing on a Mac for a few years though and haven't noticed it until just this week with a google font I added to a personal site. There doesn't seem to be a good listing of those "certain fonts", so figuring out which ones will display faux-bold is pretty much trial and error.
DW doesn't seem to use the same font rendering system as the browsers, so it doesn't seem to show there. If you'd like to know more, you can do a google search for "Mac Font Smoothing". Maybe there is another trick out there to fix FireFox.
Let us know if you find one.

Web fonts are not displaying

Hello -
For some reason my Firefox install is not displaying web fonts properly - It may have been doing this before the 13 upgrade. Doesn't matter if it's @font-face or Typekit or whatever, it's just goes down the fallback list until it finds one that I have installed on my computer.

Is downloadable fonts enabled?
You can check the <b>gfx.downloadable_fonts.enabled</b> pref on the <b>about:config</b> page.
*http://kb.mozillazine.org/about:config.
Any errors about loading the font file in the Web Console (Web Developer > Web Console;Shift+Ctrl+K)?
*https://developer.mozilla.org/en/Tools/Web_Console

Web fonts displaying bolder in browser

Similar Messages

Maybe you are looking for