How to fix a blurry bold font on html

Written by debra rigas
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to fix a blurry bold font on html
Blurry fonts lend to blurry vision on a website, but this is avoidable. (Jupiterimages/ Images)

Font usage on websites pose certain problems from time to time. Usually, webmasters choose commonly used fonts like Helvetica, Courier, Arial, Times Roman and similar, which are easy to read. A font choice that is blurred or too bold can cause problems with legibility and readers may sometimes leave the page. To best avoid this, stick to common fonts, or place decorative and speciality fonts into an image instead, such as those used for graphic banners, logos and headers. You can solve image problems within image-editing files, but the HTML coding related to the problematic font is a simple fix.

Skill level:

Things you need

  • HTML coding program
  • FTP or other uploading software
  • Website with hosting

Show MoreHide


  1. 1

    Log on to your website host or server and select the page with font issues. If you have several pages with the same problem, just go through one at a time to correct each one.

  2. 2

    Find your font code. Using your HTML coding program, replace the bad font choice with one of the common fonts. The easiest way to do this is to do a find and replace for the whole page: Search or "find/replace" the words "font="name of font you're using" that isn't working. Replace with "font="better choice."

    Change the size or colour as needed.

    <font face="crazy tree letters" size="5" colour="#FFFFFF">


    <font face="Arial,Helvetica,sans-serif" size="3" colour="#FFFFFF">

  3. 3

    Check throughout the text areas for anywhere the <b> tag shows up. They <b> tag stands for bold, and the </b> is how the code ends. Look on the Web page itself for the bold areas you want to revise. Find those sections in the actual HTML coding. Remove the <b> and </b> tags from any text showing up too bold. Sometimes it has to do with the size of the font. If it is too large, as in <h1>ALL CAPS GIGANTIC</h1>, it could blur, depending on your browser. Simply change to a smaller header size, like h3 or h4.

  4. 4

    Upload all the corrected pages and back them up into your website's files on your computer.

  5. 5

    Review each page with the blurred bold font to be sure you have corrected all the problems. If an area still shows up with the problem, return to the particular Web page and make sure you didn't overlook a <font> or <h1> tag or leave out a closing tag. Refresh the page each time to view the latest corrections.

  6. 6

    Check your browser to see if the blurring and boldness occur on other Web pages -- not your own. If not, you're all set once you've corrected your particular pages. Otherwise, go into "Internet Tools" and "Fonts," then change the font there. Many of these default to Times New Roman, Arial and Courier New. You can reset it to the defaults, or select a different font that will allow you to read all websites.

Tips and warnings

  • If the area in question is a header and the font just isn't working, but you really want to use it, go to Photoshop or a similar image-editing program and create a graphic that is long and narrow and will fit your page. Type with the font you wanted to use, then test how it looks once uploaded as an image file. If it is appealing, keep it as a replacement.
  • HTML font coding may be obsolete soon. Consider learning CSS -- style sheets -- as an alternative.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.