Visual Editor Fonts

Homepage Forums Pro Support Forum Blackoot Pro Blackoot Pro Support Visual Editor Fonts

Visual Editor Fonts

This topic contains 2 replies, has 2 voices, and was last updated by  Lenny 5 months, 1 week ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #21031
    Visual Editor Fonts


    I purchased BLACKOOT pro and deployed it at my site. I am determined to set my base font to CourierNew. I figured out how to do so in the settings panel so that font is applied to everything on the live site (no problem).
    In my visual editor I cannot get the font to be anything other than Open Sans. I even tried manually editing the Editor-Style.CSS (nuttin).
    I’m insistent that my visual editor have the same font as my site by default so that it is as WYSIWYG as possible. I can change the fine manually, no problem. But what a nuisance that is!
    Okay, I give up, what’s the answer?
    My technical abilities are really quite primitive. Please dumb your answer down so a beginner can succeed. I really do like the theme.
    Thank you.
    (If you were really my friend, you’d add a paintbrush feature so all I have to do is paint my desired formats much like you do in Word).

    Reply to: Visual Editor Fonts

    Happy with my help?
    Buy me a beer!

    Hi Lenny,

    I think you were almost there, editor-style.css is exactly the file you need edit to change the styling of the back-end editor.

    You can edit this file from Appearance > Editor (I guess this is what you did) and you should only need to change the font names in the first two blocks of code, like so:

    body {
    	font: 14px/20px 'Courier New', Courier, monospace;
    	text-transform: none;
    	letter-spacing: normal;
    	word-spacing: normal;
    /* Headings */
    h1, h2, h3, h4, h5, h6 {
    	color: #333;
    	font-family: 'Courier New', Courier, monospace;
    	font-weight: bold;
    	margin-top: 24px;
    	margin-bottom: 24px;

    However, it is never a perfect solution to edit a file from the theme, because every file will be overwritten during every future updates (this is how WordPress does updates).
    The best way is to create a child theme to host your modified version of this file, as files in a child theme can override files in the “parent” theme and are not affected by updates.

    You asked for a dumbed down answer so I won’t ask you to bother creating a child theme yourself. Instead I’ll just attach a pre-made one for you to this reply 🙂

    It already contains a modified version of editor-style.css with ‘Courier New’ so you just need to download the attached zip file, and install it on your site like a new theme (Appearance > Themes > Add New > Upload > Select > Activate)

    Then you should see your content displayed with this font by default in the post and page editor!

    And If it doesn’t seem to work at first, please try to clear your browser cache:

    (I’m afraid I cannot do much about this MSWord-like paintbrush, but I’ll agree that the current “visual” editor (TinyMCE) is not perfect. Hopefully the upcoming “Gutemberg” editor – planned to be added to WordPress 5.0 in a few months – will be an improvement!)

    You must be logged in to view attached files.
    Reply to: Visual Editor Fonts


    What great service!!!
    That worked perfectly and thank you for investing in my problem.
    Couldn’t be happier!
    – Lenny

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

PayPal Verified
Secured by PayPal
Secure Credit Card payments powered by Stripe