I have a few headings which use the Vollkorn google font. I noticed that only in Firefox and Chrome that with the default bold weight and normal font style, the actual text gets pushed beyond the bottom boundary of the element. When I switch it to italic, it goes back up to normal. This doesn't happen when the font has a normal weight.
I've made a very bare HTML file which shows this behavior but the problem only exists for me, I sent the file to someone else and it was just fine with those two browsers.
I have tried to reproduce this on jsFiddle with no luck.
http://jsfiddle.net/5WDJU/1/
a
Here is the code on Pastebin, I pasted jQuery into it for simplicity.
http://pastebin.com/yXzHqKrD
Here is a screenshot to show the issue on my computer.
I also tried to reproduce this by going to the google font website and toggling the styles with Firebug but it was working fine.
Am I missing certain styles that would correct this like on jsFiddle and on the font website? Even so I don't understand why it wouldn't occur on the computer of the person I sent the file to. Is this a potential pitfall of google fonts?
Maybe this is a lineheight or padding problem. Try "inspect element" in chrome or safari (right-click) and view which styles are active on the input form.
Did you try adding reset css? http://meyerweb.com/eric/tools/css/reset/
After some more searching, I have managed to find two instances of the same problem occurring to other people. I don't believe this is an issue with the CSS anymore but I'm not sure whether the issue is due to Google's actual font or how Firefox and Chrome decides to render this particular font.
Here are the two links.
http://code.google.com/p/googlefontdirectory/issues/detail?id=37
http://productforums.google.com/forum/#!topic/chrome/QofmpbyZ7sQ
My solution which was taken from the first link was to download the bold non-italic font from FontSquirrel and embed it into my site.
Related
On this website I'm working on, I'm using this script font that has a lot of detail in it. The client pointed out that all the text using that font looks more bolded than it does in the design, losing a lot of detail. After a lot of digging I found that when the font is over 163px, it looks normal and you can see all the detail. But as soon as it goes 1px under that, it gets "bold", and I can't figure out why.
I've tried setting font-weight to 100, no change. I tried -webkit-font-smoothing: antialiased;, since I'm on a mac and I read that sometimes macs render text more boldly if you don't do this, but... That didn't change anything either.
I created a codepen to show my issue, but then I realized that #font-face doesn't support external URLs so you guys won't be able to see the font in action anyway. Here's a screenshot though, you can see the very plain html/css and the effect I'm seeing:
https://www.dropbox.com/s/x3xs931l962524b/Screenshot%202019-10-16%2012.08.18.png?dl=0
Everything 163px and over looks normal, everything 162px and under looks bold. but whyyyy??
Edit: Apparently this is ONLY happening on some Macs in Chrome specifically. Could just be chrome rendering dumbness...?
Chrome for Windows (v58) seems to add a glyph at the end of a h3 heading.
This square is also seen in the inspector but not in the source code.
It seems like Chrome isn't rendering the font completely as it should?
I'm using TT Hazelnuts from myfonts here.
There is no character missing from my line so doens't seem to be a special char issue or something.
The font is used throughout the site but it seems to only happen on some headers. Also other browsers don't have problems displaying the text correctly.
Changing text-rendering settings in CSS doesn't make a difference.
The site can be found at http://dev.everywhere.consulting (until is goes live)
I have been able to fix this by copying the text out of your editor, pasting it into the URL bar in Chrome on Windows (this will show you the strange square glyph), delete the square glyph there in the URL bar, then copy the text back into your editor.
Oddly enough, even source control will recognize the change but it won't appear to look any different.
Here I am doing it: https://i.imgur.com/Hr2s08j.gif
See Edit below
Edit2 I created a fiddle to reproduce the problem and as it seems in jsfiddle the problem is allways there: https://jsfiddle.net/h1b2wn5L/ (just in chrome)
Sometimes the font I use for a webproject looks strange. The font is called Istok Web and I load it from google fonts: https://www.google.com/fonts/specimen/Istok+Web
I created 2 pictures. One with the problem:
And one after a simple reload of the page:
As you can see the Tand E have like a bold top and in a normal Text T and E stands out.
I have no clue where this is coming from and its also gone after a simple reload. What could it be? I also can't say if this also happens in other browsers or not, as I work with crome and I don't know how to reproduce the problem.
Edit I found out how to reproduce the problem. The problem comes when I switch to mobile view in the Developer Tools. And it stays when I switch back to normal view. So I guess its not a big problem, but I am curious why this happens.
This is due to aliasing problems.
You can use some alternatives for webkit browsers using -webkit-font-smoothing: antialiased; but you won't be able to reproduce this fix in Firefox.
You could go for a workaround using text-shadow, as described here: https://www.elfboy.com/blog/text-shadow_anti-aliasing/
Web browsers do caching most of the time (and web servers, depending on its configurations), When you refreshed the page it reloaded page resources and brought the correct font from google. Also, maybe the font was not loaded perfectly in the first time.
However some fonts do look bad in some browsers, and pay attention to font size some work better in even numbers and some in odd numbers (e.g. 13px vs 12px). Make experiments then choose.
you can try the following CSS rules to enhance the font as well (no guarantee to work, but makes no harm):
html {
text-rendering: optimizeLegibility !important;
-moz-osx-font-smoothing: grayscale !important;
}
I've got a font for a website that I'm loading via #font-face. However, in Safari, it shows up at different weights on different pages, even though inspector shows all styles to be identical.
I've tried setting the font-weights (and anything else I can think of) explicitly, but nothing seems to affect it.
You can see for yourself the variation below:
Has anyone seen this before? or know how to fix it?
Try using -webkit-font-smoothing:antialiased;. This will force safari rendering method then safari will render the font using this method only, instead of automatically switching it.
I had this problem one time, when I implemented a CSS-only slideshow, and the site title rendered bolder when a specific image was shown.
Be aware of that some texts will look bad with this.
Disclaimer: I know that I should be using a sprite for my nav, I just couldn't get it to work with my images. Yes I know what I have now is a bad substitute. Please don't judge the current state of my site as it is in a very early stage and I am quite new to coding.
Please look at my code and tell me why
there is a white border around my header
the font is not showing up as it's supposed to.
Thank you so much!
Website: http://www.philecialabounty.com/KVS2/index.html
Roboto-Thin Font is supposed to look like: http://www.fontsquirrel.com/fonts/roboto
In regards to the border, your body is using the browser's default margin + padding for the body. Look into a CSS reset file. Or take a look at boilerplate or just assign body a margin/padding of 0.
In regards to the font not showing up properly, can you only use web-safe fonts in the font family declaritive for css. If you want to use better fonts look up Google fonts or cufon (which I usually use)
As #hendr1x suggests, the reason for the padding/margin is that every browser has it's own default stylesheet which it uses for some very basic base properties. If you were to check out the stylesheets used by various websites, you'd often bump into something named reset.css, which is just a simple stylesheet to ensure that basic styling is consistent across browsers, due to the issue above. Therefore, if you're only styling issue is the padding/margin on the body set by many browsers, just add:
body {
margin:0;
padding:0;
}
At the top of your stylesheet.css. Alternatively, you could Google for a reset.css file, which would also do the job and more.
It's a little unclear what you mean as to "the font is not showing up properly" - I'll take that to mean that it's rendering poorly (i.e. it looks uncrisp/jaggedy/poor). If you're a Windows Chrome user, then, like many, you've just bumped into how poor it's font rendering can be. Bearing in mind that Chrome's market share is so high, perhaps you should reconsider your choice of font, and find one that's Chrome friendly. As a Firefox user, I find few/no issues with font rendering in Gecko, but I do often find problems with Legacy IE and Chrome. Google Web-Fonts is a great resource for web-safe fonts, though even then I'd note that Chrome issues are still rife.
Also: Why do you have a <center> tag? It doesn't seem to be doing anything and it's not in the HTML5 spec - I'd advise you remove it.