Adjusting font-family with CSS.

  • Profile Image
    dimarkweb
    Asked on August 28, 2019 at 08:43 PM

    I am trying to get my forms CSS to match my website. http://mazdacali.com/landing

    There really just font faces I need, header and regular text. 

    that Font: MazdaType-Regular


    So I am haveing a hell of a time getting it together. 

    heres my css, however I can not get the fonts defined..... 

     

    @import 'http://mazdacali.com/landing/templates/tz_semona_joomla/fonts/MazdaType-Regular/MazdaType-Regular.ttf';

     

    html.supernova {

        background-size : 100% auto;

    }

     

    .form-all {

        font-family : 'MazdaType-Regular', arial !important;

    }

     

    .form-label {

        font-family : 'MazdaType-Regular';

    }

     

    .form-header-group {

        font-family : 'MazdaType-Regular', arial;

    } 


    Page URL:
    https://form.jotformz.com/92368042824661
  • Profile Image
    Vanessa_T
    Answered on August 28, 2019 at 11:06 PM

    This is because your font source is coming from a "not secure" (http) webpage and Jotform forms are loaded in https.

    @import 'http://mazdacali.com/landing/templates/tz_semona_joomla/fonts/MazdaType-Regular/MazdaType-Regular.ttf';

    I tried to replace the import script to https, however, it seems that your site is not yet configured for it. Please load a font from https source.

  • Profile Image
    dimarkweb
    Answered on August 28, 2019 at 11:57 PM

    The fonts have not changed.

    https://mazautos.co/2018/fuentes/MazdaType-Regular.ttf


    @import 'https://mazautos.co/2018/fuentes/MazdaType-Regular.ttf';


    html.supernova {

        background-size : 100% auto;

    }


    .form-all {

        font-family : 'MazdaType-Regular', arial !important;

    }


    .form-label {

        font-family : 'MazdaType-Regular';

    }


    .form-header-group {

        font-family : 'MazdaType-Regular', arial;

    }


  • Profile Image
    Vanessa_T
    Answered on August 29, 2019 at 12:27 AM

    Upon checking, the font pack was successfully imported.

    You currently set font family = MazdaType-Regular to the following classes:

    form-all

    form-label

    form-header-group

    I can confirm that both form-all and form-label are already using MazdaType-Regular, meanwhile, there was no usage for form-header-group.

    Can you please point out which fields are still not having the correct font? Please note the order of precedence when applying styling to a page. For example, I can see the input fields are still not using MazdaType-Regular, should you wish to apply it to this element as well, please use proper selector or one which has higher precedence.

    https://www.w3schools.com/css/css_specificity.asp

    1567052809A.gif

  • Profile Image
    dimarkweb
    Answered on August 29, 2019 at 01:41 AM

    The font does not apply.

    You can see in the example that the original font is different


    1567057268Sin título-2.jpg

  • Profile Image
    Vanessa_T
    Answered on August 29, 2019 at 02:04 AM

    It seems that the issue is within the font pack itself since when you test it directly on your website, http://mazdacali.com/landing/, changing the font to MazdaType-Regular is different from the image you have just attached, and instead, is the same as the one on your form.

    1567058332A.gif

    Please make sure the font pack is configured correctly and is compatible when used in the browser.