Last active
July 27, 2021 06:22
-
-
Save oakbow/7412717 to your computer and use it in GitHub Desktop.
for using Web fonts with FireFox on AWS S3 + CloudFront.There are CORS and CSS configurations.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| target Distribution -> Behaviors -> Edit -> Forward Query Strings -> turn 'Yes' |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- S3 Management Console -> target bucket -> properties -> edit(add) CORS configuration --> | |
| <!-- change and add AllowedOrigin for your environment. --> | |
| <?xml version="1.0" encoding="UTF-8"?> | |
| <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> | |
| <CORSRule> | |
| <AllowedOrigin>http://jobhub.jp</AllowedOrigin> | |
| <AllowedOrigin>https://jobhub.jp</AllowedOrigin> | |
| <AllowedMethod>GET</AllowedMethod> | |
| <AllowedMethod>HEAD</AllowedMethod> | |
| <MaxAgeSeconds>3000</MaxAgeSeconds> | |
| <AllowedHeader>Content-*</AllowedHeader> | |
| <AllowedHeader>Host</AllowedHeader> | |
| <AllowedHeader>*</AllowedHeader> | |
| </CORSRule> | |
| </CORSConfiguration> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* this is icomoon css. but i think other webfont css is similar to this. */ | |
| /* normal webfonts configures start */ | |
| @font-face { | |
| font-family: "icomoon"; | |
| font-style: normal; | |
| font-weight: normal; | |
| src: url("//{your.cloudfront.net}/path/font.eot"), | |
| src: url("//{your.cloudfront.net}/path/font.eot?#iefix") format("embedded-opentype"), | |
| url("//{your.cloudfront.net}/path/font.woff") format("woff"), | |
| url("//{your.cloudfront.net}/path/font.ttf") format("truetype"), | |
| url("//{your.cloudfront.net}/path/font.svg#icomoon") format("svg"); | |
| } | |
| /* normal webfonts configures end */ | |
| /* you need add a configure for each AllowedOrigin */ | |
| /* Firefox hack start */ | |
| /* not SSL */ | |
| @-moz-document url-prefix("http://jobhub.jp") { | |
| @font-face { | |
| font-family: "icomoon"; | |
| font-style: normal; | |
| font-weight: normal; | |
| src:url("//{your.cloudfront.net}/path/font.woff?firefox01") format("woff"), | |
| url("//{your.cloudfront.net}/path/font.woff?firefox02") format("woff"), | |
| url("//{your.cloudfront.net}/path/font.ttf?firefox01") format("truetype"), | |
| url("//{your.cloudfront.net}/path/font.ttf?firefox02") format("truetype"); | |
| } | |
| } | |
| /* SSL */ | |
| @-moz-document url-prefix("https://jobhub.jp") { | |
| @font-face { | |
| font-family: "icomoon"; | |
| font-style: normal; | |
| font-weight: normal; | |
| src:url("//{your.cloudfront.net}/path/font.woff?firefox_ssl01") format("woff"), | |
| url("//{your.cloudfront.net}/path/font.woff?firefox_ssl02") format("woff"), | |
| url("//{your.cloudfront.net}/path/font.ttf?firefox_ssl01") format("truetype"), | |
| url("//{your.cloudfront.net}/path/font.ttf?firefox_ssl02") format("truetype"); | |
| } | |
| } | |
| /* Firefox hack end */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I learned AWS configurations from http://stackoverflow.com/questions/12229844/amazon-s3-cors-cross-origin-resource-sharing-and-firefox-cross-domain-font-loa.