Adjusting font-family with CSS.

  • dimarkweb
    Asked on August 28, 2019 at 8: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
    Page URL: http://mazdacali.com/landing/
  • Vanessa_T
    Replied 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.

  • dimarkweb
    Replied 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;

    }


  • Vanessa_T
    Replied 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 Screenshot 10

  • dimarkweb
    Replied on August 29, 2019 at 1:41 AM

    The font does not apply.

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


    1567057268Sin título 2 Screenshot 10

  • Vanessa_T
    Replied on August 29, 2019 at 2: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 Screenshot 10

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