Jump to content

Archived

This topic is now archived and is closed to further replies.

jmad

Font Weight In Browsers inconsistent

Recommended Posts

jmad

I think I posted about this before many months ago but couldn't find the post.  I'm experiencing inconsistent font weights across browsers using DMS more so than other Frameworks or themes.  

 

I've added Montez and Muli to a site like this

 

Montez|Muli:300

 

then I added this to CSS

 

h1,h2,h3,h4,h5,h6{
  font-family: 'Montez', cursive;
}
 
.c-muli {h1,h2,h3,h4,h5,h6 {
  font-family: 'Muli', sans-serif;
    font-weight: 300;
  }
}
 
site is madsky1.wpengine.com

 

In Safari 7.0 on Mac the Muli:300 is much thinner than in Chrome or Firefox.  I tested the same fonts in another theme and didn't get near the amount of difference.  Aren't these fonts handled by the browsers?  What am I missing a step in adding these fonts to DMS or is it somehow rendering them differently?

Share this post


Link to post
Share on other sites
James B

Hi there,

 

Unfortunately not all browsers will support the font weight other than the standard normal/bold versions. See http://www.webtype.com/info/articles/fonts-weights/ which compares the numeric values against the weights for more info.

 

Due to this we've had to add a disclaimer saying it might not affect all browsers  if set through the main typo options - http://screencast.com/t/BhktwllkErDi


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
jmad

Okay.  I'm still confused as to why in another theme I use that I don't experience the same problem or at least not as much of a difference.

Share this post


Link to post
Share on other sites
James B

Using the same font? Some fonts don't support the additional weights, so you could get a really good result with one font and a bad one with another.


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
jmad

Yep.  I've got other more pressing issues. So I'll just let it go. 

Share this post


Link to post
Share on other sites
Danny

This isn't an issue with DMS, the problem is that all browsers have their own predefined styling. The font only supports according to Google font weight 400, which equals normal. If there is no other font weight supported by that font, then the browser uses its own styling. Therefore, as FireFox (Gecko) and Chrome/Safari (Webkit) use different browser engines, they're going to look differently.

Therefore, if you're not seeing this problem is another theme, they're likely using the following, in there custom CSS.

 

-webkit-font-smoothing: antialiased;

 

This should resolve your issue, although the different isn't even really noticeable. You should read this article - http://maxvoltar.com/archive/-webkit-font-smoothing


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jmad

Danny

 

For Montez there is only 400 but for Muli 300 is available in Google fonts so not sure what you mean about no other font weight supported as I was only trying to use Muli in 300.  Regardless thanks for the information and I'll give it a try.  

Share this post


Link to post
Share on other sites
Danny

Well the issue still is a cross browser problem and not a DMS issue.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jmad

Danny

 

Okay so I've spent some time looking at this more closely and something in DMS I think is rendering differently in various browsers.  Below is an example.

 

I'm running madskydesign.com (not in DMS or PL but a different theme).  If you look at the site in Chrome and compare it too Safari there is almost no difference in the fonts.  

 

I've built msdesign.wpengine.com as a test site for DMS and if you compare the Chrome version of it to the Safari version, there is significant differences in the font appearance.  

 

What other css could I add for this  to resolve?

Share this post


Link to post
Share on other sites
jmad

Simon_P not sure I understand what your asking but...

 

Pretty much all text in Safari is thinner than what is showing in Chrome and even more so than from Firefox.  It's more noticeable in headers and body or ul text.  Especially if the text is white.   

 

The fonts are all bolder/darker/heavier in Firefox, slightly lighter in Chrome and then extremely light in Safari.  I actually like how sharp the fonts look in Safari and that they seem thinner but it just needs to be more consistent across the browsers.

 

I'm looking at msdesign.wpengine.com Chrome, Firefox and Safari all side by side and the difference between Firefox and Safari almost makes the font seem to be a different color.  

Share this post


Link to post
Share on other sites
Simon

If you want it to look exactly the same in all browsers you will need specific css for each browser. The pro tools plugin will add css classes to the body element of the page and you can use them to tweak the css.

Share this post


Link to post
Share on other sites
jmad

I had the pro tools plugin and Enable CSS classes active.

 

I used this code to get Firefox and Chrome almost identical.  However Safari is still a bit lighter/thinner how would I modify the code to a make Safari fonts a bit thicker?  Also, since I don't have a windows machine, I have no idea want fonts look like there.  Think I'm probably stating the obvious but most designers/developers are going to want a consistent browsing experience.  I think font appearance consistency is something that should be built into the DMS Framework, then I suppose if a des/dev wanted a font to appear inconsistent then they could handle that as needed.  Again for a premium Framework this isn't something users should have to spend their time correcting.  I would greatly appreciate a fix to this issue.  Should I report it via github to get it on the radar?

 

 

/*Anti Alias*/
html, html a {
    -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}

Share this post


Link to post
Share on other sites
Simon

It isn't an issue, so leave it off github.

 

The tools plugin adds a browser class to the body element of the page, so if you are viewing in safari then just prefix your specific css with 'safari'...

 

for example...

 

html .safari a {
    -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}
 
We cant add browser specific code into core as the first plugin users usually install is a static page cache, which renders the browser specific code useless, as all users will get a cached page.

Share this post


Link to post
Share on other sites
jmad

I don't really understand as I haven't used a static page cache.  I use WPengine as host and they have built in cache...same thing?  Anyway it doesn't seem to bother how the fonts of other themes I run display.   

 

Regardless maybe you guys could provide the browser specific CSS for the four or 5 major browser in your docs that way users can have it available.  I'm still having trouble wrapping my head around this as I've used several frameworks/themes and only ran into this one other time in a "free" theme.

 

This is significant.  Especially if users are supposed to be able to build a site "drag&drop".     

Share this post


Link to post
Share on other sites

×