I have a problem with fonts, because they don't render same on Windows and on OS X. On Windows, characters are vertically aligned in line, but on OS X, the characters are positioned much closer to top of the line.
I highlighted the text in screenshots so you can see the difference.
I am using font Gotham. Any ideas? Do I have to use browser-specific hacks or is it a font issue?
Link to JSFiddle: http://jsfiddle.net/wewo/myh4amud/
body {
font-family: 'Gotham', Arial, sans-serif;
background-color: #282828;
font-size: 14px;
font-weight: normal;
}
div {
color: white;
font-size: 5em;
padding-top: 15px;
padding-bottom: 6px;
line-height: 1em;
}
<div>3</div>
Thank you!
The problem is in process converting or generating webfont font.
I use tool Font Squirrel for convert correct, with this option EXPERT... :
If don't work with Google Font, download him and send for convert.
Problem with Win Ascent and HHead Ascent fields in font. Windows use Win,
mac - HHead. Use FontForge for edit this.
Related
I made my own icon font and looks perfect in any browser from OS X:
But is shown with a vertical offset in any browser from MS Windows PC:
In this last example (from PC) the glyph appears below its element box (out of its natural box).
Is a span element:
<span class="sin-avatar circle s s-pluma-6"></span>
with a ::before pseudo element:
.s-pluma-6::before {
content: "\EA2F";
}
.s::before {
display: inline-block;
font-family: iconfont;
font-style: normal;
font-weight: 400;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
There is a live example here (scroll to down):
https://stage.soux-calvo.online/
I'm going crazy, modifying CSS in many ways with no success.
Any suggestion will be appreciated. Thank you.
I found the bug. It was in the font build process (with gulp sketch). Some icons, I don't know why, was spoiling the font. Removing that icons, bug fixes.
From the images below, you can see that the font rendering used by safari adds some white lines to some characters. This occurs in Safari for both iOS and Mac. While in the example below it is not as noticeable, in practice it can be quite distracting.
I noticed this happened after I added font-weight: 400; to my text. The reason I added it was to fix another issue by Safari which rendered by font with large kerning between letters see this Stack Overlow question.
This is the entire CSS for the text:
h2 {
font-family: 'My-Font', sans-serif;
font-size: 3.5em;
line-height: 1.2em;
margin-bottom: 0.5em;
text-align: center;
}
Is this another bug in Safari and is there a workaround if so? Thanks.
Some folks recommend
text-rendering: optimizeLegibility;
Other
transform: perspective(1px);
Hope it helps.
My problem is that font-weight in css doesn't apply on serbian latin characters (šđčćž ŠĐČĆŽ) which the font supports. for example:
#header h1{
font-family: 'Open Sans', sans-serif;
font-weight: 800;
color: #FFF;
font-size: 50px;
padding-left: 20px;
padding-top: 20px;
letter-spacing: 1px;
text-shadow:1px 2px 3px black;}
shows all letters bolded except serbian latin characters ON SOME COMPUTERS. It works on mine (win8), but not on two of theirs (win8.1 and winXP). Same HTML, same CSS, all three of us using Chrome and connected to the Internet. Do you have any idea what could it be?
Have you done this? How to add multiple font files for the same font? none of the SVG fonts that I have seen have different font-weights and I've not yet run into directions for creating additional font weights in that font file type. Some font files appear to have font weights, so my guess is that the systems are choosing or ending up with a different font file type.
I hope someone may help me figure this out,
the problem is with a Google WebFont being displayed poorly in Google Chrome (ironic isn't it). Here is a picture of the problem:
And here the link to the WIP Site: http://klok-bremen.de/noire/index.html
I underlined all the problematic letters with red. The letters with problems are those with ascenders. You can see how the O, Q, G, S and C are not positioned how they should be, but perhaps one or two pixels too high.
Now this problem only occurs in Google Chrome. However the Chrome on my Macbook is displaying the Font right. It is just my Windows PC which displays the Font on Chrome like this.
If this is a problem with my computer, it isn't that important, however it would still be nice to know what's causing it.
CSS in question:
.menu-list li {
color: #fff;
font-family: 'Pathway Gothic One', sans-serif;
font-weight: normal;
font-size: 1em;
text-decoration: none;
text-shadow: 1px 1px 1px #000;
text-transform: uppercase;
}
Chrome on Windows always had antialiasing issues.
Try font-size: 1.01em instead of 1em or play with the pixel values until you find something robust.
Example with 1.01em font-size:
I have some buttons my page using a custom font face using the CSS and files generated by the Font Squirrel generator.
When the font's colour is black, they display fine...
However, when I change the colour to something else, the text seems to have a smoothing that bleeds the characters into each other and generally makes the characters look too thick...
I've played around with font-smooth property and a few other things, but have been unable to get it to work...
I don't think it's too relevant but the CSS for these buttons are...
color: #FFFFFF;
display: block;
padding: 1em 0.3em;
position: relative;
text-decoration: none;
z-index: 10;
font-family: BebasNeueRegular,Arial,Sans-Serif;
font-size: 22px;
list-style: none outside none;
text-align: center;
text-transform: uppercase;
The background is a separate element.
How can I get the white text to appear like the black text?
(It may be hard to tell the difference between the two, but my boss insists it is there.)
This worked for me:
-webkit-font-smoothing: antialiased;
Part of the problem is that it's not a particularly well-made font. I concur with #thirtydot's suggestion of text-shadow. A 1px black-on-black text-shadow should thin the font out. Any browser that doesn't support text-shadow will be rendering the font horribly anyway.
And remember that some html elements has bold as default, like h1, h2... When I use font squirrel to generate a font and use it with h1, for example, I always put:
font-weight: normal;