I am trying to use a custom font on a webpage rather than an image.

 

I downloaded a 'kit' from fontsquirrel and pasted the generated css into my existing css file. I then uploaded the actual font files (e.g. ttf) to a directory titled 'fonts' and edited the css to point at the full URL while the font files are located

 

I've referenced this in my index page, but the text is not appearing in the new font. I've attached a notepad file showing the section of the css I am talking about - can anyone point out where I am going wrong?

 

Thanks

 

 

My code.txt

You're missing a ' (apostrophe) before your AngelinaRegular in your @font-face code:

 

Your code...

@font-face {
    font-family: AngelinaRegular';
    src: url(http://www.mysite.co.uk/testing/fonts/angelina-webfont.eot);
    src: url(http://www.mysite.co.uk/testing/fonts/angelina-webfont.eot?#iefix) format('embedded-opentype'),
         url(http://www.mysite.co.uk/testing/fonts/angelina-webfont.woff) format('woff'),
         url(http://www.mysite.co.uk/testing/fonts/angelina-webfont.ttf) format('truetype'),
         url(http://www.mysite.co.uk/testing/fonts/angelina-webfont.svg#angelinaregular) format('svg');
    font-weight: normal;
    font-style: normal;

}

 

 

Should be...

 

@font-face {
    font-family: 'AngelinaRegular';
    src: url(http://www.mysite.co.uk/testing/fonts/angelina-webfont.eot);
    src: url(http://www.mysite.co.uk/testing/fonts/angelina-webfont.eot?#iefix) format('embedded-opentype'),
         url(http://www.mysite.co.uk/testing/fonts/angelina-webfont.woff) format('woff'),
         url(http://www.mysite.co.uk/testing/fonts/angelina-webfont.ttf) format('truetype'),
         url(http://www.mysite.co.uk/testing/fonts/angelina-webfont.svg#angelinaregular) format('svg');
    font-weight: normal;
    font-style: normal;

}

Edited February 28, 201313 yr by Alluziion

Thanks for the reply. I've corrected this but still have the same problem

Okay... try this instead

#content2 {
	height:65%;
	width:65%;					/* Edited when right nav removed */
	margin:20px 0px 0px 0px;	/* Space after logo before content starts  Changed bottom to 0 after social media*/
	text-align:left;
	font-family: 'AngelinaRegular';
    font-weight: normal;
    font-style: normal;
	color:#000000;
}

@font-face {
    font-family: 'AngelinaRegular';
    src: url('http://www.mysite.co.uk/testing/fonts/angelina-webfont.eot');
    src: url('http://www.mysite.co.uk/testing/fonts/angelina-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://www.mysite.co.uk/testing/fonts/angelina-webfont.woff') format('woff'),
         url('http://www.mysite.co.uk/testing/fonts/angelina-webfont.ttf') format('truetype'),
         url('http://www.mysite.co.uk/testing/fonts/angelina-webfont.svg#angelinaregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

Thanks for your help, but it is still not working - any other thoughts?

It could be a number of things:

 

• Your file path is incorrect (I tend to store my fonts in a folder called 'fonts' and use the following in my stylesheet ../fonts/ instead of the website URL.
• Your server does not support the mime types required for @font-face (http://stackoverflow.com/questions/3594823/mime-type-for-woff-fonts as an example).
• You are not targeting the correct element in your CSS. Try using H1 as a selector instead of #content2 (

• h1 { font-family: 'AngelinaRegular';}

• ).
• Your issue could be browser specific, have you tested in a few?

Alternatively take a look at http://www.fontsquirrel.com/blog/2010/11/troubleshooting-font-face-problems.

Try using relative paths rather than absolute.

Also, as JP said, try wrapping your text in a <h> or <p> tag and targeting it directly.

Thanks, managed to resolve this now using relative paths