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
Related
I just started to learn html and css again and I am struggling with some weird stuff that I didn't see before.
I have this button
.btn {
display: inline-block;
font-size: 1em;
background: #fff;
padding: 30px 30px;
text-transform: uppercase;
text-decoration: none;
font-weight: 500;
margin-top: 10px;
color: #111;
letter-spacing: 2px;
transition: 0.2s;
}
Explore
this all good but if you pay attention there is some margin or just some space at the bottom
inside the blue square I just want to be the text height so it will be centered perfectly
I check your codes in my editor and it is correct perfectly. Your codes' problem is due to over-code or other ones.
This image is from my Chrome browser:
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;
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
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.