My website has very different rendering in Firefox Windows / Firefox Linux (however, similar versions, default parameters for both).
The reason seems to be that the font are rendered very differently. This:
font-family: sans-serif;
gives Arial-like font on Windows:
and a little bit different font on Linux:
How to solve this problem and have constant rendering in Firefox Win / Firefox Linux ?
(if possible, I'd like to keep the Windows rendering)
You only have defined the font name sans-serif which is not a font per se, just tells the browser to use any sans serif font the browser prefers. But even if you give a concrete font name, be aware that the installed fonts in Win / Linux are not the same. Also, the font rendering is OS dependant, so both OS might render fonts a bit differently. The best way to solve this would be to use a web font, where you have the same font files for both Win and Linux. Also gives you a lot more freedom in design, since you do not have to rely on the fonts the OS provides.
But even then, it can happen that the user chooses to use a bigger font size, and you still have rendering differences, but not as visible as with your example where you apparently have two completely different fonts.
In other words: achieving a result where each font rendering looks exactly the same is simply impossible. Thats the nature of the www.
Related
I know this is an extremely basic and stupid question, but I seem to be having a genuinely curious problem.
When using what are supposed to be web-safe fonts like Didot, and using
header h1{
font-family: Didot, serif;
font-size: 36px;
}
my browser just displays the standard serif font.
In fact I can't seem to get it to display any web safe font, it will only display either the standard serif or sans-serif font. I know my selector is correct because I CAN change between serif and sans-serif, but I know its not displaying other web-safe fonts because I tried both Arial and Helvetica (which are both definitely web safe) and when I refreshed from one to another there was absolutely no difference in the font displayed.
I'm a complete beginner and I'm using the simplest possible beginner environment, just an html page linking to a css file which I'm opening with my browser (the url shows up as file:///C:/Users/Agent%201/Desktop/Web%20Projects/ResumeSite/index.html if that is at all relevant). I've tried opening it with both chrome and edge, same results on both
Is there something wrong with my css? Or are there limitations when just opening a local html file with my browser?
Sorry if I'm this is a really dumb question, but I really can't find an answer as to why my fonts aren't working, I've tried !important and some other weird solution I found which involves changing the selector to "header h1, header h1 *" and that did nothing.
Thank-you for any help you can provide me!
When using what are supposed to be web-safe fonts like Didot, and using...
Didot is not a "web-safe" font.
Didot is included with macOS, which may lead some web-designers to assume that it's also available on other platforms (like Windows, Linux and Android) or that those platforms have automatically-mapped equivalents (like how many browsers will map Helvetica to Arial), however that is not guaranteed.
Also, just because a typeface is included with an OS does not mean it is licensed to you to use commercially or in a website - you can be sued for publishing an OS-licensed font onto the public web without having your own font-license.
A "web-safe" font is a typeface that is broadly installed and supported by most contemporary browsers without the need for additional downloads or font installations.
Many typefaces are broadly installed, such as Microsoft's Core fonts for the web which are preinstalled on all Windows computers - and many other operating systems such as macOS either come with the same fonts or have very similar equivalents (e.g. Helvetica instead of Arial) which are automatically mapped by the browser.
The only way to determine if a font is "web-safe" is by doing your own leg-work and manually checking to see if all-or-most of your target users' devices have that typeface available. You can check font availability on Wikipedia and other sites:
macOS: https://en.wikipedia.org/wiki/List_of_typefaces_included_with_macOS
Windows: https://en.wikipedia.org/wiki/List_of_typefaces_included_with_Microsoft_Windows
iOS: http://iosfonts.com/
Android: Consult Android's fonts.xml for the minimum set of stock fonts and default fallback mappings (e.g. "Helvetica" goes to "sans-serif").
You might notice that Android's font list is very... short. That's because the base Android OS isn't what ships on most peoples' phones: Google's layer on top of Android, and OEMs (like Samsung, etc) will add their own fonts on top, but I don't know where to get that list from at-present, sorry.
A "web-safe font stack" means that at least one of the fonts listed in a font-family property value can be safely assumed to be available for use, not that all of them are - nor that the first-preferred-font will be available.
And any font-family list can be made "safe" by adding a CSS fallback generic-family name to the end (i.e. specifying the least-preferred font). Those names are specified in the CSS Fonts Module and are:
serif
sans-serif
cursive
fantasy
monospace
In your case, the property font: Didot, serif is "web-safe" because it has the serif generic-family name at the end. Your visitors will only see the Didot font being used if they already have it installed on their computer, phone, tablet, etc.
If you do want to use Didot, then you need to publish it as a WOFF file and add it to your stylesheet with a #font-face rule: https://css-tricks.com/snippets/css/using-font-face/
May I know why Fonts are rendering differently in Mac OS browsers although, it renders correctly in Windows Browser?
I search for it but I didn't get any solution.
It will depend on the fonts available on the individual computer. If you specify Times New Roman and the OS doesn't have that font the browser must fall back to a standard serif font.
You can include a google font by linking to it in the head to allow the browser to download and display the font type.
See http://learn.shayhowe.com/html-css/working-with-typography/ and https://designshack.net/articles/css/a-beginners-guide-to-using-google-web-fonts/ for more information
My project have all its text in calibri my choice, its working perfect in Window o.s in all major browser, but when we try to deploy the same project on Linux or Mac the font style (font family,size)changes and take some other form, it looks weird. Its known that TTF(True Type Fonts) are made for all O.S.
Till now, I got the copy paste method to copy the file of calibri from Windows to linux but its not worthful for me.
I want it to be general not just for a particular system.
There is absolutely no technical problem installing Calibri on Linux, either system-wide or per user (see fontconfig documentation, for example
https://access.redhat.com/site/documentation/en-US/Red_Hat_Enterprise_Linux/5/html/International_Language_Support_Guide/add_fonts_all_users.html )
If that does not work it means your software is using some obsolete legacy pre-fontconfig text stack and that is going to break one way or another on most Linux systems (since Linux maintained compatibility with old systems for a very long time a lot of cross-platform toolkits skimped on moving to fontconfig and as a result they break right and left with modern fonts and their rendering sucks).
Otherwise you can expose it as an opentype web font which will work pretty much on any browser except old IE (but those will have it on-system).
However regardless of the method you choose Calibri is a commercial font and to do it legally you'll need to license it. And that will be very expensive. Just because it's pre-installed on windows does not mean it is free.
you have it looking right on your windows machine because the calibri font is on your system. macs, for example, have no calibri in the system fonts, that's why it renders with another font, which is exactly the second one you choose on your style sheet. you probably have something like this in you css file:
font-family: calibri, arial;
if the system has no calibri, the fonts will be rendered in arial.
calibri is a licensed font you can buy: http://www.fonts.com/font/microsoft-corporation/calibri?QueryFontType=Web&src=GoogleWebFonts
i'd suggest you to use something that looks like it on google free web fonts: https://www.google.com/fonts
I am trying to use the CSS font face property. I've made it chance the font to the right one, however it looks very edgy on the Windows platform. Especially Chrome looks awful.
When using OSX all browsers are just perfect.
How can I avoid these awful looking fonts?
On OSX Chrome:
On Windows Chrome:
The Segoe font is already installed on most Windows PC's. This can cause problems when you are also trying to link it with CSS. Try renaming the font in your CSS so that it has a different name than the built-in Windows font.
Also, Chrome just doesn't render TTF/WOFF fonts very well. You can get around that by prioritizing the SVG font (by putting it higher up in the font list). This will make Chrome select the SVG font (but most other browsers will still use the WOFF font). See here for more information.
i have been building a website using a windows development box so far. the site has turned out well, until i noticed that the same pages appear a little out of place as far as alignment is concerned in a linux dev box. the issue is because of the font being used in both these boxes.
here's my css -
font-family: tahoma, sans-serif;
the entire site has been designed with tahoma as the base font, and so if the font changes, because of the inherent width/height difference between fonts, they might end up taking more space for the same word than tahoma, and result in layout issues. Even in the windows box, if tahoma is not available, then the site would fallback into sans-serif which would most likely cause problems. so to say, the site is designed for tahoma users :D (i know this is bad practice).
while this maynot be a problem since tahoma will be present in all windows boxes, linux/ other OS users would face layout problems.
how do i resolve this issue..? i still want to use tahoma in the site.
In my experience you can never expect that a font on a web page will look exactly as you expected in all browsers / OSs. Flash does come close with the embedding feature, but for good ol HTML/CSS the best thing I've seen is TypeKit. I looked and they do not have Tahoma, but they likely have something similar to it.
As a general rule, I try to design my pages to allow for font displaying variations.