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.
Related
I have seen this post What is the default font family in HTML and how can I check this?
However, I have a few more specific questions, for the following simple HTML code, when it is displayed in a browser, will the browser use system font, i.e., the fonts in /windows/fonts, to render the web page content?
According to https://granneman.com/webdev/coding/css/fonts-and-formatting/web-browser-font-defaults, different browser use different default font, which means when the page is displayed in different browsers, the content will indeed display differently, correct? Chrome on Windows uses Arial by default, but what if the local computer does not have this font installed, will the browser use a different font, or will it display blank?
<body>
Stack Overflow
</body>
System fonts are fonts installed on the user's system. If your web site does not choose a font to use, then that user's system font will be used. Different systems have different fonts. System fonts on Windows may not be the same as fonts on Macs or Linux or BSD. Browsers do not have fonts themselves. It is not up to the browser to decide what those system fonts are.
The default fonts in all browsers are Helvetica Neue, Helvetica, Arial, and sans-serif. All computer systems have these by default, pre-installed with the operating system. It's a standard. They're there. Unless a user has deleted them everyone has them. Therefore any of those will display.
If the user does not have the font the web page code instructs to be used their computer system will use whatever their default font is set to. It will not display a blank page.
To use a specific font:
https://www.tutorialspoint.com/html/html_fonts.htm#:~:text=You%20can%20use%20a%20<basefont,use%20the%20tag.
That will work as long as the user has that font installed as the demonstrations on that page show.
To use a custom font:
How do I install a custom font on an HTML site
If you're not happy with these links this information is readily available on many different sites and in a ton of different articles that can be found by searching for it.
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.
My setup is following: Windows Universal app (WinRt). I have use both VS 2013 and Blend 2013 for designing app.
I have notices that whenever I change font on TextBox in Visual Studio it has no effect on the actual font. I have also noticed that Blend always defaults to Segoe UI if I change the font. I wonder if fonts like Segoe UI Light are available on the Windows Phone?
If you want to use Segoe UI Light, simply set the FontWeight property to Light.
If you're trying to do more customized things with text then yes you'll probably need to use custom fonts.
So after some research I found that Windows Phone 8.1 only supports Segoe UI and multiple other fonts out of the box and if you want to use other fonts apart from the ones shipped with the phone you will have to embed them. Here is a good article on how to do it: http://abnady.wordpress.com/2013/12/17/adding-custom-fonts-to-windows-store-app/
I think one of the drawbacks of using something like Helvetica is it will slow down slightly the startup time of your app. However I am not sure how significant is this.
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/
Are Google Fonts as reliable as the standard fonts shipped with PCs, in terms of browser compatibility? Right now we upload a lot of custom fonts for our site, but we have some issues with various browsers (even across web standards). Some say just go with Helvetica, Arial and the usual suspects for across the board rendering accuracy. But do Google Fonts offer creative solutions without sacrificing rendering accuracy?
In short, yes.
Web fonts are great, but you need to remember that if the content delivery network is down then users will not get the font, so make sure you include fallbacks in your font-family all the way down to either serif or san-serif.
The other option is to package the fonts you want to use so that users can download them if they are missing, but the packaging and delivery process is pretty cumbersome. Also you might run into licensing issues.