Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using @font-face for Segoe UI font [closed]

Tags:

I have Google for an hour now and I can't find out if I can use @font-face using the Segoe UI font. Would any body know if the license for the font will allow me to do this?

like image 644
omnix Avatar asked Oct 12 '10 05:10

omnix


People also ask

What is font face used for?

The @font-face rule allows custom fonts to be loaded on a webpage. Once added to a stylesheet, the rule instructs the browser to download the font from where it is hosted, then display it as specified in the CSS.

How do I use Segoe UI font on my website?

Segoe UI Variable has two different axes of variation: font weight and optical size. Font weight corresponds to the font-weight CSS property: regular, bold, etc. Optical size corresponds roughly to the font-size CSS property. It lets the font change its shape depending on the size of the text.

Is Segoe UI a web safe font?

Web Safe Cursive Fonts If you want to use a web safe cursive font, you don't have too many options to choose from. Specifically: Segoe script.

Is Segoe UI monospace?

Segoe UI Mono is a variation of Segoe UI with monospace characters. It supports Latin (including Eastern European, and Turkish), Greek, Cyrillic, Hebrew and Thai characters, and symbols, geometric shapes and drawing elements. The family includes two fonts in two weights, without italics.


1 Answers

As the other answers note, Segoe UI is not available for use in web apps not made by Microsoft or their agents. To answer the title of your question, however, I'd like to point out that Microsoft themselves use Segoe UI in their web apps via @font-face, eg, from the Microsoft Surface 2 CSS:

@font-face {     font-family: 'Segoe UI';     src: url('/surface/Assets/css/fonts/all/normal/segoeui.eot');     src: url('/surface/Assets/css/fonts/all/normal/segoeui.eot?#iefix') format('embedded-opentype'),          url('/surface/Assets/css/fonts/all/normal/segoeui.woff') format('woff'),          url('/surface/Assets/css/fonts/all/normal/segoeui.svg#SegoeUI') format('svg');     font-weight: normal;     font-style: normal; }  @font-face {     font-family: 'Segoe UI Semibold';     src: url('/surface/Assets/css/fonts/all/semibold/seguisb.eot');     src: url('/surface/Assets/css/fonts/all/semibold/seguisb.eot?#iefix') format('embedded-opentype'),          url('/surface/Assets/css/fonts/all/semibold/seguisb.woff') format('woff'),          url('/surface/Assets/css/fonts/all/semibold/seguisb.svg#SegoeUISemibold') format('svg');     font-weight: normal;     font-style: normal; }  @font-face {     font-family: 'Segoe UI Bold';     src: url('/surface/Assets/css/fonts/all/bold/segoeuib.eot');     src: url('/surface/Assets/css/fonts/all/bold/segoeuib.eot?#iefix') format('eot'), /* Wrong format will tell IE9+ to ignore and use WOFF instead. MSHAR-2822 */          url('/surface/Assets/css/fonts/all/bold/segoeuib.woff') format('woff'),          url('/surface/Assets/css/fonts/all/bold/segoeuib.svg#SegoeUIBold') format('svg');     font-weight: normal;     font-style: normal; }  @font-face {     font-family: 'Segoe UI Light';     src: url('/surface/Assets/css/fonts/all/light/segoeuil.eot');     src: url('/surface/Assets/css/fonts/all/light/segoeuil.eot?#iefix') format('embedded-opentype'),          url('/surface/Assets/css/fonts/all/light/segoeuil.woff') format('woff'),          url('/surface/Assets/css/fonts/all/light/segoeuil.svg#SegoeUILight') format('svg');     font-weight: normal;     font-style: normal; } 

Even projects like Metro UI - that look exactly like Windows 8 - use OpenSans:

@font-face {   font-family: "Open Sans";   font-style: normal;   font-weight: 700;   src: local("Open Sans Bold"), local("OpenSans-Bold"), url(https://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzJ1r3JsPcQLi8jytr04NNhU.woff) format('woff'); } @font-face {   font-family: "Open Sans";   font-style: normal;   font-weight: 300;   src: local("Open Sans Light"), local("OpenSans-Light"), url(https://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTZ1r3JsPcQLi8jytr04NNhU.woff) format('woff'); } @font-face {   font-family: "Open Sans";   font-style: normal;   font-weight: 800;   src: local("Open Sans Extrabold"), local("OpenSans-Extrabold"), url(https://themes.googleusercontent.com/static/fonts/opensans/v6/EInbV5DfGHOiMmvb1Xr-hp1r3JsPcQLi8jytr04NNhU.woff) format('woff'); } @font-face {   font-family: "Open Sans";   font-style: normal;   font-weight: 400;   src: local("Open Sans"), local("OpenSans"), url(https://themes.googleusercontent.com/static/fonts/opensans/v6/K88pR3goAWT7BTt32Z01mz8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'); } 

I would recommend OpenSans.

like image 158
mikemaccana Avatar answered Oct 08 '22 10:10

mikemaccana