Pay money and get answers for your WordPress questions (more info)

Ragged H1 Font

  • SOLVED

Why does my H1 font look ragged and not sharp? [[LINK href="https://accreditedinvestorsolutions.com"]][[/LINK]]

Answers (2)

2013-02-03

Abdelhadi Touil answers:

Your website URL please, and what's your browser?


Lowell Ness comments:

https://www.accreditedinvestorsolutions.com. Same issue on Chrome, IE8 and IE9 (and probably others).


Abdelhadi Touil comments:

I think it's because of the font used in your css file. All title use Cantarell font, I'v searched for it and I'v found it, example on google webfonts:

[[LINK href="http://www.google.com/webfonts/specimen/Cantarell"]]http://www.google.com/webfonts/specimen/Cantarell[[/LINK]]

You can change it by looking in your style file for this code:

h1, h2, h3, h4, h5 #main .comment-title, .four_o_four, .callout-wrap span, .search-title, .callout2, .comment-author-about, .logo-text {
font-family: "Cantarell", "Arial", sans-serif;
}


and delete "Cantarell", part, or replace it with any other font you like, for example "Lucida Grande" used here at wpquestions.com, so the code becomes:

h1, h2, h3, h4, h5 #main .comment-title, .four_o_four, .callout-wrap span, .search-title, .callout2, .comment-author-about, .logo-text {
font-family: "Lucida Grande", "Arial", sans-serif;
}


and it's better to make it bold via font-weight css tag in your style file.
Good luck.


Lowell Ness comments:

I guess you're right. Hard to believe WordPress would include a font selection that doesn't work. Choosing a different font did the trick though. Thanks!

2013-02-03

MDan answers:

Hi,

I think it isn't an issue per say, just a problem with the font being used, which is a Google Font. You could try to change the H1 font and the problem will dissapear. The .css file you need to change is in wp-content/themes/Karma/style.css.

The line you need to overwrite will be:

h1, h2, h3, h4, h5 #main .comment-title, .four_o_four, .callout-wrap span, .search-title, .callout2, .comment-author-about, .logo-text {
font-family: 'Cantarell',Arial,sans-serif;
}


change with e.g.:

h1, h2, h3, h4, h5 #main .comment-title, .four_o_four, .callout-wrap span, .search-title, .callout2, .comment-author-about, .logo-text {
font-family: '<strong>Verdana</strong>',Arial,sans-serif;
}