I know there are many questions about different font rendering in different browsers.
But I don't think this is because of rendering.
The website is wikipedia,
When I open this in Chrome it looks like this :
As I open this in other browsers (Opera Firefox or even IE) ,it displays this font :
I wonder why the difference? I don't know much about fonts but I checked the CSS code it just define font-family: sans-serif; So is my chrome have something like default settings which I don't seem to find where to change?
PS: I don't find this difference when browsing other websites using Chrome, So How to avoid this difference when writing CSS?
Because font-family: sans-serif; is set, each browser set's their own standard font. This can ofcourse differ between different browsers.
In chrome, you can set the default fonts at chrome://settings/, under advanced settings.
In safari it is less easy, but I could find this post.
In reaction to your edit, you should always define a font stack in CSS to ensure that the correct font is shown.
A font stack is a stack of fonts, used to define different fonts to be chosen. It looks as follows:
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
This defines Arial as the standard font. If however Arial is not found, Helvetica Neue is chosen. If that font is also not present, Helvetica get's set. In the very unlikely case that even Helvetica isn't present, the standard sans-serif font, set by the browser, is chosen.
For reference, you could check out this website. It has a lot of standard font stacks you can use in your CSS.
Every browser makes it able to chose the fonts you want to be displayed
In chrome you have to go to the settings and click 'Show advanced settings' or something like that to find content display adjustments menu
Fonts compatibility should be differs from various browsers. The way to fix the issue is by using the google fonts or call the font extensions supported for various browsers.
#font-face {
font-family: 'MyWebFont';
src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}
for more details See this link.
Related
I want one simple thing...my font to work on chrome.
#font-face{
font-family: "Iosevka";
src: url("http://www.some_url/iosevka-regular.woff2") format(woff2),
url('http://www.some_url/iosevka-regular.otf') format(opentype),
url('http://www.some_url/iosevka-regular.ttf') format(truetype);
url('http://www.some_url/iosevka-regular.eot) format(embedded-opentype);
}
This works on safari and firefox but not chrome. I am not exactly sure why
I have looked at several posts saying I need to add more font support so I have ttf, woff2, eot, and otf but this still doesn't work.
Does anyone know what is going on?
Simplest supported loading of a font on the web today. Only need one font file and it needs to be used.
Two CSS rules and a HTML tag.
Microsoft was the holdout for TTF although they were part of building the TTF. All systems have the license to use TTF and caniuse reports all browsers supporting it.
Note this does not mean you can use anybodies licenced font. It means you can use TTF to display the font.
OTF is open license so no license is required and supported by all systems including Microsoft edge.
Not sure of the status of Woff and SVG is not supported by Chrome.
#font-face {
font-family: "Logo";
src: url("/fonts/logo.ttf"); /* or url("/fonts/logo.otf") */
}
.logo {
font-family: Logo;
font-size: 80px;
font-weight: normal;
}
<h1 class="logo">
Browsers don't download the font until they need to use the font. But the font can be downloaded with Javascript if one does not like the normal behavior.
I'm working on this site and I have this CSS
.n2-font-d7df9860b9d2e958d0b5b8dadd6b6bd5-paragraph{
font-family:'HelveticaNeue', 'Helvetica Neue', serif !important;
}
This targets the text on the front page image (please don't ask about the selector - its generated by a plugin!). I need to use the Helvetica Neue font and I believe its supported in iOS (iosfonts.com). It looks fine on desktop browsers, but the font-family is ignored on iOS (in Safari) and renders as a flat sans-serif font.
I've tried listing various alternatives but with no success. I am using iOS 9.2.1 which is the latest.
Can anyone say why I'm having this issue? And how to make it apply the correct font? I'm about ready to smash stuff... Thanks for any advice.
I've been working for a client site and I have problem with rendering of Roboto font.
In Chrome (ver. 43.0.2357.65 m) all the various weights of Roboto looks same.
Here is the example:
Left is Mozilla Firefox, right is Chrome
http://i.stack.imgur.com/dX4Lx.jpg
Do you have any idea what's wrong with it?
thank you
Well, it's such a shame, but I have had old version of Roboto installed on my PC.
Since I deleted, everything works fine again.
I should facepalm myself hard..
I have the same version and it's work.
Try to include font in CSS with this code
#import url(http://fonts.googleapis.com/css?family=Roboto:400,400italic,500,500italic,700,700italic,900,900italic,300italic,300,100italic,100);
body {
font-family: 'Roboto', sans-serif;
}
And set the font-weight: 300; for exemple and see if that works.
If you are using Adobe's Creative Cloud and you have Roboto set as a font, you may run into issues where all things in Chrome then get Roboto Bold. I disabled the font from Adobe Fonts and it fixed my issue, but in some Google products like GMAIL, Sans Serif is bolded and you can't turn off the bold. I don't know why and I can't find any good information on how to resolve that.
If you use #fontface evert browser use different font format so the complete css is like this:
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
But as suggested using google fonts you should have no problems.
I had a similar issue. I noticed that all periods are square, not circle. Download a fresh copy of Roboto font here and reinstall it on your machine.
I had the same issue, for me what worked was calibrating my monitors and:
Go to chrome://flags/
Accelerated 2D canvas -> Enable
2D canvas -> Enable Reboot Chrome.
In my case, for a Hebrew site, the font-weight was set to 900 and the output was showing differently in Firefox and Chrome browsers even though I followed Google-Font's embedding rules properly:
//For example:
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700,900" rel="stylesheet">
Solution:
I have just updated the font-weight to 700 instead of 900 and this fixed the issue.
https://stackoverflow.com/a/27383566/11417534 fixed this problem for me.
Just delete the protocol declaration (http:// or https://) from the font request.
I am trying to use "HelveticaNeueLTStd25UltraLight" on my website. On OSX, it looks perfect in every browser. On Windows, it's horrible:
Chrome:
IE:
I am using the following CSS (if it matters):
#font-face {
font-family: 'HelveticaNeueLTStd25UltraLight';
src: url('../fonts/HelveticaNeueLTStd25UltraLight.ttf');
}
body{font-family:'HelveticaNeueLTStd25UltraLight'; font-weight:normal;}
/*** IE FONT ***/
#font-face {font-family: 'HelveticaNeueLTStd25UltraLight';
src: url('../fonts/HelveticaNeueLTStd25UltraLight.eot');
src: url('../fonts/HelveticaNeueLTStd25UltraLight.eot') format('embedded-opentype'),
url('../fonts/HelveticaNeueLTStd25UltraLight.woff') format('woff'),
url('../fonts/HelveticaNeueLTStd25UltraLight.ttf') format('truetype'),
url('../fonts/HelveticaNeueLTStd25UltraLight.svg#HelveticaNeueLTStd25UltraLight') format('svg');
font-weight: normal;
font-style: normal;}
Can someone explain why this is? What can I do about it? If I must use another font, which fonts are safe to use?
Windows just has crappier font rendering in browsers than OSX or iOS does. Sometimes you can fix it by picking specific font sizes at which the browser antialiasing doesn't look too awful. There is also the text-rendering: optimizeLegibility CSS property but in my experience it often does more harm than good.
Pick a different font that is more optimized for web display. Google Web Fonts is a good place to start. They have lots of great modern fonts that are all optimized to be used as webfonts, and on top of that they provide the CSS etc - you just need to <link> to their external CDN CSS file in your <head> and bam you're good to go. "Lato" and "Raleway" are fonts I use in place of Helvetica Neue sometimes.
Also, it's almost certainly illegal to embed that font anyway since Helvetica Neue LT Std is a commercial font, so...
Every browser renders fonts differently using different methods that is why you are including so many different versions of the font, as each is used by a different browsers. OSX has one of the best font rendering engines, things look great, but look at in IE or FF or Chrome and things tend to be different. There isn't much you can do apart from trying a font that is a bit thicker.
You can see maybe if maybe font-weight: 500 helps.
I am trying to use custom fonts on my website and in the css I have the following code:
#font-face {
font-family: 'Sketch';
src: url('../fonts/Sketch.eot');
src: url('../fonts/Sketch.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
ul#holder {font-family:'Sketch'}
The fonts do appear as they have to in Firefox. In chrome, the font do not seem to be rendering smoothly and do not appear as good as in firefox (Should I drop the idea of using fonts in my sidebar and use images which would show the smooth text instead? ;-/)
In IE, the fonts are not appearing at all. What should be done to get proper smoothening of these fonts in Chrome and get these working in IE?
Different browsers supports different font formats:
So you need to create your font in all formats. You can use Font Squirrel (thank you, effectica).
And then, you can import them like that:
#font-face {
font-family: 'Comfortaa Regular';
src: url('Comfortaa.eot');
src: local('Comfortaa Regular'),
local('Comfortaa'),
url('Comfortaa.ttf') format('truetype'),
url('Comfortaa.svg#font') format('svg');
}
That's not the only possible way. You can find more complete information on this question at Paul Irish's blog.
And, anyway, their appearance may differ a little in different browsers.
All the main browsers have slightly different font rendering engines / techniques and they have different quality of rendering output. So your fonts are unlikely to be 'pixel perfect' between the various browsers and some quality differences will appear. Which one ends up looking the best depends on the font. I have a glyph font that looks great on Chrome and IE but looks a little washed out in Firefox...
Anyway, there is a little hack that you helps you to get fonts to work on IE, see the second src line. This is needed because whilst adding extra font formats ensures support for every browser, unfortunately it causes problems in versions of IE before IE9. Those older browsers see everything between the first url(' and the last ') as a single URL request, so will fail to load the font. This hack tricks the browser into thinking that the rest of the src property are arguments of that query string, so it goes looking for the correct URL and loads the font:
#font-face {
font-family: 'Sketch';
src: url('../fonts/SketchRockwell.eot');
src: url('../fonts/SketchRockwell.eot?#iefix') format('embedded-opentype'),
url('../fonts/SketchRockwell.woff') format('woff'),
url('../fonts/SketchRockwell.ttf') format('truetype'),
url('../fonts/SketchRockwell.svg#countersoftfontRegular') format('svg');
font-weight: normal;
font-style: normal;
}
The above came from Font Squirrel’s #font-face Kit Generator which can be accessed at http://www.fontsquirrel.com/fontface/generator. There you can upload your font and convert it to whichever formats you wish. You can also control the CSS syntax it outputs, subset the characters to reduce file size, and use more options to fine-tune the fonts
Also if you are going to use Bold or Italic on you text then you need to include version of the rule that change the font-weight and font-style accordingly for each combination, so the browser knows what font to use when it encounters a CSS rule with bold in it.
Each font typically has a design purpose and was created for a specific job. Most commercial fonts were not designed to be viewed at small sizes on a screen, so in many cases it makes the most sense to reserve these #font-face for headings and continue to use web-safe fonts like Georgia and Lucida for body copy.
Another aspect of fonts that can affect legibility is how they are anti-aliased and hinted. Right now, web fonts are generally more jagged around the edges than traditional fonts, even when anti-aliased, usually because most were not designed to be viewed on screen. Higher quality fonts, as well as fonts that were designed for the web, have better hinting,
Here is a great URL for creating embeddable font packs:
http://fontface.codeandmore.com/
Upload your TTF or OTF font and it creates the entire font kit for you, complete with
implementation HTML and CSS examples.
Cheers!
Edward said it all. Chrome used to drive me insane for the way it displayed certain fonts.
If you have the font file you can use font squirrel to generate the code as well as all font files that you need for all browsers.