Everything is Bold in my Wordpress site

when in the night I slept everything was working fine in my wordpress website, but now everything is bold all the texts and headings. It is looking very ugly. could not fix this in last 2 Hours.

I’m not seeing the problem you describe.

The first two words (marked up as <strong>) are bold, but the rest is not. It looks quite dark because of the large font size, but it is not bold.

Is there any problem in my browser then? Oh yes you are right sir. In mozilla the fonts are ok. seems to be some issue im my chrome.

  1. Mozilla
  2. Chrome

I’m using Firefox, and it appears as in your screenshot. I think the difference is just in the way that the browsers are smoothing and rendering the fonts. Chrome is certainly darker, but if you compare the first two words with the rest of the text, you’ll see the difference between bold and normal.

Are both on the same OS? There seems to be very little difference for me between Firefox and Chromium, both on Ubuntu Gnome.

everything was working 100% fine in chrome also last night I sleep. I think something has changed in chrome, but ultimately it is looking very ugly. Ir tried disabling all the extension in chrome, but that also could not fix this.

Yes both on same machine/OS. I have installed camtasia and videoscribe software could that be causing the issue?

Also normalize.css is red colored in atiom. could this be red flag.

It seems unlikely. Sorry - I don’t think I can be of any more help.

1 Like

A combination of system restore and reinstalling the chrome worked for me.

1 Like

Just wanted to make this post so that anyone in future who stumble upon this post should know that the installation of camtasia software is causing the issue.

I re-installed the camtasia, and the same problem came again.

2 Likes

That sounds most unlikely to me. I would never suspect an audio / video app to have any effect on how fonts display.
A most peculiar Bug indeed!

2 Likes

1 Like

I took a look at your WordPress page you linked and the reason for the font looking bold to you is to do with the font size and font type. The text size for content on your site is marked as 20px and the font family used is “Source Sans Pro”.

This has nothing to do with other programs installed into your computer. Those may change settings in your computer, but not on websites and browsers. You get what you get from a website. Browsers do have the ability to change appearances of websites to some extent. If you use the browser with its default settings, then it is the website that displays as it does.

I am not sure if you realize this but depending on the font you use, text can look bolder or look very weak.

I used Opera for this. I highlighted some text with my cursor and right-click menu > “inspect element”. The browser has a developer mode feature (or called “developer tools”) that allows you to see the HTML, CSS and Script coding used for that page and element which was clicked. In this case of your page, the information below was found.

See attached screen shot >> http://i1376.photobucket.com/albums/ah34/webdesigner2030/font-size_font-family-WordPress-Site_zpsd44eetw7.jpg

(You can right-click the image at Photobucket and save it to your desktop to take a better view than what they offer).

Look at the screenshot I provided. Look at the right column of coding, bottom portion. The CSS I changed, I boxed it and highlighted it. I changed the text to “Times” and the font in the left window changed to show that font type. Automatically the weight of the font changed to appear lighter.

There is no problem with your font styling, unless you personally don’t like it at all. You can change it within the WordPress theme. Usually the theme provides styling options in the Customizer (see left menu list under “Appearance”). In the Customizer you can sometimes change the font family and see the changes in the same screen before applying it to the whole site.

Another location the theme may provide is sometimes called “Theme Options”, again under Appearance in the left side menu. You need to look around in that spot for any styling options it may provide.

The last place you may need to go to change the default font styling is in the Custom CSS. JetPack provides that. You would need to know the CSS selector that is affecting the font styling and you can find that using the browser’s developer tools. Right click the element or part of the page you want to inspect and right-click, choose “inspect element”. (Note, Windows 10 Edge browser has no such tools, it is just a basic browser).

In your case, the selector is simple,

body { 
font-family: 'Source Sans Pro', sans-serif; 
}

In the screen shot the font weight is controlled by this selector,

main p { 
font-size: 20px;
}

You can change the font size to 18px. Avoid too small sizing of text because of mobile screens. Depending on the font family used, the usual font size good for mobile screens is 18px.

Remember, changing things in the “developer” mode as I did does not change the site, it only changes what is on the screen. You have to use the methods above to change the settings for font family and size for the whole site.

What I suggest is to install a couple more browsers. For myself, I use Windows Edge (default to Windows 10), Chrome, FireFox and Opera. The Edge browser is a very basic browser and does not offer the developer mode. The other browsers do. I suggest this because you can use the other browsers to test the view of your website. If it looks good to you in all the browsers, your good. If any browser shows the site as unacceptable, then you can make changes to the site.

Does all this help?

[off-topic]

It does - just press F12

1 Like

Hi @Novicedeveloper,

I think the case here is that your choosen font-family (Source Sans Pro) is not available to the browser. Looking at your two screenshots, it looks like they are both using the “sans-serif” fallback that often is set different in browsers even on the same computer.

If you want to use a font that’s not in the user’s system you have to provide a link to the font resource in the page head. Please try add a link like the example below in the page head and then see if the browsers display the same:
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro">

Sorry to be so late to the party. :slight_smile:

1 Like

Hey there, Thank you for replying, but the things is that all fonts are available to render to the browser, but as soon as that software is installed the fonts is still there, but everything turns bold. Isn’t this strange? According to the TechSmith this is a known bug, and it happens because at registry level something that should ideally point to the chrome doesn’t point to chrome after the software is installed.

In style.css the font is already called like this →
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');

and it works flawlessly when the software in the debate is not installed, which is the case now.

Please let me know if i am still misisng something?

1 Like

Apparently it was I that were missing some! :slight_smile:

Thanks for the explaining.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.