0

I am having trouble getting my custom @font-face to work. The <p> I apply this class style to just defaults to Arial. Whats going wrong here?

<style>
.stonefont
@font-face {
    font-family: 'effrastdltwebfontwoff';
    src: url('http://s3.amazonaws.com/ManualUploads/rosettastone/font/stone-webfont.eot');
    src: url('http://s3.amazonaws.com/ManualUploads/rosettastone/font/stone-webfont.eot?#iefix'),     format('embedded-opentype'),
     url('http://s3.amazonaws.com/ManualUploads/rosettastone/font/stone-webfont.woff') format('woff'),
     url('http://s3.amazonaws.com/ManualUploads/rosettastone/font/stone-webfont.ttf') format('truetype'),
     url('http://s3.amazonaws.com/ManualUploads/rosettastone/font/stone-webfont.svg#effrastdltwebfontwoff') format('svg');
font-weight: normal;
font-style: normal;

}

p{

font-family: "effrastdltwebfontwoff"; 
background:transparent; text-shadow: none; border-radius: 0; box-shadow: none; position:absolute;     font-size:18px;text-align:center; z-index:99; top:157px; left:64.5px; padding: 0 7px; overflow:hidden; color:black; margin:0; border:0;height:37px;width:184px;"

}
</style>

Thanks
Improve this question

3 Answers 3

Reset to default
4

Remove .stonefont before @font-face you're having. Which is causing font not to work.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

this did not fix it im afriad.
How are you using the font for the elements??
Are you doing p {font-family:"effrastdltwebfontwoff";}?
1

Firstly, remove the .stonefont before @font-face.

I would recommend uploading the font files to your FTP rather than making external requests, as you mentioned you are getting loading errors.

Apart from adding the font files in your CSS, you also need to tell the p element to use the font. (but remember to include a fallback)

p {font-family: 'effrastdltwebfontwoff', Arial, sans-serif;}

Or if you want to apply just this font as a class, then change p to .stonefont and remember to add the class to any element you want to apply that font.

HTML:

<p class='stonefont'>Some text</p>

CSS: (Note the single quotes)

.stonefont {font-family: 'effrastdltwebfontwoff', Arial, sans-serif;}
Improve this answer

3 Comments

Are you able to inspect element on the page? Are you getting any console errors that's sstopping the files from loading?
By the way, I've noticed you're using double quotes in your font-family declaration, and your font-face is declaring single quotes. Use one or the other, and try it again
Okay, so the fonts aren't actually being loaded at all. Are you able to download the fonts and upload them to your webspace? For this, you need to make sure you have the correct licensing for the fonts.
0

After the spurious .stonefont is removed as suggested in other answers, the following error message can be seen in Firefox console:

downloadable font: download failed (font-family: "effrastdltwebfontwoff" style:normal weight:normal stretch:normal src index:0): bad URI or cross-site access not allowed
source: http://s3.amazonaws.com/ManualUploads/rosettastone/font/stone-webfont.eot

Thus, this is a cross-site access issue. This could be fixed by the admin of the server that hosts the fonts, but assuming it’s their policy to disallow cross-site access, you need to download the fonts, create the suitable font files, and upload them onto your own server. Provided that the font copyright announcement allows that, of course.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.