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?
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.
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.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With