Jump to content
hireconrad

Font Weight Issues On Nav Bar

Recommended Posts

hireconrad

Hi,

in Safari, i have noticed that as particular pages load up, the font starts bold (good) and then changes to normal (bad). Some of my pages are fine, some are not.

 

Pages that the font in the menu looks wrong in SAFARI: 

 

http://hireconrad.com/hireconrad/buyers/

http://hireconrad.com/hireconrad/sellers/

http://hireconrad.com/hireconrad/renters/

 

 

Pages that look wrong in CHROME:

 

http://hireconrad.com/hireconrad/buyers/

 

 

everything looks good in Firefox and Opera

 

 

Any ideas whats causing the issue and how to solve?

 

Here are a few images of what I'm seeing:

 

how it looks now:

bad-bar_zps76504592.jpg

 

how it should look on every page:

good-bar_zps0074c2f6.jpg

Share this post


Link to post
Share on other sites
James B

Hi there, @font-face is a css rule which allows you to download a particular font from your server to render a webpage if the user hasn't got that font installed.

 

According the link it looks like you have to enable the font-weight property in the css. Example:

 

@font-face {
    font-family: 'GriffosFont Regular';
    font-weight: bold;
    font-style: bold;}

I've found another solution on the forum that Danny posted, it worked for a client who was having the same kind of issues.

 

body {
-webkit-font-smoothing: antialiased;
}

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
hireconrad

Hi there, @font-face is a css rule which allows you to download a particular font from your server to render a webpage if the user hasn't got that font installed.

 

According the link it looks like you have to enable the font-weight property in the css. Example:

 

@font-face {
    font-family: 'GriffosFont Regular';
    font-weight: bold;
    font-style: bold;}

I've found another solution on the forum that Danny posted, it worked for a client who was having the same kind of issues.

 

body {
-webkit-font-smoothing: antialiased;
}

I tried the 

 

body {

-webkit-font-smoothing: antialiased;
}

 

and it made all the menu font (on all pages) look thin and without bold.

 

 

In regards to the @font-face,

Im using pagelines Lucidia Grand font, so would i need to input that instead of "GriffosFont Regular"?

Share this post


Link to post
Share on other sites
James B

Hi there, yes you'd need to replace the name of the font in the demo with the one you're using.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
hireconrad
Hi there, yes you'd need to replace the name of the font in the demo with the one you're using.

 

I added the following code into my css and it did nothing to fix the issue. Is there something wrong with the way I wrote it?

@font-face {
    font-family:"Lucida Grande","Lucida Sans","Lucida Sans Unicode",sans-serif;
    font-weight: bold;
    font-style: bold;
}

Share this post


Link to post
Share on other sites
hireconrad

Ive also realized that the menu font is not even supposed to be bold (on the pages without the issue the font is not bold). Im not sure what is changing, but it looks like on the pages I'm having issues with, the font css is not applying

Share this post


Link to post
Share on other sites
James B

Each font will render fonts differently unfortunately. You could try using browser specific css to target the pages on the browsers which aren't displaying correctly and try

 

.main_nav ul li a { font-weight: bold;}

A full list of the browser specific prefixes can be found here http://support.pagelines.me/docs/plugins/browser-specific-css/


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
hireconrad
Each font will render fonts differently unfortunately. You could try using browser specific css to target the pages on the browsers which aren't displaying correctly and try

 

.main_nav ul li a { font-weight: bold;}

A full list of the browser specific prefixes can be found here http://support.pagelines.me/docs/plugins/browser-specific-css/

 

Ive tried bolding the specific pages I'm having issues with, however they still dont match up with the rest of my site (as the other pages menu dont have bold either). Also I noticed that the letter spacing is different. It seems to be more of an issue then bolded or not.

Share this post


Link to post
Share on other sites
Danny

Hi,

 

I am not seeing the issue where the upon first load the menus are bold then revert to normal?

 

However, you have two issues from what I can see, in your custom CSS, there is no font-weight: bold and in your @font code, you have font-style: bold. font-style doesn't support bold.

 

http://www.w3schools.com/cssref/pr_font_font-style.asp

 

Therefore, add the following to your custom CSS and it should make your menu items weight bold, as the moment its set to normal.

 

In this code, which you already have:

 

 

 

#page .main_nav li a {
color: white;
padding: 10px 15px;
text-shadow: 0 -1px 0 black;
border: none;
border-right: 1px solid #444;
}

Add 

font-weight:bold;

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
hireconrad

Hi,

 

I am not seeing the issue where the upon first load the menus are bold then revert to normal?

 

However, you have two issues from what I can see, in your custom CSS, there is no font-weight: bold and in your @font code, you have font-style: bold. font-style doesn't support bold.

 

http://www.w3schools.com/cssref/pr_font_font-style.asp

 

Therefore, add the following to your custom CSS and it should make your menu items weight bold, as the moment its set to normal.

 

In this code, which you already have:

 

 

 

#page .main_nav li a {
color: white;
padding: 10px 15px;
text-shadow: 0 -1px 0 black;
border: none;
border-right: 1px solid #444;
}

Add 

font-weight:bold;

I misspoke. The text in the menu is never bold, however looks more bolded then what it currently is in Safari (on those few pages). 

 

What i want is for the font text to look the same on all pages, but for some reason the font on my problem pages looks a lot thinner. The good pages have font that is thicker (however not actually bold). If i manually add bold to the font on my problem pages, the font looks thicker, however still does not match the other pages (due to the fact that the other pages dont have bold menu items either). Im not sure what is effecting (and even how) the font 

Share this post


Link to post
Share on other sites
catrina

For an issue like this, I'm not sure what the workaround would be since it's browser-related, but I would try a different to see if the same issue occurs.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
hireconrad
For an issue like this, I'm not sure what the workaround would be since it's browser-related, but I would try a different to see if the same issue occurs.

 

Im not sure what you mean "try a different"

Share this post


Link to post
Share on other sites
James B

Hi Conrad, I've found this which may be able to help, its looks like something jquery related is affecting the font, the description they have is the same as yours. http://stackoverflow.com/questions/9049524/safari-rendering-page-fonts-thinner-with-jquery-slider-on-page

 

The first answer is the same as the one you previously tried, however there are other workarounds included below it.

 

This could also help - http://css-tricks.com/beefing-up-dull-text-in-webkit/


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×