On my personal website, I created an HTML page that displays Japanese text.
I used the following font families.
font-family: Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
I've put this both in my CSS file and tried nesting it in a statement. All browsers display the fonts correctly in OS X and Linux, but all Windows browsers will only display MS Mincho font.
Does anyone have any idea why?
A browser can only use a font if that font is installed on the machine on which the browser is running. If the font is not installed it tries the next one in the font-family list and if that one is not installed it tries the next and so on until it gets a font that the machine has installed. It then used this font.
If you want a particular font to be used by the browsers then you need to download that font to the machine using the using the #fontface and you can use a tool like Font Squirrel to generate all the correct CSS for you.
Be aware that most fonts installed on machines are subject to copyright and just ripping them from your machine and shipping them down to any old machine is in violation of that copyright. But there are many royalty free fonts out there that may do the job.
Related
Relating the mechanism which permit a browser to display correctly a text formatted wiht a certain Font-Family, it should be described in this way:
the font-family property lets designers specify a prioritized list of fonts for the browser to use to display content. If the preferred font is not installed on the user's computer, the browser will attempt to use the second font in the list. If the user does not have of the preferred fonts installed, a default font is used to display the content.
In Windows 7 the set of fonts installed on the user's computer font should be viewed in Control Panel > Appearance and Personalization > Fonts.
Now in my installed fonts "Open sans" is not listed, and yet my IE11 are able to correctly reproduce a text formatted in "Open sans".
Where is the repository where IE11 get the "Open sans" font?
Thank you very much
Because of #font-face:
The #font-face rule allows for linking to fonts that are
automatically fetched and activated when needed. This allows authors
to select a font that closely matches the design goals for a given
page rather than limiting the font choice to a set of fonts available
on a given platform.
Segoe UI semlight is a font designed for Windows 7, I really like this font and I'm building a web-application using it, I want clients using windows XP and other operation systems to be able to view it as well, so I saved the font on my web files folder and imported it to the CSS code, however it simply won't load, This isn't a directory error or incorrect importing of the font, I've tested other fonts and it worked fine, It doesn't work with this font specifically I would be glad if any of you have a clue why it won't load with this font specific......
I found this answer from Microsoft, I hope it help you:
We made Segoe UI Semilight so that a light weight font could be used at smaller sizes than Segoe UI Light. Segoe UI Light really doesn't work below 20pt (#96ppi), wheras Segoe UI Semilight survives down to about 11pt. There's always a chance the font may end up on Windows 7 as part of a broadly deployed update, but we've not made any commitment to that effect. For now we'd recommend specifying Segoe UI Regular at sizes below 20pt.
Try changing the font-size and maybe will work
I am developing the frontend of a web application and the design requires the use of the Segoe UI font. I used this font for a few text areas but in non Windows systems (Mac OS borwsers, Android, etc) those texts don't render with the Segoe UI font.
After googling this I found that this font is used by Microsoft. My question is. Can just use the font files in the frontend an use #face-font to include the font in the frontend? Or do I need some licence or something like that?
You can't license Segoe UI from Microsoft without direct contact, you can license the mono font from Ascender Corp who are linked to from Microsoft webpage for Segoe UI, however it is not the same as Segoe UI.
I would suggest Open Sans as an alternative to the Segoe UI font, it is quite similar and has much more open licensing for using as webfont (that link is actually to Google's hosted version of the font) - So you could have Segoe as the main font then fall back to Open Sans on non Windows 7+ Systems.
Technically you can embed the font through css, but I don't think the license will allow you do do that legally. Couldn't find out right off the bat though - msft's licensing is as always a maze to navigate.
Could you find an alternative font on Google web fonts or Typekit and use instad? They all have permissive licenses? (Open Sans is quite similar, for example)
If you are using CSS simply call the font in a font stack. It can be the first font or listed second or third. Each device or browser will use the fonts in your list as they are found on the system. If you put a Mac-only font first, Windows systems will default to the second or third font it finds installed.
If you want to host the font yourself, be mindful that some devices will not support certain fonts and you'll still need to list alternative fonts no matter what. Check your analytics to see what types of devices and browsers are visiting. Pick the most popular as your main font and then add fonts for the others in descending order.
There's no guarantee that any font will actually load. There are too many variables and the users can always uninstall fonts or shut off javascript and other nonsense that can drive a web designer crazy.
I use a combination of hosted and installed fonts in most of my sites, especially when design is more critical.
My research indicates that for Windows, Helvetica falls back to Arial but is it also true for linux?
EDIT
Helvetica.ttf is present on my system. Also on another system where it is not present, the same behavior can be seen.
EDIT
Do not know how but this is a comparison between how Firefox rendered it and how Chrome did it (I have erased the non-required parts of the images):
As can be seen the first two 'GR' on both browsers are in Helvetica (technically) but only Firefox renders Helvetica, while Chrome does not.
No, this does not affect Linux computers.
Windows silently maps "Helvetica" to the Arial typeface - this probably a legacy from the time when most web-designers were using Macs, and Mac OS X comes with Helvetica but Windows doesn't, instead it has Microsoft's Helvetica knock-off: Arial. Designers of the time overused Helvetica in their CSS documents without specifying a good fallback for Windows, or even the sans-serif fallback family so Windows users would have gotten Time New Roman or some other serif font when it was the baseline default in IE 3.0 and 4 (remember when webpages had grey backgrounds by default, not white?).
Linux isn't Windows, and therefore does not have this problem - instead it has it much worse: (Most) Linux users don't have Helvetica nor Arial installed - so they're very dependent upon CSS authors specifying baseline families (sans-serif, serif, monospace, fantasy). But nowadays you can use WOFF to embed fonts in webpages without depending on them being installed, but be careful as fonts are regularly 30KB-300KB in size, or even larger (Chinese-language fonts are often 30MB!).
Is Segoe UI font built into the browser? If my visitors are viewing from Mac, will it work properly or do I have to set the CSS url for that? My designer says it will work only when we set the URL, however I removed the
#font-face
{
font-family: "Segoe UI";
src: url("fonts/Segoe UI.ttf") format("truetype");
font-style: normal;
font-weight: normal;
}
and it still works atleast on Windows 7. I don't have Mac though, to test.
The Segoe UI font is not built into a browser. It is shipped with some Microsoft software. On a Mac, it is most probably not available, though a user might have acquired it separately or as part of some software package.
You should remove the #font-face rule and the font files uploaded onto a server. Segoe UI is protected by copyright, and it must not be used as a web font without permission from the copyright holder, Microsoft (which probably won’t give a permission).
You will need some other strategy, such as using another font either as the basic font or as a fallback font for visitors who don’t have Segoe UI in their systems. The Google font Open Sans is rather similar to Segoe UI, and it’s free (and it comes in 10 styles, including Book, Normal, Semi-Bold, Bold, and Extra-Bold weight).
It will work on any computer with Office 2007, 2010, Vista or 7:
The Segoe UI font family can be obtained as part of Microsoft Office 2007, Microsoft Office 2010, Windows Vista or Windows 7.
Will also work on XP if the user has downloaded a Windows Live package:
Segoe UI is installed into Windows XP if the user installs Windows Live Messenger, or Windows Live Mail
Source
For any computer that doesn't have the above, you will need to declare it with a #font-face
I would like to add, that web-fonts (google fonts) are nowadays already a data-protection problem with EU-laws (as google safes some personal info), but the real problem with them is, that they cause time-lag on loading (0.6 seconds) and also cause a layout-shift (CLS) then.
I used web-fonts for 10 years. Now I go back to some pre-installed fonts...
Yes.
You may also want to provide the font in OTF as well.
You can find a list of available formats to provide the font in here: http://www.w3.org/TR/css3-webfonts/#font-reference
You can find a converter to turn TTF into the varieties of web fonts here: http://www.font2web.com/