I used Google web fonts for my H1 text and the text looks very pixelated on my screen.
<link href='http://fonts.googleapis.com/css?family=Forum&v2' rel='stylesheet' type='text/css'>
<style media="screen" type="text/css">
h1 {
color:#544E4F;
font-family: 'Forum', cursive;
text-align:center;
margin: auto;
font-size:210%;
}
</style>
Thanks in advance!
After suffering the same problem for a long time, and after doing a lot of research about it, I finally did the following:
I found http://www.fontsquirrel.com
I downloaded the (pixellated) font I was using (Exo family)
I uploaded it to my site
I referenced it locally to avoid using Google Fonts (you can achieve this by downloading a #font-face Kit that is available at fontsquirrel.com also).
It looks OK to me. However note that h1 receives the style:
font-weight: bold;
in most browsers' default style sheets. Since you only have a normal-weight variant of the font available, the browser has to synthesise the bold weight automatically from the normal. There are various different methods of auto-bolding of varying levels of quality, but it's never going to look as good as a real designed bold. Maybe you are getting a poorly-synthesised font variant.
If you want to use Forum for headings I suggest adding the rule:
font-weight: normal;
which will allow the browser to use the regular, unmolested font. Alternatively if you really do want that bold, best choose a different font that does actually have a bold weight.
Another possibility is that you've got anti-aliasing turned off at a system level, and it's being overridden for your normal browser font but not for web fonts. If that's the problem then you could try to override for everything else using eg:
font-smooth: always;
-webkit-font-smoothing: antialiased;
although it's questionable whether it's really a good idea to be ignoring the user's preferences, and also arguable whether it should be subpixel-antialiased instead for WebKit...
Well I'm just throwing these out there, but..
My best guess is to use em rather than % for your font size. Such as, font-size:4.5em.
Maybe try using a div instead of h1, though I doubt that would do much of anything.
Try adding this:
h1 {
text-shadow:0 0 1px transparent;
}
Related
I have the following problem: I'm using the variable font from the family inter (https://rsms.me/inter/) and implemented it the following way:
#font-face {
font-family: 'Inter var';
font-weight: 100 900;
font-display: swap;
font-style: normal;
font-named-instance: 'Regular';
src: url("Inter-roman.var.woff2?v=3.15") format("woff2");
}
html { font-family: 'Inter var', sans-serif; }
When styling a font, I only want to change the font-weight, therefore I declare it like this:
p { font-variation-settings: 'wght' 200; }
The browser renders the font in the correct family and weight, but unfortunately on page load, the font always "flickers" shortly. It seems to me, that the browser first renders the font in the normal font-weight and then re-renders it with my wanted weight. This issue is happening on all fonts I use with the variable font-variation-settings.
The behaviour happens on every page load, also on reloads. You can have a look at the issue during page-reload here:
Thanks for a hint!
As we have found there are many causes for font flickering.
The solution for the problem that promted this post was found by the post creator:
"I have fixed it somehow: I have asked the creator of the font and this was his answer: "Probably because you are using font-display:swap (it intentionally causes "flicker" for requests to fonts that are not cached in the client, which should be rare.) See developer.mozilla.org/en-US/docs/Web/CSS/#font-face/…" If I change the font-display to block, it does not flicker anymore but there is a longer period of time, where the font doesnt get rendered. I have decided to change the project and work with an standard not variable font. – Mista K."
Loading on a server:
While I am certainly not an expert on this. Loading the file on a server fixes the problem. This is likely due to the style sheet being cached when loaded on a server.
Changing font:
This is not so much a fix, but errors may be caused by the font itself infortunately.
Another quick fix:
Adding a loading screen may be required for a project and thus the font can be loaded within this.
Sorry this is not the most definitive post, this is just what we have found to be solutions over discussing this problem. Feel free to comment on this to add to this or even to tell me I'm wrong.
This seems to be a problem with the font it's self the best solution I can give is to simply use another font. I would recommend using google fonts
HTML:
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">
</head>
CSS:
p {
font-family: 'Open Sans';
}
----------Original Post----------
Why not just simply use p {font-weight: 200;} instead, this might solve the problem and would probaly be easier to read (at least from an external persective)
Also try adding your font-family to body instead of html if this doesn't work
I'm going mad with an issue and I wonder if anyone can help. I'm currently using http://font-combinator.com to see what different style of fonts look like together. This website simply loads fonts in from Google Fonts and displays them onscreen.
Now I choose a font, think it looks ok, and head over to Google and download it. I then paste that font into my local font directory so I can see what it looks like locally, and add it's name in my css like so:
font: 100%/1.6 "Font name here";
color: #bbb;
font-weight: 400; (for example)
Problem is when I look at it in the same browser as I did the Font Combinator, it looks rougher and more jagged. No settings have been changed. The font on both sites is 16px. For reference I am using Windows XP with cleartype turned off (I don't like it).
Now if I link to Google Fonts directly through my website, then it displays the same as on the Font Combinator. I don't understand how installing the same font that Google uses produces a different result? Ideally I would like to host the font on my website myself, but can't see a way around this? Am I doing something wrong, or is there something I've missed? Thanks!
For reference I am using the following reset:
html,body,etc.... {
margin: 0;
padding: 0;
border: 0;
outline: 0;
list-style-type: none;
font-size: 100%;
}
Edit: #Fontface code that I've used, that does seem to look the same!
#font-face {
font-family: 'Molengo';
src: url('./fonts/Molengo-Regular.ttf')
format('truetype');
}
(just picked this font as an example)
I had same problem and it's a mess and hard to solve. The main problem is that the font you've downloaded is not actually the "same" that google webfonts provides.
The font family is the same, but Google can provide it in different formats. The font that you've installed on your system is probably a .ttf file, that's a truetype font and Windows can use it. But, if you look the css that Google serves you when you includes a font, it's something like this:
For this:
http://fonts.googleapis.com/css?family=Open+Sans
you get this:
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
As you can see, if there is no local matching, it requests the font BUT in woff format, it's the same font but in another font format. In fact, I've done this example using chrome, but the css that google provides choose the best font format depending on browser and SO that made the request.
That's the reason why you see same font family rendering so different, the local one is .ttf, the another could be woff, svg (I think for IE), and there is other posibilities. And same font on different formats looks different, sometimes too much different.
I think the best choice is to create that css by yourself, not asking it to Google, and remove the local part, but it's important to add the other formats, other way it will not work on all supported browser.
This is potentially a duplicate of this question but this was my answer to that:
Fonts render differently based on:
Screen/Monitor resolution
Browser
Operating System
Size of use and hinting
Without seeing your code the only things I can recommend are:
Making sure you are using decent reset css (something like this: http://meyerweb.com/eric/tools/css/reset/).
Try adding font-weight: normal; to fonts to see if this makes a difference; sometimes browsers and frameworks try adding a fake bold to things.
Assuring you are using the actual versions of the fonts and not just applying CSS styles.
If all else fails then try bumping the font-size up/down a small amount and see if the font hints better at these sizes.
Some people also recommend not using the #import or direct link from google. Perhaps try downloading the file and using #font-face in your css.
Hope this helps!
EDIT:
If you’re hosting the font yourself — double check the #font-face call. Make sure you are calling all versions possible of the typeface. Also, Some browsers prefer certain formats being called earlier.
Let me give you some examples:
Firefox 13:
Chrome (latest):
As you can see, in Firefox the font appears smoother, and in Chrome choppier. I'm curious as to why this is happening and steps I can take to even out the experience for my users.
I'm using an .otf font:
HelveticaNeueLTPro-LtCn.otf
And using the following CSS rules to apply this custom font:
#font-face {
font-family: "Helvetica Neue LTPro";
src: url("/Public/assets/fonts/HelveticaNeueLTPro-LtCn.otf");
}
a {
color: #665548;
display: block;
font-family: "Helvetica Neue LTPro";
font-size: 15px;
padding: 17px;
}
What do you recommend I use to even out the font differences? Or better yet, what's a good practice way to use "Web safe" fonts? Does such a thing exist?
Unfortunately you can't just take any font, convert it and have it work well in all browsers. I'd love it if you could but you can't.
Your best bet for getting good results is to use a font delivery service such as typekit or fontdeck that provide fonts that have been designed for delivery across browsers and so have a better chance of rendering consistently. You're still likely to get small variations across browsers and operating systems though, that's the nature of the web.
But in answer to your question specifically, there are no settings or workarounds to make that font appear consistently. For what it's worth I think they both look fine.
That's just depending on how a browser interprets the font. I've never actually used it, but there's a site called fontsquirrel that will take a font and break it up into different font extensions to be used for different browsers. Check it out. http://www.fontsquirrel.com/
I have two browsers both running in Ubuntu 10.
Firefox 4 RC and Google Chrome 10. Both have very different representation of bold text. Please, see screenshot below - Chrome on top, Firefox below
Same browsers in Windows and in Mac OSx show no differences or at least very minor ones.
To rule out any CSS incompatibilities, I checked both styles applied and calculated values for font-weight, size, letter spacing and line height. They all match.
Strange enough text (including this one) that is not bold look exactly the same.
The font used is Monotype Corsiva, it is attached as web font. Other fonts do not have this problem.
My question is how do web browsers generate bold text? Why is that dependent on font used and how to work around it? Using other font is not an option, unfortunately.
EDIT: This is the CSS that apply to the text as requested:
text-align: right;
font-size: 110%;
font-weight: bold;
font-style: normal;
white-space: nowrap;
font-family: "Monotype Corsiva","mntcrsweb",sans-serif;
letter-spacing: 0.02em;
line-height: 100%;
text-shadow: -0.1em -0.06em 0.2em #000000;
font-size: 180%;
direction: ltr;
font-size: 10px;
line-height: 125%;
A bold font would be a separate font file, not included in the main font (at least, not for TTF and OTF formats).
Monotype Corsiva does not have a bold variant, so if you try to embolden it, the operating system and/or the browser tries to fake it, with varying (but always less than ideal) results.
Short answer: don't do that.
Cheers,
Thomas
Just remembered another possible reason for your problem. Fonts can include a BOLD version inside the font. Some browsers and OS uses this others generates the bold themselfs. This could be your problem here. The font might have the bold or oppersite. Havent tested it myself, but that could be the problem.
Alternative go for some of the opensource/free webfonts from Google etc.
what happends if you go away from % and em units? use the "faulty px" instead? do they align then? I dont say that you shouldn't use % or em, but does px units produce the same problem?
If it does, I think its time to forget that perticular font for the task. Sounds buggy to me.
Ofcause as you mention, browsers and OS versions renders fonts differently - eg. cleartype on Windows etc. But they ought to be more or less alike anyways.
If I were in your situation, I would first apply 1 css style, check on all browsers. Then apply the next until the look breaks. Debugging starts from bottom. :o)
I'm using the Google webfonts API to embed Droid Sans on a page. All is fine, except for the descenders (i.e. the dangly bits on y, g, etc). The latest versions of Firefox, IE and Chrome on my Windows Vista box are all cutting the bottom off.
<!DOCTYPE html>
<html>
<head>
<title>Droid sans descender test</title>
<meta charset="utf-8">
<link href="http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold" rel="stylesheet" type="text/css">
<style type="text/css">
body { font-size: 16px; font-family: "Droid Sans", sans-serif; }
h1, h2, h3 { margin: 1em 0; font-weight: normal; }
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1em; }
</style>
</head>
<body>
<h1>A bug ran under the carpet anyway</h1>
<h2>A bug ran under the carpet anyway</h2>
<h3>A bug ran under the carpet anyway</h3>
</body>
</html>
The above code looks like this:
(source: thinkdrastic.net)
I've tried line-height, font-size, padding etc to no avail. I had some success with font-size-adjust, but the last time I checked it was Gecko only. Does anybody know of a fix for this?
With some help from #adamliptrot, I discovered that Droid Sans' descenders are absolutely fine at a few precise pixel sizes: 18, 22 and 27px. I adjusted my em's accordingly:
h1 { font-size: 1.6875em; }
h2 { font-size: 1.375em; }
h3 { font-size: 1.125em; }
Not ideal, but it works:
(source: thinkdrastic.net)
Although your question is in relation to the Google Web Fonts API, the principle of my answer beneath is the same.
If the descendants are being cut-off when serving a TrueType Font, the most likely cause is that OS/2 metrics are incorrectly set (negatively) on the font.
The values that may need adjustment are WinAscent & WinDescent.
A quick and dirty fix would be to adjust these both to 0.
This can be done using Font Forge. Once the font is opened in FontForge, you can gain access to these parameters via the 'Font Info' dialogue.
I have checked the referenced ttf files, and even in windows font viewer the descenders are being cut. Seems more of an issue with the font being served rather than with your styles.
If you're using Font Squirrel, it seems the issue with the sans variant has been sorted, but the issue remains with Font Squirrel's serif variant.
For a fix for the serif variant, go to the Web Font Generator and load the font files you need (do not rely on the package they provide).
Click the 'Expert' radio button, leave all of the settings but under 'Advanced Options' change the 'Em Square Value' to '2162' and generate the font.
This renders the font properly at all sizes
we've been having the same problem...we tried using font squirrel. we tried using google web fonts. The font kept cutting off "hanging" letters like g. Also, the google hosted version did not appear as true and clear as the other ones. The font seemed a bit choppy.
Our solution:
We hosted the font ourselves without formatting it for the web. Then we converted the ttf file to an svg, .eot, and .otf, and uploaded those as our fixes for ie and mozilla etc.
If the tip at the top - changing font-size to....
h1 { font-size: 1.6875em; }
h2 { font-size: 1.375em; }
h3 { font-size: 1.125em; }
doesn't work for you, then add "line-height" to the element that is cutting off the descenders. ``
I'm just guessing here, but I've had the same problem occur when fonts get substituted. I just wonder if this occurs when say a font substitution replaces a 1024em font with a 1000em font or vice-versa. I had some major descender cut-off using a 2048em font. Might be worth investigating.
I had a similar dilemma and the line-height fix worked for me (i.e. I added this code to the Custom CSS section):
h2 { line-height: 140%; }