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
Related
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.
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.
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.
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/
Don't know if this is the right place to ask, but I am quite new to html, have made a complete site and uploaded to web server.
But i tried visiting the site on another device, and the font shows differently, but then when i go onto a website which has a different font it shows fine on their site.
Am i doing something wrong?
Cheers
Adam
Because the computer doesn't have that font, and you didn't include the font to download, just an instruction as to which one to use.
The CSS #fontface instruction lets you direct a browser to a file with a font.
A simpler and lighter approach, is to suggest back-ups. E.g. Instead of:
font-family: arial;
You could use:
font-family: arial, verdana, sans-serif;
The first will try to use Arial, and if it isn't available, will just use the default font for the browser (which could be a serif font like Times, for example).
The second will try to use Arial. If that's not available, it will try to use Verdana. If that's not available, it will try to use the default sans-serif font for the browser, which should at least be closer than a serif font.
Here is a great tutorial on how to create custom fonts on a website.
http://blog.themeforest.net/tutorials/how-to-achieve-cross-browser-font-face-support/
It will also explain which types of fonts are compatible on certain browsers