From 7310bb9bcf5faea64a01ee2ec19f7225d8926a7c Mon Sep 17 00:00:00 2001
From: Pavel Dohnal <pavel@mailpoet.com>
Date: Tue, 2 Jun 2020 16:58:16 +0200
Subject: [PATCH] Render fonts on frontend

[MAILPOET-2849]
---
 assets/js/src/public.jsx            | 15 +++++++++++++++
 lib/Form/DisplayFormInWPContent.php |  1 +
 views/form/front_end_form.html      |  1 +
 3 files changed, 17 insertions(+)

diff --git a/assets/js/src/public.jsx b/assets/js/src/public.jsx
index 5e150bd862..2969101b1e 100644
--- a/assets/js/src/public.jsx
+++ b/assets/js/src/public.jsx
@@ -46,6 +46,15 @@ jQuery(($) => {
     return true;
   }
 
+  function renderFontFamily(fontName, formDiv) {
+    const originalFontFamily = formDiv.css('font-family');
+    const newFontFamily = `"${fontName}", ${originalFontFamily}`;
+    formDiv.css('font-family', newFontFamily);
+    formDiv.find('input, option').css('font-family', 'inherit');
+    formDiv.find('input[type=text], textarea, input[type=email], select').css('font-family', newFontFamily);
+    formDiv.find(':header').css('font-family', 'inherit');
+  }
+
   function showForm(formDiv, showOverlay = false) {
     const form = formDiv.find('form');
     const position = form.data('position');
@@ -87,6 +96,12 @@ jQuery(($) => {
     $('.mailpoet_form').each((index, element) => {
       $(element).children('.mailpoet_paragraph, .mailpoet_form_image, .mailpoet_form_paragraph').last().addClass('last');
     });
+    $('form.mailpoet_form').each((index, element) => {
+      const form = $(element);
+      if (form.data('font-family')) {
+        renderFontFamily(form.data('font-family'), form.parent());
+      }
+    });
     $('.mailpoet_form_close_icon').click((event) => {
       const closeIcon = $(event.target);
       const formDiv = closeIcon.parent();
diff --git a/lib/Form/DisplayFormInWPContent.php b/lib/Form/DisplayFormInWPContent.php
index ef775d64e4..2a4775a63e 100644
--- a/lib/Form/DisplayFormInWPContent.php
+++ b/lib/Form/DisplayFormInWPContent.php
@@ -157,6 +157,7 @@ class DisplayFormInWPContent {
     $templateData['delay'] = $formSettings[$displayType . '_form_delay'] ?? 0;
     $templateData['position'] = $formSettings[$displayType . '_form_position'] ?? '';
     $templateData['backgroundColor'] = $formSettings['backgroundColor'] ?? '';
+    $templateData['fontFamily'] = $formSettings['font_family'] ?? '';
 
     // generate security token
     $templateData['token'] = Security::generateToken();
diff --git a/views/form/front_end_form.html b/views/form/front_end_form.html
index bf49e2a4a1..cb74018fc0 100644
--- a/views/form/front_end_form.html
+++ b/views/form/front_end_form.html
@@ -35,6 +35,7 @@
       data-delay="<%= delay %>"
       data-position="<%= position %>"
       data-background-color="<%= backgroundColor %>"
+      data-font-family="<%= fontFamily %>"
     >
       <input type="hidden" name="data[form_id]" value="<%= form_id %>" />
       <input type="hidden" name="token" value="<%= token %>" />