CSS font embedding with own CDN not working

Question

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

Thomas Ghesquiere Thomas Ghesquiere · Accepted Answer · 2015-12-18T08:27:11

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)

CSS font embedding with own CDN not working

3 Answers