Font issues when adding HTML fonts inside shortcode block.

  • booksbeyondbars

    (@booksbeyondbars)


    6 years, 8 months ago

    I installed the Easy Google Fonts plugin to use custom fonts (Playfair Display). To have the testimonial typed out in a typewriter font, I put the following inside a shortcode block using the Typing Effect plugin.

    <div><head> <link href='https://fonts.googleapis.com/css?family=Cutive Mono' rel='stylesheet'> <style> body { font-family: 'Cutive Mono';font-size: 22px; } </style> </head> <center><body>[typed string0="I have to say that this book has me like a kid again … When I read the book it unlocks things inside of me, it’s like I’m being set free, like someone gave me back my liberty … I would never forget this nice thing you’ve done for me. And you might think to yourself, for a book? But it’s not just a book, it’s the path that this book is about to set me on. -A BBB Client" typeSpeed="40" startDelay="0" backSpeed="40" backDelay="500"]</body></center></div>

    Unfortunately, now everything else I add to the site (like the button at the bottom of the page) is in the font I added in the shortcode.

    This even changes the font of the admin sidebars–I thought these were not contained inside the page I edit in the Gutenberg editor.

    How can I resolve this?

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

Viewing 2 replies - 1 through 2 (of 2 total)
  • Joy

    (@joyously)

    6 years, 8 months ago

    There are several things wrong with your approach.
    Some of the HTML you added has a specific place where it should go, like <head> and <body> and <style>. You have put them in the wrong place, and duplicated <head> and <body> which should only have one per page.
    So, the <link> for your font needs to go in the <head> section that the theme outputs. That includes when you are in the editor. Or having the plugin output it could work also, but it does not go in the content area with the shortcode.
    The way that styles work is that you specify a selector to apply each property to. Yours says to make the body your new font, but it takes you literally and applies it to the real <body> tag that the page has. So you have to give your shortcode a specific name like putting <div class="testimonial"> instead of just <div>. Then the style could apply to .testimonial instead of body. (don’t forget the dot, it means it’s a class)

    Thread Starter booksbeyondbars

    (@booksbeyondbars)

    6 years, 8 months ago

    Joy you are a lifesaver. A month of banging my head into your desk and you solved it in 5 minutes.

    Thanks a million,
    Hugo

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Font issues when adding HTML fonts inside shortcode block.’ is closed to new replies.