CODEWITHSUNDEEP
htmlcssfontsfont-awesome
Wai Yan Hein
Wai Yan Hein

Reputation: 14791

CSS font embedding with own CDN not working

I am having a problem with font embedding with CSS. I only have very few experiences with front end. Now I am about to deploy my website. But before I deploy it, first I uploaded all asset files like js,css and fonts to my CDN server. But my website is still on localhost. Then I changed all the asset link to my cdn link and I accessed my website on localhost. All javascript files on CDN are working perfectly with my local website. CSS files are also working fine except font embedding.

I am embedding font like this before I change links to CDN.

@font-face {
    font-family: 'TharLon';
    src: url(../fonts/tharlon.woff) format('woff');
}

.font-class{
    font-family:'TharLon' !important;
}

It is working perfectly when all are on localhost.

Then I changed all links to CDN and embedded font like this

@font-face {
    font-family: 'TharLon';
    src: url('http://d3ewfjbf99d22n.cloudfront.net/assets/fonts/tharlon.woff') format('woff');
}

.font-class{
    font-family:'TharLon' !important;
}

When I do this, font embedding is not

Upvotes: 2

Views: 3389

Answers (3)

ProtheanTom
ProtheanTom

Reputation: 534

You have to be sure that your CDN accepts the OPTIONS method used by some browsers before get an endpoint.

In CloudFront (AWS) only GET and HEAD methods are accepted by default

Upvotes: 0

Thomas Ghesquiere
Thomas Ghesquiere

Reputation: 502

This is most likely because of CORS.

As you seem to be using an Amazon S3, you can add the required headers as follows:

  • Login to your Amazon account.
  • Choose your S3 Bucket
  • Click on Edit CORS Configuration

  • Add following code and save all settings

    <CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>http://www.example1.com</AllowedOrigin>

        <AllowedMethod>PUT</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>DELETE</AllowedMethod>

        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

From: https://www.maxcdn.com/one/tutorial/how-to-use-cdn-with-webfonts/ (scroll down to S3 bucket)

Upvotes: 1

Jamie Barker
Jamie Barker

Reputation: 8246

It would appear your have a problem with CORS.

I just added this to a JSFiddle and I got this error:

Font from origin 'https://d3ewfjbf99d22n.cloudfront.net' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://fiddle.jshell.net' is therefore not allowed access.

Upvotes: 0

Related Questions