I am building a website which makes intensive use of the Bebas Neue typeface. As I often do, I let FontSquirrel to the dirty job for me and I downloaded the pre-build #font-face directly from the Bebas Neue page.
I imported the downloaded stylesheet + fonts directly in my website. What I got is very bad font rendering in such big browsers as Chrome and Firefox.
Here's a bunch of screenshots:
Chrome (pretty bad):
Firefox (horrible, my lord have mercy):
Opera (very decent, that's what I want everywhere):
Safari (perfect):
I didn't specify any font rendering or anti-alias options in my CSS; on the other hand, I use normalize.css.
What could be the cause of such a horrible rendering?
Note: I already posted too many pics for a single question, but I'm using the Grand Hotel font too and God, it's even worse (but each browser behaves consistently, at least).
I had same problem on my font.
I fixed the problem for the bold style with that less mixin applied on my bold style elements:
.font-smoothing {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Related
3 days ago out of nowhere, I noticed that some sites I've built before using "Open sans" font from Google fonts as the main font are looking strange, choppy and pixelated on Chrome.
I've tried several fixes, going from adjusting the ClearType on Windows to disabling flags (accelerated 2d canvas) and disabling hardware acceleration on Chrome, pretty much tried everything I could find on the internet, and nothing works.
I also tried removing "Open sans" from my Windows font folder, but the font still looks pixelated on my sites. It was fine in Photoshop before I removed it.
This is a screenshot of what I am currently seeing.
open sans strange behavior
The p tag is using a simple CSS for testing
font-family: 'Open sans';
font-size: 12px; / 20px (on the bellow paragraph)
font-weight: 700; / 400 (on the bellow paragraph)
-webkit-font-smoothing: antialiased;
On the style, I have the default #import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght#0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap'); from Gooogle fonts.
Can anyone shed a light? Any help is appreciated. I don't really want to format my computer just because of this damn buggy font. Also tested on Edge and Opera GX, and it happens on them as well.
You should be sure if it's open sans. You can check it with whatfont plugin
I've also run into the same issue using Google Fonts' Open Sans, both via the #import method and the <link> method. Tested this against Brave (Version 1.30.89 Chromium: 94.0.4606.81), Chrome (94.0.4606.71), and Firefox (93.0). It exhibits this graininess on the fonts.google.com demo site at sizes like 18-20px, but at 16px or 21px the issue isn't present.
Interestingly, Adobe Fonts' version of Open Sans doesn't exhibit this issue, and is clear and antialiased at all sizes. I swapped my Google implementation with Adobe's <link> implementation instead and encountered the same issue.
However, inspecting Adobe's demo revealed they've also added a CSS property: font-feature-settings: 'calt', 'clig', 'kern', 'liga', 'locl', 'rlig';. These are OpenType features, and adding this to my styles seems to resolve the issue, but only for the Adobe implementation; it did not resolve the issue with Google's version. Perhaps Google's version of Open Sans lacks these additional features.
I had a similar problem, viz. Open Sans were looking jittery on our website (exactly as shown in the screenshot)
The problem was (kind of) solved when I used Adobe's Open-Sans version, as suggested in the comments.
Finally, I discovered that in our CSS we were using a font-weight (300) that we weren't importing from google fonts.
When added, everything worked smoothly, so we're back to Google Fonts.
I'm having an issue where font-variant: small-caps isn't rendering correctly in Firefox. Any other browser is fine. I'm stuck with this particular font, and even this particular definition of the face due to its license.
How it looks in Firefox:
How it's supposed to look (from Chrome):
Is this a problem with the encoding of the font? Is there a work-around?
The issue is presented in full in this jsFiddle. (Base64-encoded font was too big to put all in the question.)
The font is broken for those characters. Other browsers fallback to the next font in a different way from Firefox. You can see this by providing an obviously different font as the second font in the font-family. For example, in this JsFiddle, Wingdings is used as the first fallback font. i.e.
body { font-family: "THAT-FONT", Wingdings, "Open Sans", "open-sans", Sans-Serif; }
https://jsfiddle.net/rnwvpfy1/2/
See how Chrome displays that, showing that it's not using the "THAT-FONT" font for the broken characters.
I'm using icons. On Chrome and Opera they look fine. But if I try Firefox they look pretty blurry if the font-size of icons is lesser than 20px, while after 30px they look smooth. Is there a way to fix this?For example the Firefox problem of images resizing resulting in blurry images can be fixed by rotating the image of a very small amount. Can something similar be applied to font icons?
To see how it looks, just go (using firefox) to any website with icons(like font awesome) and try resizing them to 20px and see how blurry they become.
The problem is coming from the font rendering that browsers use. Different platforms use different methods. Browsers opt to use the OS method or their own implementation.
The reason it looks better in Chrome is because Chrome doesn't subscribe to ClearType on Windows. IE and Firefox both do use it (to check this Start -> Adjust ClearType Text and toggle it on and off to see the difference). But Firefox on Mac and Linux won't use it there because it is a Windows only technology.
Chrome has the upperhand on this particular problem because it doesn't use ClearType it uses DirectWrite on all three platforms. This means that anything should look the same in Chrome no matter what OS you're on.
Why does this matter? Because you're not in control of the user's computer. You cannot force ClearType off, you cannot alter the user's ClearType settings. A user might change their ClearType settings anyway ruining any fine detailing you might do using text-shadow to make it work.
You might get better luck using cufon for this but it's by no means a sure thing.
The solution I'd go for is using images for these icons. That way I'll know for sure that no matter what you're using to view the icons, they will be the same for everyone.
A good fix for OS X is to use the text-rendering and smoothing properties.
body {
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
This also works well when it comes to web fonts.
I have found that occasionally the font-style will be overridden when using google fonts and the font will appear bold. This combo has worked well for me.
.element {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-style: normal !important;
}
in most browsers the site I am creating is fine. But in Google Chrome the font I'm using has lots of cracks in it and doesn't render properly at all.
Chrome:
FireFox:
I've tried various fixes for it but am still unable to get it to how the site is on firefox. Here is my CSS for the font face:
#font-face {
font-feature-settings:'liga=0';
font-feature-settings:'liga' 0;
-moz-font-feature-settings:'liga=0';
-moz-font-feature-settings:'liga' 0;
-webkit-font-feature-settings:'liga=0';
-webkit-font-feature-settings:'liga' 0;
font-family:'ChampagneLimousines';
src: url('/Resources/CLB.eot'); /* IE9 */
src:url('/Resources/CLB.svg') format('svg'),url('/Resources/CLB.woff') format('woff'),url('/Resources/CLB.ttf') format('truetype');
font-weight:700;
font-style:normal;
}
A few things to try:
Get the official web font files for your font if possible
Otherwise use a tool like the font squirrel generator
Use the bulletproof font face syntax
Use the Chrome SVG font trick for smoother rendering in Chrome
Chrome renders better at certain font sizes than others. Try setting e.g. font-size: 16px then incrementing / decrementing 1px at a time to find a compromise
It could just be that your web font is badly hinted, so find an alternate one
Note that Chrome, Firefox and IE all use different font rendering engines, so they'll always look a bit different
You can follow these steps:
Control panel-> Fonts -> Adjust clear type.
I found this solution and it worked for me.
When I design in Photoshop, my fonts are thin and crisp, but when I declare fonts in CSS -- even when using font-weight: lighter -- the fonts always appear bolder.
Maybe this is just how the browser renders the font (In IE fonts stay thin), but I was wondering if there were any tricks or tips for achieving the same thin, crisp looks.
Use CSS to smooth up your fonts...
put this in your CSS:
-webkit-font-smoothing: antialiased;
Font rendering can be complicated. Unfortunately, different browsers will render the same font differently.
As far as CSS goes, setting font-weight:100 ensures the lightest available weight will be used. You may also want to set -webkit-font-smoothing:antialiased.
<style type="text/css">
body {
font-family:"Helvetica Neue", Arial, sans-serif;
font-weight:100;
-webkit-font-smoothing:antialiased;
}
</style>
Helvetica Neue is a very thin font native to OSX.
Your best bet is really http://www.google.com/fonts/
Also noteworthy:
https://typekit.com/
http://www.fontsquirrel.com/tools/webfont-generator
You are right, it is a difference in rendering. How the text renders depends on your OS, your settings, and your browser (Safari, for example, renders bolder than IE). So there is no way to make this rendering match your photoshop comp.
A bit more info here:
Browser Choice vs Font Rendering | Phinney on Fonts
I don't believe any one of the universal web fonts has a very thin weight in all browsers. However, there ways of embedding custom fonts in all major browsers now 'days.
http://typekit.com/
http://www.google.com/webfonts
http://www.fontsquirrel.com/fontface/generator
Any of these tools can get you just about any kind of font you can imagine. Just be careful with copyrights on the last one.