Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • April 18, 2017 at 5:14 pm #779479
    Eric

    Hi there,

    I would like to change the font family of the buttons on our website to ‘Caveat’. I already changed things like the Quick CSS below, but that doesn’t give the desired font. How to solve this?

    body div .avia-button {
    font-family: ‘Caveat’;
    }

    or

    .avia-button {
    font-family: ‘Caveat’;
    }

    April 18, 2017 at 5:32 pm #779492
    Jordan Shannon

    Hey Eric,

    Have you imported the font first?

    @import url('https://fonts.googleapis.com/css?family=Caveat');

    Best regards,
    Jordan Shannon

    April 19, 2017 at 2:57 pm #779982
    Eric

    Hi Jordan,

    I did not yet. Where do I have to put this line?

    April 19, 2017 at 3:44 pm #780024
    Jordan Shannon

    Hi,

    Place it at the top of quick css. Let me know if this works for you.

    Best regards,
    Jordan Shannon

    April 20, 2017 at 2:56 pm #780554
    Eric

    Hi Jordan,

    It’s not working yet. I tried 2 things in the Quick CSS:

    1:
    .avia-button {
    @import url(‘https://fonts.googleapis.com/css?family=Caveat’);
    font-family: ‘Caveat’;
    }

    2:
    @import url(‘https://fonts.googleapis.com/css?family=Caveat’);
    .avia-button {
    font-family: ‘Caveat’;
    }

    April 20, 2017 at 4:47 pm #780642
    Jordan Shannon

    Hi,

    #2 should work ideally. Would you be able to provide admin info so I can log in and look into this further?

    Best regards,
    Jordan Shannon

    April 20, 2017 at 5:05 pm #780665
    Eric

    Here you go

    April 20, 2017 at 5:26 pm #780673
    Jordan Shannon

    Hi,

    I add the following to quick css:

    @import url(‘https://fonts.googleapis.com/css?family=Caveat’);
.avia-button-wrap.avia-button-center .avia-button {
font-family: 'Caveat', cursive!important;
}

    Please let me know if this is what you needed.

    Best regards,
    Jordan Shannon

    April 20, 2017 at 5:54 pm #780684
    Eric

    Hi Jordan,

    Thanks for your help so far!

    It works now only on my computer (probably because I have downloaded the font). But on my mobile phone or other computers it shows a different font (a bit similar but not the same). Is there a way to fix this and all visitors see the same font?

    April 20, 2017 at 6:15 pm #780693
    Jordan Shannon

    Hi,

    Most devices try to adjust to the best fitting supported font on that device, when using the import solution. It should however, display as it should on the majority of devices. Be sure to clear caches on all devices you are viewing from.

    If you download the actual font files in their various formats and load them into the theme folder you can have your developer/designer point to them via css. This may be a better solution but still not a 100% guarantee that the fonts will render correctly.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.