CODEWITHSUNDEEP
htmlcss
Nistor Alexandru
Nistor Alexandru

Reputation: 5393

Font-Face not working

Hi I am trying to learn to use font-face to add a different font to my browser but I seem to be missing something in the code because the style is not applying. Here is my code:

<div id="logo">
      <img src="img/header/THANATHOS.png" alt="Logo"/>
      <p>a gamers community</p>
</div>

<style>
@font-face {
    font-family: 'HarlowSolid';
    src: url('Fonts/normal/HarlowSolid.eot'); /* IE9 Compat Modes */
    src: url('Fonts/normal/HarlowSolid.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('Fonts/normal/HarlowSolid.woff') format('woff'), /* Modern Browsers */
         url('Fonts/normal/HarlowSolid.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('Fonts/normal/HarlowSolid.svg#svgFontName') format('svg'); /* Legacy iOS */
}

div#logo p{
    font-family: HarlowSolid , Helvetica , sans-serif;
}
</style>

What am I doing wrong here?

Upvotes: 1

Views: 175

Answers (2)

Peter H&#248;jbjerg S&#248;rensen
Peter H&#248;jbjerg S&#248;rensen

Reputation: 19

Are the second src right? Have a look at http://www.w3schools.com/css3/css3_fonts.asp

@font-face {
    font-family: 'HarlowSolid';
    src: url('Fonts/normal/HarlowSolid.eot'); /* IE9 Compat Modes */
    **src:** url('Fonts/normal/HarlowSolid.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('Fonts/normal/HarlowSolid.woff') format('woff'), /* Modern Browsers */
         url('Fonts/normal/HarlowSolid.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('Fonts/normal/HarlowSolid.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Upvotes: 2

Alexander Wigmore
Alexander Wigmore

Reputation: 3186

Make sure you've either wrapped it in <style> /* Code Here */</style> tags, or put it in your style sheet.

Also check that the path to the file you've written that code in. So if it's in /css/style.css and harlowSolid.woff is in root folder called fonts, then your code would need to be url('../Fonts/normal/HarlowSolid.woff')

Also check that the browser you're testing has support for font-face. Though with the conditionals you've included it should be unlikely to face a problem.

Just to confirm: The actual code you've posted is correct, so check your file exists/structured properly.

If you're using Chrome/Safari/FF, you can usually right click -> Inspect Element, look out for the red cog symbol in the bottom right corner which will denote coding/resource errors. (Click it to see the description of the problem.)

Upvotes: 5

Related Questions