I want everywhere to be by default 'SegoeUI' to normal. And to work font-weight when exposed to any class. Now does not work. p.class1 is still normal, although it costs lighter.

<h1>Bold</h1> <p class="class1">Lighter</p> <p>Normal</p> @font-face{ font-family: 'SegoeUI'; src:url('http://is-microsoft.com/fonts/Segoe-UI/Cyrillic/Light/latest.eot'); src:url('http://is-microsoft.com/fonts/Segoe-UI/Cyrillic/Light/latest.eot?#iefix') format('embedded-opentype'), url('http://is-microsoft.com/fonts/Segoe-UI/Cyrillic/Light/latest.woff') format('woff'), url('http://is-microsoft.com/fonts/Segoe-UI/Cyrillic/Light/latest.ttf') format('truetype'), url('http://is-microsoft.com/fonts/Segoe-UI/Cyrillic/Light/latest.svg#web') format('svg'); font-weight: lighter; font-style: normal; } @font-face{ font-family: 'SegoeUI'; src:url('http://is-microsoft.com/fonts/Segoe-UI/Cyrillic/Bold/latest.eot'); src:url('http://is-microsoft.com/fonts/Segoe-UI/Cyrillic/Bold/latest.eot?#iefix') format('embedded-opentype'), url('http://is-microsoft.com/fonts/Segoe-UI/Cyrillic/Bold/latest.woff') format('woff'), url('http://is-microsoft.com/fonts/Segoe-UI/Cyrillic/Bold/latest.ttf') format('truetype'), url('http://is-microsoft.com/fonts/Segoe-UI/Cyrillic/Bold/latest.svg#web') format('svg'); font-weight: bold; font-style: normal; } @font-face{ font-family: 'SegoeUI'; src:url('http://is-microsoft.com/fonts/Segoe-UI/Cyrillic/Normal/latest.eot'); src:url('http://is-microsoft.com/fonts/Segoe-UI/Cyrillic/Normal/latest.eot?#iefix') format('embedded-opentype'), url('http://is-microsoft.com/fonts/Segoe-UI/Cyrillic/Normal/latest.woff') format('woff'), url('http://is-microsoft.com/fonts/Segoe-UI/Cyrillic/Normal/latest.ttf') format('truetype'), url('http://is-microsoft.com/fonts/Segoe-UI/Cyrillic/Normal/latest.svg#web') format('svg'); font-weight: normal; font-style: normal; } body { font-family: "SegoeUI"; } h1 { font-weight: bold; } p.class1 { font-weight: lighter; }

    1 answer 1

    Check out this page on fonts4web

    The way to connect the font is different from yours. To switch the font used font-family change. Also fonts with different styles are connected with different names font-family

     /* font-family: "SegoeUIRegular"; */ @font-face { font-family: "SegoeUIRegular"; src: url("../fonts/SegoeUIRegular/SegoeUIRegular.eot"); src: url("../fonts/SegoeUIRegular/SegoeUIRegular.eot?#iefix")format("embedded-opentype"), url("../fonts/SegoeUIRegular/SegoeUIRegular.woff") format("woff"), url("../fonts/SegoeUIRegular/SegoeUIRegular.ttf") format("truetype"); font-style: normal; font-weight: normal; } /* font-family: "SegoeUIBold"; */ @font-face { font-family: "SegoeUIBold"; src: url("../fonts/SegoeUIBold/SegoeUIBold.eot"); src: url("../fonts/SegoeUIBold/SegoeUIBold.eot?#iefix")format("embedded-opentype"), url("../fonts/SegoeUIBold/SegoeUIBold.woff") format("woff"), url("../fonts/SegoeUIBold/SegoeUIBold.ttf") format("truetype"); font-style: normal; font-weight: normal; } /* font-family: "SegoeUIItalic"; */ @font-face { font-family: "SegoeUIItalic"; src: url("../fonts/SegoeUIItalic/SegoeUIItalic.eot"); src: url("../fonts/SegoeUIItalic/SegoeUIItalic.eot?#iefix")format("embedded-opentype"), url("../fonts/SegoeUIItalic/SegoeUIItalic.woff") format("woff"), url("../fonts/SegoeUIItalic/SegoeUIItalic.ttf") format("truetype"); font-style: normal; font-weight: normal; } /* font-family: "SegoeUILight"; */ @font-face { font-family: "SegoeUILight"; src: url("../fonts/SegoeUILight/SegoeUILight.eot"); src: url("../fonts/SegoeUILight/SegoeUILight.eot?#iefix")format("embedded-opentype"), url("../fonts/SegoeUILight/SegoeUILight.woff") format("woff"), url("../fonts/SegoeUILight/SegoeUILight.ttf") format("truetype"); font-style: normal; font-weight: normal; } /* font-family: "SegoeUISemiBold"; */ @font-face { font-family: "SegoeUISemiBold"; src: url("../fonts/SegoeUISemiBold/SegoeUISemiBold.eot"); src: url("../fonts/SegoeUISemiBold/SegoeUISemiBold.eot?#iefix")format("embedded-opentype"), url("../fonts/SegoeUISemiBold/SegoeUISemiBold.woff") format("woff"), url("../fonts/SegoeUISemiBold/SegoeUISemiBold.ttf") format("truetype"); font-style: normal; font-weight: normal; }

    See sample code.

     @font-face { font-family: 'SegoeUILight'; src: url('https://is-microsoft.com/fonts/Segoe-UI/Cyrillic/Light/latest.eot'); src: url('https://is-microsoft.com/fonts/Segoe-UI/Cyrillic/Light/latest.eot?#iefix') format('embedded-opentype'), url('https://is-microsoft.com/fonts/Segoe-UI/Cyrillic/Light/latest.woff') format('woff'), url('https://is-microsoft.com/fonts/Segoe-UI/Cyrillic/Light/latest.ttf') format('truetype'), url('https://is-microsoft.com/fonts/Segoe-UI/Cyrillic/Light/latest.svg#web') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'SegoeUIBold'; src: url('https://is-microsoft.com/fonts/Segoe-UI/Cyrillic/Bold/latest.eot'); src: url('https://is-microsoft.com/fonts/Segoe-UI/Cyrillic/Bold/latest.eot?#iefix') format('embedded-opentype'), url('https://is-microsoft.com/fonts/Segoe-UI/Cyrillic/Bold/latest.woff') format('woff'), url('https://is-microsoft.com/fonts/Segoe-UI/Cyrillic/Bold/latest.ttf') format('truetype'), url('https://is-microsoft.com/fonts/Segoe-UI/Cyrillic/Bold/latest.svg#web') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'SegoeUIRegular'; src: url('https://is-microsoft.com/fonts/Segoe-UI/Cyrillic/Normal/latest.eot'); src: url('https://is-microsoft.com/fonts/Segoe-UI/Cyrillic/Normal/latest.eot?#iefix') format('embedded-opentype'), url('https://is-microsoft.com/fonts/Segoe-UI/Cyrillic/Normal/latest.woff') format('woff'), url('https://is-microsoft.com/fonts/Segoe-UI/Cyrillic/Normal/latest.ttf') format('truetype'), url('https://is-microsoft.com/fonts/Segoe-UI/Cyrillic/Normal/latest.svg#web') format('svg'); font-weight: normal; font-style: normal; } .bold { font-family: 'SegoeUIBold'; } .light { font-family: 'SegoeUILight'; } .normal { font-family: "SegoeUIRegular"; } 
     <h3 class="bold"> БъСшь этих мягких французских Π±ΡƒΠ»ΠΎΡ‡Π΅ΠΊ (оТидаю bold) </h3> <h3 class="normal"> БъСшь этих мягких французских Π±ΡƒΠ»ΠΎΡ‡Π΅ΠΊ (оТидаю notmal) </h3> <h3 class="light"> БъСшь этих мягких французских Π±ΡƒΠ»ΠΎΡ‡Π΅ΠΊ (оТидаю light) </h3>