Search code examples
htmlcssfontsembedtruetype

Embedding TTF Font @Font-face

Been trying for a while, I've done 

<style> 
@font-family {
 font-family: 'bebas';
 src: url( monthly.square7.ch/bebas/bebas.ttf; } 

span {
font-family: bebas ;
}
</style>
<span> hello </span>

<style>
@font-face {
font-family: bebas;
src: url(monthly.bplaced.net/bebas/bebas.ttf);
}
</style>

<div style="font-family: bebas;">
Bebas font test
</div>

and inline which apparently wont work

--- The font is located at http://monthly.square7.net/bebas/bebas.ttf

I also asked earlier but had no luck. Does anyone know how to embed ttf fonts in website

Solution

  • Assuming the information from your previous post, and that your CSS is on monthly.co.vu, you're running into Cross-Origin Resource Sharing problems.

    You will likely have the following error in your browser console:

    Redirect at origin 'http://monthly.square7.ch' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://monthly.co.vu' is therefore not allowed access.

    Your font is being served from a different domain than your page, so you'll need to serve the following header with your TTF:

    Access-Control-Allow-Origin: monthly.co.vu

    Then your font can be embedded in the page.

    Alternatively, you should simply host the font on the same domain as the page you're accessing, and avoid these problems.