CODEWITHSUNDEEP
htmlcssfontsfont-face
DanielNolan
DanielNolan

Reputation: 741

why is @font-face not working

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>

Upvotes: 0

Views: 320

Answers (5)

Harutyun Abgaryan
Harutyun Abgaryan

Reputation: 2023

Set font famly name same ANd check exist in your server font 

@font-face {
font-family: 'Segoe UI Light';
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;

}
h1,h2,h3{
  font-family: 'Segoe UI Light';
}


<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>

Upvotes: 0

Sai
Sai

Reputation: 1949

remove the single quotes from the font name...

@font-face {
    font-family: 'myfamily';
    ...
}

change 'myfamily' tpo just myfamily as in...

@font-face {
   font-family: myfamily;
   ...
}

hope this helps

Upvotes: 0

thetont
thetont

Reputation: 810

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>

Upvotes: 0

Matt Maclennan
Matt Maclennan

Reputation: 1304

You have called the font font-family: 'myfamily'; in the CSS, but you reference it as font-family: 'Segoe UI Light' in the HTML.

This looks like the issue.

Upvotes: 0

jleggio
jleggio

Reputation: 1286

You're simply calling the wrong font-family name

You need to change the css to:

CSS

@font-face {
    font-family: 'Segoe UI Light';
}

So that it matches what you have in your HTML:

HTML

<h1 style="font-family: 'Segoe UI Light'">we are the blah blah blah</h1>

Upvotes: 1

Related Questions