diff --git a/scripts/helpers/font.js b/scripts/helpers/font.js
index 57b95bf..ba8f018 100644
--- a/scripts/helpers/font.js
+++ b/scripts/helpers/font.js
@@ -18,7 +18,7 @@ module.exports = function() {
   });
 
   fontFamilies = fontFamilies.map(name => name.trim().replace(/\s/g, '+') + fontStyles);
-  fontFamilies = [...new Set(fontFamilies)].join('|');
+  fontFamilies = [...new Set(fontFamilies)].join('%7C');
 
   // Merge extra parameters to the final processed font string
   return fontFamilies ? `<link rel="stylesheet" href="${fontHost}/css?family=${fontFamilies}&display=swap&subset=latin,latin-ext">` : '';
diff --git a/test/helpers/font.js b/test/helpers/font.js
index e1eeb97..27d660f 100644
--- a/test/helpers/font.js
+++ b/test/helpers/font.js
@@ -55,7 +55,7 @@ describe('font', () => {
       family  : 'Palatino',
       external: true
     };
-    nextFont().should.eql(`<link rel="stylesheet" href="${fontHost}/css?family=Amatic+SC${fontStyles}|Palatino${fontStyles}&display=swap&subset=latin,latin-ext">`);
+    nextFont().should.eql(`<link rel="stylesheet" href="${fontHost}/css?family=Amatic+SC${fontStyles}%7CPalatino${fontStyles}&display=swap&subset=latin,latin-ext">`);
   });
 
   it('duplicate', () => {
@@ -81,6 +81,6 @@ describe('font', () => {
       family  : 'Palatino',
       external: true
     };
-    nextFont().should.eql(`<link rel="stylesheet" href="${fontHost}/css?family=Roboto+Slab${fontStyles}|Noto+Serif+SC${fontStyles}|Palatino${fontStyles}&display=swap&subset=latin,latin-ext">`);
+    nextFont().should.eql(`<link rel="stylesheet" href="${fontHost}/css?family=Roboto+Slab${fontStyles}%7CNoto+Serif+SC${fontStyles}%7CPalatino${fontStyles}&display=swap&subset=latin,latin-ext">`);
   });
 });