Usando @ font-face para Segoe UI font

Question

Tengo Google por una hora y no puedo averiguar si puedo usar @ font-face usando la fuente de UI de Segoe. ¿Algún cuerpo sabría si la licencia de la fuente me permite hacer esto?

Answer 1

No es la misma fuente en esa página. La fuente en esa página es Segoe UI Mono. Por lo que sé, Segoe UI se supone que aparece solo en Microsoft Windows.

Answer 2

No puede licencia Segoe UI de Microsoft sin contacto directo, puede licenciar la fuente mono de Ascender Corp a la que están vinculados desde la página web de Microsoft para Segoe UI, sin embargo, no es lo mismo que Segoe UI.

Sugeriría Open Sans como una alternativa a la fuente de UI Segoe, es bastante similar y tiene licencias mucho más abiertas para usar como fuente web (ese enlace es en realidad la versión alojada de Google de la fuente) - Así que podría tener Segoe como fuente principal vuelve a Open Sans en sistemas que no sean Windows 7+.

Answer 3

Como la nota de otras respuestas, , la interfaz de usuario de Segoe no está disponible para su uso en aplicaciones web no creadas por Microsoft o sus agentes. Para responder el título de su pregunta, sin embargo, me gustaría señalar que Microsoft sí mismos utilizan Segoe interfaz de usuario en sus aplicaciones web a través de @ font-face, por ejemplo, desde el 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; 
} 

Incluso los proyectos como 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'); 
} 

Recomendaría OpenSans.

Answer 4

Puede crear técnicamente una fuente web con cualquier fuente en su carpeta "C: \ Windows \ Fonts \". En la mayoría de los casos (incluida la interfaz de usuario de Segoe), , no está permitido hacer esto debido a restricciones de licencia. En cambio, recomendaría Open Sans como una buena alternativa a la IU de Segoe.

Sin embargo, si se le permite hacer esto, puede seguir estos pasos:

1. recuperar su fuente en "C: \ Windows \ Fuentes \" carpeta. (Windows)
2. convertir la fuente en cualquier otro formato que usted desea para la compatibilidad (TTF, EOT, SVG, WOFF)

3. Crear un archivo CSS con el siguiente código en él:

   @font-face{ 
       font-family: 'FontName'; 
       src: url('path/to/webfont.eot'); 
       src: url('path/to/webfont.woff'), 
        url('path/to/webfont.ttf'), 
        url('path/to/webfont.svg') 
   } 
   

4. Ahora en su archivo CSS principal, use la etiqueta "font-family" para seleccionar su fuente web.

voy a señalar una vez más la importancia de tener una licencia válida para la fuente web, en la compra de una licencia asegurarse de que dispone de los derechos de uso de la fuente en la web. Algunas fuentes pueden venir con un paquete de fuente web con el CSS y las fuentes ya preparadas para usted.