fix: build and publish woff and woff2 files

WTTJ · Dec 19, 2023 · 929b9a0 · 929b9a0
1 parent cf82b39
commit 929b9a0
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 13 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -85,12 +85,12 @@ jobs:
             yarn build:core
       - aws-s3/sync:
           from: packages/IconFont/fonts
-          to: s3://welcome-ui/public/fonts/icon-font/$ICON_FONT_HASH --cache-control 'public, max-age=31536000' --exclude '*' --include 'welcome-icon-font.woff2'
+          to: s3://welcome-ui/public/fonts/icon-font/$ICON_FONT_HASH --cache-control 'public, max-age=31536000' --exclude '*' --include 'welcome-icon-font.woff, welcome-icon-font.woff2'
           arguments: |
             --metadata GitCommit=$CIRCLE_SHA1 --delete
       - aws-s3/sync:
           from: packages/IconFont/fonts
-          to: s3://wttj-production/fonts/icon-font/$ICON_FONT_HASH --cache-control 'public, max-age=31536000' --exclude '*' --include 'welcome-icon-font.woff2'
+          to: s3://wttj-production/fonts/icon-font/$ICON_FONT_HASH --cache-control 'public, max-age=31536000' --exclude '*' --include 'welcome-icon-font.woff, welcome-icon-font.woff2'
           arguments: |
             --metadata GitCommit=$CIRCLE_SHA1 --delete
 

diff --git a/packages/Core/src/utils/font.ts b/packages/Core/src/utils/font.ts
@@ -8,7 +8,7 @@ type FontVariation = {
   weight?: string
   style?: string
   isVariable?: boolean
-  extension?: string
+  extensions?: string[]
   unicodeRange?: string
 }
 
@@ -19,24 +19,26 @@ type Font = {
 
 function getSource(
   url: FontVariation['url'],
-  extension: FontVariation['extension'],
+  extensions: FontVariation['extensions'],
   isVariable: FontVariation['isVariable']
 ) {
-  const formattedExtension = extension === 'ttf' ? 'truetype' : extension
-
   /** variable icon font */
   if (isVariable) {
-    return `url('${url}.${extension}') format('${formattedExtension}-variations');`
+    return extensions
+      .map((extension: string) => `url('${url}.${extension}') format('${extension}-variations');`)
+      .join(', ')
   }
 
-  return `url('${url}.${extension}') format('${formattedExtension}')`
+  return extensions
+    .map((extension: string) => `url('${url}.${extension}') format('${extension}');`)
+    .join(', ')
 }
 
 function getFont({
   name,
   variation: {
     display = 'swap',
-    extension = 'woff2',
+    extensions = ['woff2', 'woff'],
     isVariable,
     style,
     unicodeRange,
@@ -47,7 +49,7 @@ function getFont({
   return css`
     @font-face {
       font-family: ${name};
-      src: ${getSource(url, extension, isVariable)};
+      src: ${getSource(url, extensions, isVariable)};
       font-display: ${display};
       ${weight &&
       css`

diff --git a/scripts/webfont-build.js b/scripts/webfont-build.js
@@ -55,7 +55,7 @@ const writeIconFont = files => {
       dest: `${ICON_FONT_PATH}/fonts`,
       fontName: FONT_NAME,
       codepoints: newUnicodeMap,
-      types: ['woff2'],
+      types: ['woff', 'woff2'],
       templateOptions: {
         classPrefix: 'wui-icon-',
         baseSelector: 'i',

diff --git a/scripts/webfont-deploy.sh b/scripts/webfont-deploy.sh
@@ -8,11 +8,11 @@ if [[ -f "$FONT_FILE" ]]; then
 
   echo "Copying fonts to s3://welcome-ui/public/fonts/icon-font/$ICON_FONT_HASH/"
 
-  aws s3 sync $FONTS_DIR s3://welcome-ui/public/fonts/icon-font/$ICON_FONT_HASH/ --cache-control 'public, max-age=31536000' --exclude '*' --include 'welcome-icon-font.woff2'
+  aws s3 sync $FONTS_DIR s3://welcome-ui/public/fonts/icon-font/$ICON_FONT_HASH/ --cache-control 'public, max-age=31536000' --exclude '*' --include 'welcome-icon-font.woff, welcome-icon-font.woff2'
 
   echo "Copying fonts to s3://wttj-production/fonts/icon-font/$ICON_FONT_HASH/"
 
-  aws s3 sync $FONTS_DIR s3://wttj-production/fonts/icon-font/$ICON_FONT_HASH/ --cache-control 'public, max-age=31536000' --exclude '*' --include 'welcome-icon-font.woff2'
+  aws s3 sync $FONTS_DIR s3://wttj-production/fonts/icon-font/$ICON_FONT_HASH/ --cache-control 'public, max-age=31536000' --exclude '*' --include 'welcome-icon-font.woff, welcome-icon-font.woff2'
 else
   echo "Font doesn't exist. Please run 'yarn webfont:build'"
   exit 1