I'm trying to get around a irritating issue with fonts. Specific Googles Roboto font.
The thing is that the font appear to be stronger (fat) on dark backgrounds in my tests (Chrome 62.0.3202.62 on OSX Sierra 10.12.6) while it play nice on googles dark font edition (https://fonts.google.com/specimen/Roboto?selection.family=Roboto:300,500,700 - Choose dark background).
Screenshot of my appearing:
vs Google appearing (its the light)
I started to belive there was something wrong with my rendering, but after trying this on several machines with different setup, its all the same.
Do anyone have any idea of how to fix this? Or an explanation of why its different between Google and my test.
Url for testing:
https://jsfiddle.net/fb3umv2e/
.btn {
display: inline-block;
padding: 7px 8px;
text-align: center;
background: #fff;
color: #000;
font-family: "Roboto";
font-weight: 300;
text-decoration: none;
font-size: 20px;
}
.btn.inverted {
background: #222;
color: #fff;
}
Best regards
Richard
Try adding these to your button styling :)
-moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased;
Related
I have a logo on my site that uses the Google font "Cinzel". When I view the site on Firefox or on an iPhone, the two centre letters overlap. How could I prevent this overlap from happening?
Note: I have already tried setting letter-spacing with no change in the centre letters.
Related CSS:
.brand {
font-family: 'Cinzel Decorative', serif;
text-decoration: none;
text-transform: lowercase;
}
.home{
font-size: 1.5em;
display: inline-block;
height: 60px;
padding: 16px 0px 4px 0px;
margin-top: 1px;
color: #000000;
}
Chrome:
Firefox/iPhone:
Thanks for any help!
Unfortunately I wasn't able to correct the issue in Google Web Fonts. I resorted to using a webfont kit from FontSquirrel instead and there seems to be no issue. http://www.fontsquirrel.com/fonts/cinzel
Text is distorting and becoming unreadable, but it is happening only in Windows browsers, both FireFox and Chrome. I am trying to reproduce the problem with a sample of the text with the styles in effect on the distorted text, but the sample looks ok.
Link to text that is distorted on windows Firefox and Windows Chrome:
http://dansdemos.info/prelaunch/hitch/20140219_1735/bk_promos/mergecopy
You've already invested in creating a great book...
Link to sample that is supposed to have same styles, but does not distort in windows Firefox and Windows Chrome:
http://dansdemos.info/prelaunch/hitch/20140219_1735/bk_promos/hammeredShitTextProblem
The styles in effect are:
p {
color: #777777;
font-size: 14px;
letter-spacing: 0.1px;
line-height: 23px;
width: 307px;
font-family: open sans,arial;
}
* {
border: 0 none;
margin: 0;
outline: 0 none;
padding: 0;
text-align: left;
}
*::-moz-placeholder {
color: #666666;
font-size: 16px;
font-weight: 300;
}
Any ideas on why the text is distorted in Windows only? And why it is not distorted in the sample with the same styles?
I apologize in advance for this question but it is bugging me and I have not found a solution.
When I view my site tagline in IE the text looks very smooth and sharp but when I view it in Chrome the text has rough looking edges on it. Is there a way I can fix this so that the text looks professional and sharp in chrome as well.
www.jobspark.ca is the website and below is my css
#banner-tagline {
color: #FFFFFF;
font-size: 48px;
font-weight: 500;
position: relative;
text-align: center;
z-index: 4;
top: 50%;
font-family: HelveticaNeueW01-55Roma, Helvetica, Arial, sans-serif;
line-height: 40px;
text-shadow: 0 2px 4px #000;
Thanks for your time
This is not a bug and it is the expected behavior beacuse of the way text-shadow is handled in Google Chrome.
Check the following links to get more information.
http://thomasshields.net/article/3
Font Smoothing Techniques? text-shadow rendering differently in Chrome 14.0.833.0 or higher
Hope this really helps you
If I add the following Google Fonts in the head tag of the document
<link href="http://fonts.googleapis.com/css?family=Muli|Dosis:500,400|Open+Sans" rel="stylesheet">
Bootstrap icons (Glyphicons) are positioned slightly up, as You can see at this link: http://www.acarrilho.com/wp-content/uploads/2012/07/icon_off.png
How can I solve this issue?
I don't think the problem is about Google font but instead the combination of font-size and vertical-align. The default font-size of icon's in Bootstrap is 14px and in the declaration for icon- we have vertical-align: text-top;, see code below.
[class^="icon-"],
[class*=" icon-"] {
display: inline-block;
width: 14px;
height: 14px;
margin-top: 1px;
*margin-right: .3em;
line-height: 14px;
vertical-align: text-top;
background-image: url("../img/glyphicons-halflings.png");
background-position: 14px 14px;
background-repeat: no-repeat;
}
In your "Dashboard" button it seems like the font-size is larger than 14px, maybe 22px? One solution may be to create an alternative/extension selector for your button and change vertical-align to baseline:
[class^="icon-"] .my-class,
[class*=" icon-"] .my-class {
vertical-align: baseline;
}
But remember that the visual center depends on the word; "Dashboard" has for example no descenders (see more about the anatomy of typography). If baseline don't looks good try some of the others, see specification here.
The suggested solution from #user1751766 is also possible. But I suggest to .my-class to scope this alternative declaration from Bootstrap's default declaration.
Go to Bootstrap.css
.glyphicon {
position: relative;
top: 11px;
display: inline-block;
font-family: 'Glyphicons Halflings';
-webkit-font-smoothing: antialiased;
font-style: normal;
font-weight: normal;
line-height: 1;
Mess with top until it lines up the way you like. 11px worked for me on the heart, but it might depend on which icon / how you're trying to use it. Just tinker until it looks good.
This has worked well for me:
span.glyphicon {
vertical-align: middle;
margin-top: -5px;
}
I've used CSS like this with Bootstrap in the past:
[class^="icon-"] {
margin-top: 3px;
}
Just play with the margin-top until it looks right.
Good luck!
My CSS for the website all looks fine in Firefox but in both Chrome and Safari, my fonts are coming out looking black color instead of the grey color as is in Firefox.
Why might the fonts/color be different in Safari and Chrome - it looks like bold black.
Header style I am using within my content div, i.e.:
#content {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
color: #333;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #990;
border-bottom-color: #990;
border-left-color: #990;
padding-bottom: 10px;
padding-right: 10px;
padding-left: 10px;
background-color: #FFF;
width: 973px;
text-align: left;
display: block;
background-image: url(images/bgcontent.jpg);
background-repeat: repeat;
}
h1 {
font-family: "Lucida Grande";
background-color: transparent;
height: 20px;
width: 650px;
color: #FF9904;
font-size: 36px;
text-align: left;
float: none;
vertical-align: top;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #999;
letter-spacing: normal;
margin: 0;
padding: 0.5em 0;
}
I also found this link relating to Google Chrome, i.e about using:
#charset "xxx"
http://www.google.com/chrome/intl/en/webmasters-faq.html#fontspecs
I just checked my computer, and there appears to be no difference in color between Firefox and Chrome. I am running Windows (for both of those), and it should be noted that there will always be a difference in color between Macs and PCs as they are calibrated with different gamma values. Read more about gamma stuff here, though note that you can't do much about it from a CSS perspective.
Another possible problem is that it could be just your computer... have you tried this issue on multiple computers? You can always try using a tool such as Browsershots or Browserlab.
Finally, it's possible that there is some relevant code that is triggering some cross browser differences.... is this all of your code or is there more CSS somewhere? Can you provide a live link to the page you're having problems with?
Does it also happen if you make them a color, for example red? If it's not, then it's just the anti aliasing of webkit which is more agressive.
But if it still happens, you can check with the chrome inspector and firebug if the way safari/chrome and firefox interpret the CSS is different. Which color selector they choose
The sample css you posted is ok. Try adding !important to color attribute.
color: #FF9904 !important;
At the time of writing (June 2015) there is a bug in OS X Chrome that means it doesn't apply colour correction to CSS-colours or untagged images. Safari (since OS X 10.9) applies colour correction to both CSS colours and images.