Custom css gives only “standard” fonts?

  • Resolved 0800grizzly

    (@0800grizzly)


    2 years, 1 month ago

    Hi,

    On a page I’m developing I decided to try Otter’s Custom CSS to vary font families between paragraphs. When selecting a paragraph and adding custom CSS

    selector {
  font-family: Courier
}

    it works like a charm, but a more “exotic” font family selector

    selector {
  font-family: Great Vibes;
  font-size: 1.2em;
}

    does not work. NB! The font-size attribute works, so it’s not a question of an altogether faulty selection or similar. I also tried write ‘Great Vibes’ and “Great Vibes”, but both give an error in the customiser.

    The more “exotic” font ‘Great Vibes’ does, however work on this page, if I choose that as the theme’s (Bravada Plus) basic content font.

    On the page the text for the first is “40+ naiset ovat aliedustettuina yhteiskunnassamme. Haluan muuttaa t?m?n” and for the second the text is “SIKSI KUTSUN SINUT MUKAAN AINUTLAATUISEEN KUVAUSEL?MYKSEEN, JOKA HUIPENTUU GALLERIAN?YTTELYYN, JOSSA JUHLISTAMME NAISIA JA HEID?N TARINOITAAN.”

    I prepared screenshots of the situations, but can’t find a way to attach them. Hopefully somebody recognises the issues from my description :). I would suspect something to do with loading system vs other fonts, but how to solve it?

    Rgds,

    Bj?rn

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Hardeep Asrani

    (@hardeepasrani)

    Hey @0800grizzly,

    We tried to reproduce it, and it seems to work properly. Can you make sure you’re using the inside the selector as suggested in Google Fonts: https://fonts.google.com/specimen/Great+Vibes

    font-family: 'Great Vibes', cursive;

    Thread Starter 0800grizzly

    (@0800grizzly)

    Hi, thank you.

    I’m not sure I understood you right, didn’t find what you referred to in the Google link. Tried to replicate your setting, result looking like this on the page:

    .ticss-56a857fe {
    font-family: 'Great Vibes',cursive;
    font-size: 1.2em;
}

    This didn’t work. Reading about the Google API from your link I at least found the way to call the fonts needed in the CSS, e.g:

    <head>
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css2?family=Crimson+Pro">

    If I add the desired font to one of the theme’s typography settings it will work with the basic CSS I had from the beginning. But then I’m messing with the theme, which may lead to unexpected results elsewhere.

    How could I get the googlefonts call for any font I choose? Or, please explain how I misunderstood your initial suggestion.

    TIA,

    Bj?rn

    Plugin Author Hardeep Asrani

    (@hardeepasrani)

    Hey @0800grizzly,

    You can use the @import method instead to load it using CSS:

    @import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');

    You can add it to Customiser > Custom CSS, in your WordPress dashboard.

    Let me know if it works after that.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Custom css gives only “standard” fonts?’ is closed to new replies.