diff --git a/app/Utils/Helpers.php b/app/Utils/Helpers.php
index 07966956a2c0..a2507496ecf7 100644
--- a/app/Utils/Helpers.php
+++ b/app/Utils/Helpers.php
@@ -264,4 +264,17 @@ class Helpers
 
         return $value;
     }
+
+    /**
+     * Resolve the font from the supported fonts array.
+     * 
+     * @param string $font 
+     * @return array 
+     */
+    public static function resolveFont(string $font = 'Arial'): array
+    {
+        return $font
+            ? ['name' => str_replace('_', ' ', $font), 'url' => sprintf('https://fonts.googleapis.com/css2?family=%s&display=swap', str_replace('_', '+', $font))]
+            : ['name' => 'Arial', 'url' => ''];
+    }
 }
diff --git a/app/Utils/HtmlEngine.php b/app/Utils/HtmlEngine.php
index d5bd8020bfeb..e165c5102bfd 100644
--- a/app/Utils/HtmlEngine.php
+++ b/app/Utils/HtmlEngine.php
@@ -445,6 +445,8 @@ class HtmlEngine
         $data['_rate3'] = ['value' => '', 'label' => ctrans('texts.tax')];
 
         $data['$font_size'] = ['value' => $this->settings->font_size . 'px', 'label' => ''];
+        $data['$font_name'] = ['value' => Helpers::resolveFont($this->settings->primary_font)['name'], 'label' => ''];
+        $data['$font_url'] = ['value' => Helpers::resolveFont($this->settings->primary_font)['url'], 'label' => ''];
 
         $data['$invoiceninja.whitelabel'] = ['value' => 'https://raw.githubusercontent.com/invoiceninja/invoiceninja/v5-develop/public/images/new_logo.png', 'label' => ''];
 
diff --git a/database/migrations/2021_09_16_115919_update_designs.php b/database/migrations/2021_10_27_115919_update_designs.php
similarity index 100%
rename from database/migrations/2021_09_16_115919_update_designs.php
rename to database/migrations/2021_10_27_115919_update_designs.php
diff --git a/resources/views/pdf-designs/bold.html b/resources/views/pdf-designs/bold.html
index 8545f2b65c00..245515e97374 100644
--- a/resources/views/pdf-designs/bold.html
+++ b/resources/views/pdf-designs/bold.html
@@ -1,4 +1,6 @@
 <style id="style">
+    @import url($font_url);
+
     :root {
         --primary-color: $primary_color;
         --secondary-color: $secondary_color;
@@ -8,7 +10,7 @@
     body {
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
-        font-family: Arial, Helvetica, sans-serif;
+        font-family: $font_name, Helvetica, sans-serif;
         font-size: "$font_size";
         zoom: 80%;
     }
diff --git a/resources/views/pdf-designs/business.html b/resources/views/pdf-designs/business.html
index a300eddfb01e..29086bb2b409 100644
--- a/resources/views/pdf-designs/business.html
+++ b/resources/views/pdf-designs/business.html
@@ -1,4 +1,6 @@
 <style id="style">
+    @import url($font_url);
+    
     :root {
         --primary-color: $primary_color;
         --secondary-color: $secondary_color;
@@ -8,7 +10,7 @@
     body {
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
-        font-family: Arial, Helvetica, sans-serif;
+        font-family: $font_name, Helvetica, sans-serif;
         font-size: "$font_size";
         zoom: 80%;
     }
diff --git a/resources/views/pdf-designs/clean.html b/resources/views/pdf-designs/clean.html
index 5f6f5643bb96..d53a34ca3d2d 100644
--- a/resources/views/pdf-designs/clean.html
+++ b/resources/views/pdf-designs/clean.html
@@ -1,4 +1,6 @@
 <style id="style">
+    @import url($font_url);
+
     :root {
         --primary-color: $primary_color;
         --secondary-color: $secondary_color;
@@ -8,7 +10,7 @@
     body {
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
-        font-family: Arial, Helvetica, sans-serif;
+        font-family: $font_name, Helvetica, sans-serif;
         font-size: "$font_size";
         zoom: 80%;
     }
diff --git a/resources/views/pdf-designs/creative.html b/resources/views/pdf-designs/creative.html
index 453046cb6390..408db2250368 100644
--- a/resources/views/pdf-designs/creative.html
+++ b/resources/views/pdf-designs/creative.html
@@ -1,4 +1,6 @@
 <style id="style">
+    @import url($font_url);
+
     :root {
         --primary-color: $primary_color;
         --secondary-color: $secondary_color;
@@ -8,7 +10,7 @@
     body {
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
-        font-family: Arial, Helvetica, sans-serif;
+        font-family: $font_name, Helvetica, sans-serif;
         font-size: "$font_size";
         zoom: 80%;
     }
diff --git a/resources/views/pdf-designs/elegant.html b/resources/views/pdf-designs/elegant.html
index e7890badd73c..e5c457ad32c1 100644
--- a/resources/views/pdf-designs/elegant.html
+++ b/resources/views/pdf-designs/elegant.html
@@ -1,4 +1,6 @@
 <style id="style">
+    @import url($font_url);
+
     :root {
         --primary-color: $primary_color;
         --secondary-color: $secondary_color;
@@ -8,7 +10,7 @@
     body {
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
-        font-family: Arial, Helvetica, sans-serif;
+        font-family: $font_name, Helvetica, sans-serif;
         font-size: "$font_size";
         zoom: 80%;
     }
diff --git a/resources/views/pdf-designs/hipster.html b/resources/views/pdf-designs/hipster.html
index a2af152de09b..50d3260ae861 100644
--- a/resources/views/pdf-designs/hipster.html
+++ b/resources/views/pdf-designs/hipster.html
@@ -1,4 +1,6 @@
 <style id="style">
+    @import url($font_url);
+
     :root {
         --primary-color: $primary_color;
         --secondary-color: $secondary_color;
@@ -8,7 +10,7 @@
     body {
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
-        font-family: Arial, Helvetica, sans-serif;
+        font-family: $font_name, Helvetica, sans-serif;
         font-size: "$font_size";
         zoom: 80%;
     }
diff --git a/resources/views/pdf-designs/modern.html b/resources/views/pdf-designs/modern.html
index 712af9dd6925..b6bd3cf4bb9f 100644
--- a/resources/views/pdf-designs/modern.html
+++ b/resources/views/pdf-designs/modern.html
@@ -1,4 +1,6 @@
 <style id="style">
+      @import url($font_url);
+
       :root {
         --primary-color: #298aab;
         --secondary-color: #7081e0;
@@ -7,7 +9,7 @@
       body {
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
-        font-family: Arial, Helvetica, sans-serif;
+        font-family: $font_name, Helvetica, sans-serif;
         font-size: "7px";
         zoom: 80%;
       }
diff --git a/resources/views/pdf-designs/plain.html b/resources/views/pdf-designs/plain.html
index 53261c501126..febdb4b4b63a 100644
--- a/resources/views/pdf-designs/plain.html
+++ b/resources/views/pdf-designs/plain.html
@@ -1,4 +1,6 @@
 <style id="style">
+    @import url($font_url);
+
     :root {
         --primary-color: $primary_color;
         --secondary-color: $secondary_color;
@@ -8,7 +10,7 @@
     body {
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
-        font-family: Arial, Helvetica, sans-serif;
+        font-family: $font_name, Helvetica, sans-serif;
         font-size: "$font_size";
         zoom: 80%;
     }
diff --git a/resources/views/pdf-designs/playful.html b/resources/views/pdf-designs/playful.html
index 66810b868de6..bee8fd207fd1 100644
--- a/resources/views/pdf-designs/playful.html
+++ b/resources/views/pdf-designs/playful.html
@@ -1,4 +1,6 @@
 <style id="style">
+    @import url($font_url);
+
     :root {
         --primary-color: $primary_color;
         --secondary-color: $secondary_color;
@@ -8,7 +10,7 @@
     body {
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
-        font-family: Arial, Helvetica, sans-serif;
+        font-family: $font_name, Helvetica, sans-serif;
         font-size: "$font_size";
         zoom: 80%;
     }
diff --git a/resources/views/pdf-designs/tech.html b/resources/views/pdf-designs/tech.html
index 139eb8214825..9c253db94756 100644
--- a/resources/views/pdf-designs/tech.html
+++ b/resources/views/pdf-designs/tech.html
@@ -1,4 +1,6 @@
 <style id="style">
+    @import url($font_url);
+
     :root {
         --primary-color: $primary_color;
         --secondary-color: $secondary_color;
@@ -7,7 +9,7 @@
     body {
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
-        font-family: Arial, Helvetica, sans-serif;
+        font-family: $font_name, Helvetica, sans-serif;
         font-size: "$font_size";
         zoom: 80%;
         margin: 0;
diff --git a/tests/Unit/HelpersTest.php b/tests/Unit/HelpersTest.php
new file mode 100644
index 000000000000..1516ef513adb
--- /dev/null
+++ b/tests/Unit/HelpersTest.php
@@ -0,0 +1,41 @@
+<?php
+
+/**
+ * Invoice Ninja (https://invoiceninja.com).
+ *
+ * @link https://github.com/invoiceninja/invoiceninja source repository
+ *
+ * @copyright Copyright (c) 2021. Invoice Ninja LLC (https://invoiceninja.com)
+ *
+ * @license https://opensource.org/licenses/AAL
+ */
+
+namespace Tests\Unit;
+
+use App\Utils\Helpers;
+use PHPUnit\Framework\TestCase;
+
+class HelpersTest extends TestCase
+{
+    public function testFontsReturnFormat(): void
+    {
+        $font = Helpers::resolveFont();
+
+        $this->assertArrayHasKey('name', $font);
+        $this->assertArrayHasKey('url', $font);
+    }
+
+    public function testResolvingFont(): void
+    {
+        $font = Helpers::resolveFont('Inter');
+
+        $this->assertEquals('Inter', $font['name']);
+    }
+
+    public function testDefaultFontIsArial(): void
+    {
+        $font = Helpers::resolveFont();
+
+        $this->assertEquals('Arial', $font['name']);
+    }
+}