It's worth discussing cross-origin resource sharing (CORS) here because the more static web content hosting you do in S3, the higher your chances are of needing to know about this, particularly where web fonts are concerned.

Some browsers implement a same origin policy restriction. This prevents the browser from loading certain kinds of assets from hostnames that are different from the page being displayed to the user. Web fonts fall under this restriction and are an often-cited example because when they don't load correctly, your website will usually look a lot different to how you intended. The solution to this is to add a CORS configuration to your bucket to allow its content to be loaded by the particular origin or hostname that requested it.

We'll leave the CORS configuration out of our full example, but if you need to add one to your bucket, here's how you can do it. Update your AllowedOrigins property to look similar to the following CloudFormation and you should be all set:

  ApexBucket: 
    Type: AWS::S3::Bucket 
    Properties: 
      BucketName: !Ref DomainName 
      AccessControl: PublicRead 
      WebsiteConfiguration: 
        IndexDocument: index.html 
        ErrorDocument: error.html 
      CorsConfiguration: 
        CorsRules: 
        - AllowedOrigins: 
            - example.net 
            - www.example.net 
            - example.com 
            - www.example.com 
          AllowedMethods: 
            - GET 
          MaxAge: 3000 
          AllowedHeaders: 
            - Content-* 
            - Host