why is @font-face not working

Question

I have an extremely frustrating problem. I am trying to install a font to a website which I am building however the font does not seem to want to work. I have all of the different font formats for all the different browsers. My code is below.

A live link of the website can be found HERE, however for future users I shall be removing this as soon as the question is 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 are the blah blah blah</h1>
</div><h2>we are 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>

Answer 1

in your css you give the font-family a name (font-family: 'myfamily';), then in HTML you trying to target to the font with a different name... the correct code to make this 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 are the blah blah blah</h1>
</div><h2>we are 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>