Poppins Font not working correctly

Last updated on January 2, 2022

Poppins is commonly used web font. If it doesn’t work on your website. Please read this article, it should help you solve the question. Normally, there are 3 steps to add a Google font:

  1. Go to Google fonts website to find a font, like Poppins
  2. Embed this font, paste codes before HTML tag </head> on your webpage:
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
  3. Specify the font for the page elements through the following CSS snippet, if you want the font as a default font, you can add it for tag body:
    body { font-family:'Poppins', sans-serif; }

If the font doesn’t work still, please check these things:

  • If you want to add more font style like weight option, please add the options in the Embed URL, the correct URL format should be likes:
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
  • Check the Poppins font URL if is https if your website is set SSL: https://fonts.googleapis.com
  • Add !important for CSS snippet, it can improve your CSS codes priority.
    body { font-family: 'Poppins', sans-serif!important; }
  • Try to add * after tab bogy in CSS snippet:
    body * { font-family: 'Poppins', sans-serif!important; }

Icon WordPress Customization Service from $49 Only!
Save your expensive time!

Join Newsletter(FREE)

Subscribe to our newsletter to receive news & updates. We promise to not spam you, super promise!