CODEWITHSUNDEEP
htmlcssfont-face
Antony West
Antony West

Reputation: 19

Custom font face not working

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

Upvotes: 0

Views: 883

Answers (3)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201836

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.

Upvotes: 0

Lee
Lee

Reputation: 4323

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

Upvotes: 1

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85613

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

Upvotes: 4

Related Questions