[CSS] Segoe UI 폰트 css사용하기

영문에서 사용되는 font를 이쁘게 하기 위해서,

Segoe UI를 많이들 사용하는데요.

CSS을 다음과 같이 사용하시면, Segoe UI Lighter가 됩니다.

Segoe UI 폰트

Segoe UI Itatlic

 

font-family: Segoe UI;
font-weight: lighter;

 출처: "Segoe UI Light" font does not render in FireFox7

 

 

 

[ Segoe UI폰트를 사파리에서 사용하기 ]

First of all there are difrent types of fonts for every browser. To make sure that it will work in every browser You need to put at least 3 types: eot, ttf, woff (and svg). The best way to get those is to use one of the links: http://www.fontsquirrel.com/fontface/generator, http://fontface.codeandmore.com/

It's very simple and You will get a set of ready to use fonts. After downloading Your set You will find the example file where You will see how to use Your new fonts.

In Your case it can be like:

 

@font-face {
    font-family: 'Segoe';
    src: url('/font_path/Segoe.eot');
    src: url('/font_path/Segoe.eot?#iefix') format('embedded-opentype'),
         url('/font_path/Segoe.woff') format('woff'),
         url('/font_path/Segoe.ttf') format('truetype'),
         url('/font_path/Segoe.svg#Segoe') format('svg');
    font-weight: normal;
    font-style: normal;
}

/font_path/ is the relative path to your fonts according to this css file. Usually it's ../fonts/.

Why You need all those?

ttf, otf - for: FireFox, Chrome < 6, Safari and Opera

oet - for: Internet Explorer < 9

svg - for: Safari Mobile (iPhone, iPad for iOS < 4.2), Android browser

woff - for: Internet Explorer >= 9, FireFox >= 3.6, Chrome >= 6

Segoe.eot - and others are links (relative in this case) to those font files.

EDIT

Because fontsquirrel.com don't render some fonts, andfontface.codeandmore.com have changed to commercial sometimes You will have to google for some other online font generator.

EDIT

If fontsquirrel.com won't help You try to use: http://www.font2web.com/

 

출처: How to render Segoe UI font in different navigators and OS's

 

 

 

[ Typography에사 사용되는 Segoe UI ]

(Metro UI CSS)

Var	Font family
@fontName:	"Segoe UI", "Open Sans", serif;
@fontNameLight:	"Segoe UI Light", "Open Sans Light", serif;
@fontNameBold:	"Segoe UI Bold", "Open Sans Bold", serif;

 

출처: http://metroui.org.ua/typography.html