Generic selectors
Exact matches only
Search in title
Search in content
Filter by Categories
Advanced Scripts
Amazon SES
Amazon Web Services
Blocksy Theme
Brand Building
Bricks Builder
Digital Marketing
Email Marketing
Fluent CRM
Fluent Forms
Fluent SMTP
Google Fonts
Hydrogen Pack
Kadence Theme
Meta Box
Online Business
Oxygen Builder
Piotnet Forms
Piotnet Grid
Scripts Organizer
Search Engine Optimization
Social Media Marketing
Swiss Knife
Web Design
Web Development
Web Strategy
Work From Home
WP Social Ninja
Zion Builder

Style WordPress Body Typography [CSS Snippet]

Managed by:
Mohammed Wasim Akram
✼ Disclaimer: SyncWin is user-supported therefore this page may contain our affiliate links and if you purchase something using those links, we may get some commission without any additional cost to you. Click to Learn More.

Please note we want to keep things crystal clear that this page may contain some of our affiliate links. Also, we don't know, use or recommend every product we link to, so please do your due diligence before making your buying decision.

However, there are very few selected products that we trust, use, and recommend to our readers and community, and we always mention that on our website which you could also find on our dedicated Recommendation Page.

Hence, if you make a purchase using any of those links, then it is safe to assume that we might get a small amount of commission without any additional cost to you, which helps and encourages us to produce more helpful content like this for you.

Feel free to explore our Legal Policy Pages.

If you're using page builders to build websites that don't offer separate styling control to style the Inner Content Typography, then you can use these CSS snippets to style them as per your needs.

/* CSS Snippets to Style WordPress Body Typography */
Title: Style Inner Content Typography
Type: CSS: Custom Code
Location: WP Header
Priority: 10

body h1 {
  font-size: 1.6em;
  font-weight: 800;
  text-transform: none;
  color: #000000;

body h2 {
  margin-top: 50px;
  margin-bottom: 25px;
  font-family: Poppins;
  font-size: 1.5em;
  font-weight: 700;
  color: #000000;
  text-transform: none;
  line-height: 30px;

body h3 {
  margin-top: 25px;
  margin-bottom: 25px;
  font-family: Poppins;
  font-size: 1.3em;
  font-weight: 600;
  color: #000000;
  text-transform: none;
  line-height: 30px;

body h4 {
  margin-top: 25px;
  margin-bottom: 25px;
  font-family: Poppins;
  font-size: 1.2em;
  font-weight: 600;
  color: #000000;
  text-transform: none;
  line-height: 30px;

Ways to Add This Snippet to Your Website?

There are multiple ways of adding this code snippet to your site, but we recommend using the Advanced Scripts or Scripts Organizer plugin as they allow adding various types of codes to your WordPress site such as PHP, JavaScripts, CSS etcetera.

Apart from that, the team behind both of these plugins are very talented and they constantly keep improving the plugins by fixing bugs and adding new features, and the best part is that they are doing it all based on the feedback of the actual users which simply means that they care.

You could also use the Code Snippets plugin as it is also a great option for free but limited in features and capabilities as compared to the above-mentioned options.

Pay Attention Before Using the Snippet!

I would strongly suggest you test these snippets on your staging site and when you think they work, then you try them on your live site as it's not our responsibility if something goes wrong though we're ready to help on implementation if you need it.

Although they work well for me and the other people still you should be extra cautious and careful to implement any code snippet on your site due to different stacks of tools and backend environments.

Related Code Snippets

Oxygen Builder & WPDiscuz Integration [PHP Snippet]

If you want to integrate the wpDiscuz comment system plugin with Oxygen Builder then this PHP code snippet is going to help you make them work with one another just by adding a shortcode to the single post template of Oxygen Builder.

Read More
Disable WordPress Core Lazy Load Feature [PHP Snippet]

If you want to completely disable the WordPress core lazy load feature for your website then you can easily achieve that using this very simple code snippet.

Read More

Leave Your Feedback

Notify of
Inline Feedbacks
View all comments
No active "minimal-sidebar" sidebar
Top menu-circlecross-circlechevron-down-circle
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram