Advanced Designer: Choosing 'Crimson Text' as the font-family results in broken CSS

  • Profile Image
    pristinegemstonejewelry
    Asked on October 10, 2017 at 05:18 PM

    Hello,

    I attempted to use Crimson Text Google Font by selecting it in the Advanced > Font Options. After doing so I inspected my form and it appears the word Crimson get auto replaced by the HEX code for crimson;

    .form-all { font-family: "#dc143c Text", sans-serif; }

    I'm not sure why a replace was done by just wanted to give an FYI as it seems if the Font-Family name as a colour in it some CSS rendering will replace with its hex equivalent.


    Cheers

  • Profile Image
    Kevin_G
    Answered on October 10, 2017 at 07:58 PM

    Thank you for reporting this to us. 

    I have just checked your form I can see you have injected the CSS code to set up your font. I have also tested on my end and I cannot replicate the issue, when I set up the font it worked fine and it properly appeared when I inspected the code: 

    15076798411.png

    May you please check on your end and find if the issue still persists? 

    Please let us know how it goes. 

  • Profile Image
    pristinegemstonejewelry
    Answered on October 11, 2017 at 03:50 PM

    Hi Kevin,

    How're you setting up the Font btw? I went through with a clean form added a single element then went into the Advanced Designer to choose 'Crimson Text' from the Font Options and found the issue there in the designer as well as when I previewed.

    I didn't make any further change. YOu can view the form here;

    https://form.jotform.com/72836621503252

    And I just tried with another font 'Arial Black' that also had a colour in the name to confirm it affects any font with a colour in the name;


    Hope that helps you reproduce the issue.


    All the best

  • Profile Image
    John_Benson
    Answered on October 11, 2017 at 06:20 PM

    Thank you for the detailed explanation.

    Unfortunately, I cannot replicate the issue. I have created a screen capture of my test form, please check if I am doing it right to replicate your issue:

    For the "Arial Black" test:

    1507760219css_editsz.gif

    For the "Crimson Text" test:

    1507760256css_editsz1.gif

    If I have done it right, please try using a different internet browser and device to test it again.

    I am using PC Windows 10 and Google Chrome on my test form.


  • Profile Image
    Kevin_G
    Answered on October 12, 2017 at 02:43 PM

    Thank you for the additional details. 

    The issue seems to happen only when you're  applying the font from the advanced designer, I will report it to our second level so this can be fixed, thank you for your report. 

  • Profile Image
    pristinegemstonejewelry
    Answered on October 12, 2017 at 03:26 PM

    Thanks Kevin