1

We are trying to put all of our file assets on s3 and cloudfront to reduce load on our server. For almost all file types things are working fine and Cloudfront is caching files. For fonts files there always seems to be a miss. What am I doing wrong?

When we first put the fonts online and called them we got an error which pointed to the CORS protocol issue. This is where we learned about CORS.

We followed this solution, Amazon S3 CORS (Cross-Origin Resource Sharing) and Firefox cross-domain font loading

Here is my CORS setting. We have to have AllowedOrigion as a wildcard because we are supporting many websites.

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Content-*</AllowedHeader>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>

I setup behavior rules in the cloudfront distribution for each font type type: /*.ttf

with Whitelist Headers to origin

I checked with curl and there is always a miss and access-control-allow-origin is always *

curl -i -H "Origin: https://www.example.com" https://path/to-file/font-awesome/fonts/fontawesome-webfont.woff

HTTP/2 200
content-type: binary/octet-stream
content-length: 98024
date: Tue, 08 Jan 2019 09:07:03 GMT
access-control-allow-origin: *
access-control-allow-methods: GET
access-control-max-age: 3000
last-modified: Mon, 07 Jan 2019 08:44:46 GMT
etag: "fee66e712a8a08eef5805a46892932ad"
accept-ranges: bytes
server: AmazonS3
vary: Origin
x-cache: Miss from cloudfront
via: 1.1 d76fac2b5a2f460a1cbffb76189f59ef.cloudfront.net (CloudFront)
x-amz-cf-id: 1azzRgw3h33KXW90xyPMXCTUAfZdXjCb2osrSkxxdU5lCoq6VNC7fw==

I should also mentioned that when I go directly to the file it downloads instead of opens in browser (which might be the correct behavior, not sure).

The files are loading today, which is good but in the end I would like for Cloudfront to server the files when it has it in the cache instead of always missing.

Kalman
  • 31
  • 3

1 Answers1

0

Your Curl dump indicate there is no "cache-control" headers in the response. You should have this header setted (https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Expiration.html). Best practice is to havec cache-control to "public, max-age=xxx, s-maxage=yyy" (xxx = time cached on user browser, yyy time cached in CDN).

Do you have this header for other ressources (like a css or js) and not for woff ?

Check this : how to add cache control in AWS S3?

JayMore
  • 642
  • 6
  • 20
  • Thanks! I went into s3 and set the cache control max age for the fonts and it is now shows a hit. – Kalman Jan 09 '19 at 23:21