html - why is @font-face not working -

html - why is @font-face not working -

i have extremely frustrating problem. trying install font website building font not seem want work. have of different font formats different browsers. code below.

a live link of website can found here, future users shall removing question answered

css font

<style> @font-face { font-family: 'myfamily'; src: url('segoeuil.eot'); src: url('segoeuil.eot?#iefix') format('embedded-opentype'), url('segoeuil.woff2') format('woff2'), url('segoeuil.woff') format('woff'), url('segoeuil.ttf') format('truetype'), url('segoeuil.svg#segoe_uilight') format('svg'); font-weight: normal; font-style: normal; }

html code

<ul class="bxslider"> <li style="background-image: url(images/slide1.png);"><div style="text-align: center;"> <div> <h1 style="font-family: 'segoe ui light'">we blah blah blah</h1> </div><h2>we blah blah blah.</h2> </div> <div id="apdiv2"></div> </li> <li style="background-image: url(images/slide2.png);"></li> <li style="background-image: url(images/slide3.png);;"></li> <li style="background-image: url(images/slide4.png);"></li> <li style="background-image: url(images/slide5.png);"></li> </ul>

in css give font-family name (font-family: 'myfamily';), in html trying target font different name... right code create work is:

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

and then

<ul class="bxslider"> <li style="background-image: url(images/slide1.png);"><div style="text-align: center;"> <div> <h1 style="font-family: 'myfamily'">we blah blah blah</h1> </div><h2>we blah blah blah.</h2> </div> <div id="apdiv2"></div> </li> <li style="background-image: url(images/slide2.png);"></li> <li style="background-image: url(images/slide3.png);;"></li> <li style="background-image: url(images/slide4.png);"></li> <li style="background-image: url(images/slide5.png);"></li> </ul>

html css fonts font-face