I've read that OSX and Windows have two very different algorithms for rendering fonts. As such, it's a common issue that web fonts look "heavier" when viewing them in OSX than they do in Windows.
For example, this is the same font, on the same site, in the same browser, but on different operating systems:
Here's Arial exhibiting similar differences:
Is there any way of altering the rendering of fonts in either Windows or OSX so they look closer to each other? Or is there some other technique to deal with this difference?
That font is a particularly bad example, I deal with a lot of fonts and have never seen one look like that. Keep in mind that people are used to seeing their fonts rendered a certain way on their own machines, and thus it is not your job to dictate how fonts should be rendered.
A few things to keep in mind are to only use weights you've included, for example, do not use font-weight: bold on a custom font-face if you haven't actually included the bold version of that font. "Browser bold" always looks messed up compared to the actual bold font.
Also, for some fonts, I find that I need to change the font-smoothing property for webkit browsers, as the default (subpixel-aliased) can look a little heavy. You can add this property to any element that uses the problematic font (even the body, if required).
-webkit-font-smoothing: antialiased;
Related
I'm trying to build a web page and need some kind of fairly distinct cursive font (not too crazy, but still distinguishable from standard print). However, when I look at this page in Firefox: https://www.w3.org/Style/Examples/007/fonts.en.html
My browser renders all of them in an approximately standard font--none of them look nearly cursive enough. Since this is just an out-of-the-box installation of Firefox, I imagine this is how it will render on most users' screen if they're using the same.
Is there any way to force render a more cursive font for someone using standard Firefox?
As was mentioned earlier, the font in that example varies depending on device, not browser.
When you set a non-specific font-family in your stylesheets, e.g. font-family:sans-serif; or font-family:cursive; what font that actually gets used will depend entirely on that visitors operating system and what fonts are installed there.
In that link it shows you various system fonts that may or may not be installed, with system defaults as a fallback, with a picture next to each showing what it should look like if your system has that font. This will differ from person to person. It gets quite complicated when you consider that sometimes the fallback fonts can even vary between OS versions.
So for more complete control, many developers turn to webfonts. I use a lot of Google fonts for my websites; https://fonts.google.com/
There are different ways of using a webfont, but I find this way simplest;
/*put imports at the top of your stylesheet*/
#import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
h2 {font-family:"Lobster", cursive;}
<h2>I'm A Webfont</h2>
On my website, for some reason the Arial font is displayed differently on several devices.
It was fine and the complaints started to arrive approximately a month ago and I suspect that the root cause is somewhere locally (browser or OS).
All the problematic users sit on different versions of Windows and mostly use Chrome (but no everyone).
Tried to investigate this issue but did not find something in common.
Is anybody faced such a problem already?
Code:
<h1 style="font-family: Arial;">Title</h1>
I suggest you to put your fonts file in your website directory and set path from your directory.
(some times maybe that device has not your font.)
in top of your css file:
#font-face {
font-family: "BYekan";
src: url("../font/BYekan.eot?#") format("eot"), url("../font/BYekan.woff") format("woff"), url("../font/BYekan.ttf") format("truetype");
}
use it:
body{
font-family: "BYekan";
}
Yes, there is a reason for this. There's nothing to state that any given device, or browser for that matter, must adhere to any given standard for the rendering of fonts. Consequently, it's prudent to create overall website designs with the assumption that text will render inconsistently across browsers/devices. As soon as you assume rendered text will "fit in to this/that space" you're in trouble.
Instead create a design that deals with the issue of font rendering elegantly.
This should not be surprising, and what you call the "root problem" is actually not a problem, but simply how fonts work in the browser.
Without an explicit #font-face rule and real font sources, you're telling the browser that you don't really care what it loads, as long as the font that gets loaded matches, roughly, what you're asking for. If you ask for "Arial" then the browser will ask the OS for a font that claims to be in the Arial family, and different devices may (or rather, will) have different versions of Arial installed. So your content's going to look different for different devices.
However, and something a lot of people forget, it doesn't matter if that's the case. What matters is that your site content looks consistent. People are not going to look at your site on two computers at the same time and then notice that they don't look pixel-identical. Individual users are going to look at your content on one device at a time. So: is the look consistent on a single device? Great, you're done. Which version of Arial is actually being used is pretty much irrelevant in that case.
My site has thumbs up images that I want to render these as HTML entities. The decimal and hex codes are:
đź‘Ť
đź‘Ť
respectively.
In FF, both codes are rendered as a thumbs up but in Chrome neither is (nothing is displayed at all).
Here is the rendering (in white) on a dark background.
Why is this happening?
In general, for emoji entities like this, you can't rely on the end user's font including it. This is especially true of Chrome (as of December 2014), which is the last major remaining browser where rendering emoji doesn't work by default.
You're best off using an image here.
A custom font is also a good solution (hat tip to #Vucko).
The font support to THUMBS UP SIGN (U+1F44D) is very limited, as usual for any characters added to Unicode recently (during the last few years). A large number of users’ system have none of the fonts, so the only way to make almost all browsers render the character is to use a downloadable font (web font) via #font-face; in practice, you would use Quivira or Symbola for this. As they are rather large fonts, using an image may be a better option.
What happens when you use the character and do not specify the font at all, or specify a font or list of fonts not containing that character, is that browsers will use some backup fonts. They may do this in different ways, so that browsers in the same system render it differently, since they scan thru the list of fonts in a different order. Moreover, browsers have bugs in this respect. They are expected (according to CSS specifications) to render the character if any of the fonts in the system contains it, but they often fail to do that. Sometimes this is caused by a faulty font: a font contains information according to which it has a certain character, so the browser uses that font, but in fact the character is missing and some generic symbol appears. Sometimes we just don’t know why it fails.
You can avoid such bugs by explicitly listing fonts that are known to contain the character. But this is of course ineffective when the user’s system has none of the fonts.
<style>
.emoji {
font-family: Segoe UI Emoji, Segoe UI Symbol, Quivira, Symbola;
}
</style>
<span class=emoji>đź‘Ť</span>
I have a case in which text inside a strong tag, is rendered with different widths on different Windows PCs.
I've checked the style with dev tool, they have the same font-family. DOC TYPE is at the beginning of document.
Other browsers are consistent (rule out font differences on PCs).
I understand that different browsers calculate things differently, but I wonder what is the problem with different PCs...
It seems however that font-weight:bold gives equal widths.
I see also that Chrome assignes a font-weight:bold to strong, from user-agent style sheet.
I don't know about IE.
I'll try to put a strong {font-family:bold} in my style sheet.
Anyone has exeperienced important style differences across different PCs?
thx
There is some cases that explain the difference, the render of the <strong> tag and font in the page may differ between versions of Windows.
A Firefox 3.6 on Windows XP and the same Firefox on Windows 7 should have some fonts differences because the native fonts installed in windows may be different. Be careful on the Service Pack versions too, it may differ from that as well.
Have you checked the default theme/font used on the both windows ? Have you checked if all the defaults of the browsers you test have been reset ? (font size, font style)... Is there a font smooth used software installed ? (like a skin or a theme ?). Like 'daGUY' as said, also check the ClearType.
I think the problem doesn't come from your code but from the font installed on the PC and i think it's the normal behavior you see.
What you should do for testing is apply your own font by using CSS #font-face. You will be sure that the font used is the same between computers. But the render should differ too.
I've been displaying Chinese fonts on my Chrome browser on my Mac and I liked it. However the font is rendered differently in Firefox or when I use Chrome on Windows. Is there a way to standardize the font that the browser chooses for Chinese characters?
You have various options:
As Art of FITZ says, specify an #font-face and have the font downloaded to the user (which will, indeed, take up a lot of bandwidth if the font is large)
As Jukka says, provide a list of font names in the font property and hope one of these is installed on the user's computer
The legacy method: render the text on your own computer in the font of your choice, upload this as an image file. If you don't have much text to display, this may be even more efficient than having an #font-face clause that downloads a multi-megabyte font file.
Tailor the #font-face to your needs: Depending on the amount of text to display, you may be able to create a font with only the subset of characters you need (with an online utility such as Font Squirrel), reducing the size of the font file to download.
Here is a quick reference to how this line of code is used.
http://www.css3.info/preview/web-fonts-with-font-face/
Different browsers have different default fonts, but can can override this by setting font-family in CSS. Just remember that different computers have different sets of fonts available, so you should normally use a list of fonts, hopefully covering most browsing situations.
Maybe you have done so but see different results on different browsers. Please post a relevant part of the code and/or a URL then.