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.
Related
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.
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;
}
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'm doing a Photoshop-to-XHTML conversion, and the website designer used the Myriad Pro Semi-bold font which looks good in the photoshop file, but when I try the semi-bold option in CSS, it looks pretty much like a normal bold font, which is too bold for my purpose. Is there a way to achieve a nicer looking semi-bold font in HTML and CSS or am I just stuck with 'font-weight: 600;'?
In CSS, for the font-weight property, the value: normal defaults to the numeric value 400, and bold to 700.
If you want to specify other weights, you need to give the number value. That number value needs to be supported for the font family that you are using.
For example you would define semi-bold like this:
font-weight: 600;
Here an JSFiddle using 'Open Sans' font family, loaded with the above weights.
The practical way is setting font-family to a value that is the specific name of the semibold version, such as
font-family: "Myriad pro Semibold"
if that’s the name. (Personally I use my own font listing tool, which runs on Internet Explorer only to see the fonts in my system by names as usable in CSS.)
In this approach, font-weight is not needed (and probably better not set).
Web browsers have been poor at implementing font weights by the book: they largely cannot find the specific weight version, except bold. The workaround is to include the information in the font family name, even though this is not how things are supposed to work.
Testing with Segoe UI, which often exists in different font weight versions on Windows systems, I was able to make Internet Explorer 9 select the proper version when using the logical approach (of using the font family name Segoe UI and different font-weight values), but it failed on Firefox 9 and Chrome 16 (only normal and bold work). On all of these browsers, for example, setting font-family: Segoe UI Light works OK.
For me the following works good. Just add it. You can edit it as per your requirement. This is just a nice trick I use.
text-shadow : 0 0 0 #your-font-color;
font-family: 'Open Sans'; font-weight: 600; important to change to a different font-family
By mid-2016 the Chromium engine (v53) supports just 3 emphasis styles:
Plain text, bold, and super-bold...
<div style="font:normal 400 14px Arial;">Testing</div>
<div style="font:normal 700 14px Arial;">Testing</div>
<div style="font:normal 800 14px Arial;">Testing</div>
Select fonts by specifying the weights you need on load
Font-families consist of several distinct fonts
For example, extra-bold will make the font look quite different in say, Photoshop, because you're selecting a different font. The same applies to italic font, which can look very different indeed. Setting font-weight:800 or font-style:italic may result in just a best effort of the web browser to fatten or slant the normal font in the family.
Even though you're loading a font-family, you must specify the weights and styles you need for some web browsers to let you select a different font in the family with font-weight and font-style.
Example
This example specifies the light, normal, normal italic, bold, and extra-bold fonts in the font family Open Sans:
<html>
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Open+Sans:100,400,400i,600,800">
<style>
body {
font-family: 'Open Sans', serif;
font-size: 48px;
}
</style>
</head>
<body>
<div style="font-weight:400">Didn't work with all the fonts</div>
<div style="font-weight:600">Didn't work with all the fonts</div>
<div style="font-weight:800">Didn't work with all the fonts</div>
</body>
</html>
Reference
(Quora warning, please remove if not allowed.)
https://www.quora.com/How-do-I-make-Open-Sans-extra-bold-once-imported-from-Google-Fonts
Testing
Tested working in Firefox 66.0.3 on Mac and Firefox 36.0.1 in Windows.
Non-Google fonts
Other fonts must be uploaded to the server, style and weight specified by their individual names.
System fonts
Assume nothing, font-wise, about what device is visiting your website or what fonts are installed on its OS.
(You may use the fall-backs of serif and sans-serif, but you will get the font mapped to these by the individual web browser version used, within the fonts available in the OS version it's running under, and not what you designed.)
Testing should be done with the font temporarily uninstalled from your system, to be sure that your design is in effect.
I have an asp.net page with an asp.net menu.
I defined the font in the menu items to be Myriad Pro.
In IE and Firefox it appears normally, but in Safari the menu items appear blank.
when I changed the font type to another font it worked fine.
so is there a way to make the Myriad Pro font appear on Safari.
thanks
As Rup mentioned, Myriad Pro is not a ubiquitously defined Mac font. However, if you have a copy of the .otf or .eot font files, you can make the font available to all CSS3 compliant browsers and supply a backup font for display should the browser not support CSS3. This would be the syntax for doing such:
#font-face {
font-family: "CustomMyriadPro";
src: url("path/to/myriadpro/font.otf") format("opentype");
}
h2 {
font-family: "CustomMyriadPro", Helvetica, Georgia;
}
Make sure your CSS specifies Myriad Pro in quotes, i.e.
font-family: "Myriad Pro", sans-serif;
Secondly, be aware that a font will only appear if it's installed on the end user's machine (unless you're using #font-face), so you always need to define some fall-back fonts, e.g.
font-family: "Myriad Pro", Arial, Helvetica, sans-serif;
This problem is happening with multiple installed fonts on my Mac since the upgrade to 5.1 and then to Lion. I think something is broken with the upgrade. Other browsers are fine. It is affecting other fonts as well. I had to disable the font-family CSS in the Inspector in order to get this editor to include readable text because Consolas is affected as well.
The problem is not with fallback or specification in CSS. The problem is with Safari and specific fonts. It does not fallback past the problematic font but continues using it, replacing all characters with the capital A in a square; so fallback is of no help.
Discussion and possible explanation here: https://discussions.apple.com/thread/3191532?start=0&tstart=0
According to the codestyle.org font survey, most Macs don't have Myriad Pro installed. (Nor Windows for that matter.) You should pick similar fallback fonts for all of Mac, Windows and Linux then specify a list of these fonts in your style.
If you specifically need Myriad Pro then you could use images, or embed the font using sIFR (maybe not for menus though) or through #font-face font-embedding (thanks Olly!) instead.
Check out the Typekit webfont-embedding service, they have Myriad in their library http://typekit.com/fonts/myriad-pro