• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WriteNowDesign - Wordpress and Ecommerce Website Design

WordPress, Joomla, Ecommerce Website Design

  • Home
  • Prices/Packages
  • WordPress
  • Services
  • Portfolio
  • Blog
  • About
    • Testimonials
    • Locations
    • Online Payment
  • Contact
  • Show Search
Hide Search

Call 303-907-6133 Email

How to Change WordPress Editor Font

May 17, 2013 by Pat Fortino

If you don’t like the default font displayed when you are in the WordPress editor, you can change it.

I was using a YooTheme Warp 6 template and the editor font was difficult to read. I needed a bigger, sans serif font. Furthermore, I wanted to have the text wrap at the width of the content div in my posts so I could get an idea of how the text would look. 

Here’s how to change the editor font and the width of the text wrap in it.

  1. Look in your theme directory ( /wp-content/themes/your-theme ) and see if you have a file called editor-style.css. If you have one, you can use that. If you don’t have that file, copy the editor-style.css from /wp-content/themes/twentyeleven.
  2. Look for the following rules. In the TwentyEleven editor-style.css, they are on line 6 and 16.
    html .mceContentBody {
    max-width: 584px;
    }
    * {
    color: inherit;
    font: 15px "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-style: inherit;
    font-weight: inherit;
    line-height: 1.625;
    }
    body {
    color: #333;
    font: 15px "Helvetica Neue", Helvetica, Arial, "Nimbus Sans L", sans-serif;
    font-weight: 300;
    line-height: 1.625;
    }
  3. To edit the width, change the max-width number in the html .mceContentBody rule.
    Pages: Page 1 Page 2

Tagged With: WordPress, Comments are closed. If you have information to share, contact me here.

Previous Post: « Ten Tips to Help You Get High Search Engine Ranking
Next Post: Automatic Newsletters from WordPress Blog Using MailChimp »

Related

Primary Sidebar

Blog Categories

Call Today

Get a Free Quote

303-907-6133

Subscribe to News

News about WordPress, WooCommerce, & Technology

What’s New

  • WPForms Not Sending Notifications
  • Add Terms and Conditions WooCommerce
  • Fix WordPress AMP Validation Errors
  • Use the Classic Editor with Gutenberg Block Editor
  • Add a Message at Top or Bottom of WooCommerce Checkout Page
  • How to Link to a PDF in WordPress

Find Us On…

  • Facebook
  • LinkedIn
  • RSS

Call 303-907-6133 Email

© 2004–2023 · WriteNowDesign · Sitemap · Log in · Return to Top