Need help? Check out our Support site, then


Font coding problem

  1. The new recent change to WP's editing interface has at the same time has affected how I edit/update old posts. I suspect new posts will have a problem as well.

    I've tried the coding <span style="font-family:SPECIFY;">TEXT HERE</span> provided by the forum but no luck. When I update and save the post WP deletes the coding, reverting to a Times Roan default font.

    Not sure what or why WP has changed what has worked for over 400 posts.

    The blog I need help with is changingwinds.wordpress.com.

  2. Hi there, can you give me the font family you are trying to use, and do you have a draft post perhaps, where this is happening that I can look at?

  3. Hi,

    Here's the URL to the post I updated and where I want to change the font to calibri. However, I've also tried arial and helvetica with no luck. I also tried some other older posts to see if I could change the font but again no success,

    http://changingwinds.wordpress.com/2010/08/30/are-you-an-authentic-leader-or-an-imposter-peeling-off-the-veneer/

    Thanks...JIm

  4. PS:

    This is the html code I've tried <span style="font-family:SPECIFY;">TEXT HERE</span> provided on the community forum

    This is what I used for the past two-plus years until today <font face="Calibri" size="3">text</font>

  5. Jim, first off, let's talk about fonts and how browsers work. Unless the site has web based fonts enabled and active, when a web page loads, a browser will look for the fonts specified in the page on the visitor's computer. If the font is not installed on their computer, then the browser will substitute either the standard "serif" or "sans-serif" font built into the browser. Calibri is a font that is installed with MS Office, so not all computers are going to have that font installed, and even some with MS Office may not have it installed. That means, not everyone would see the Calibri font on your site. Do you have that font installed on your computer?

    Here are a couple of resources listing web safe, cross-browser fonts.
    World Wide Web Consortium School web safe font list
    Common fonts for Mac and Windows

    Next, we have to consider tablets and smartphones, which have even fewer cross-platform fonts. See here for mobile safe fonts (scroll down near the bottom).

    All that said, are you trying to change just a few words to the new font, or just a paragraph, or the entire post content to Calibri?

    To change a word, or a few words within a paragraph, you would wrap those words in span tags with the CSS styling information such as this:

    <span style="font-family: calibri, arial, helvetica, sans-serif;">A few words</span>

    For a paragraph, you would add the opening paragraph tag with the CSS styling and add the closing paragraph tag at the end of the paragraph.

    <p style="font-family: calibri, arial, helvetica, sans-serif;">An entire paragraph.</p>

    If you wish to change all the text within a post to a different font, then you put a div tag with the styling at the beginning of the post and an ending div tag at the end such as this.

    <div style="font-family: calibri, arial, helvetica, sans-serif;">All the text and paragraphs and such for the entire post.</div>

    Note in the above I have specified several fonts (called a font stack in CSSville). If the first font isn't available, the browser will try the second, and then the third, etc., until it finds one. This ensures you of more control of the look of things in the post, otherwise your browser will go back to what is in the original CSS, or if nothing is there, it will substitute its own.

  6. Wow, I have used the same approach for years, ie, I put the font code at the beginning of the post with the closing code at the end. 400 posts and no problem till today.

    I use calibre in word for not just posts but ebooks. I did try today Arial and helvetica. All I want is to not use times Roman which is what wp uses. So not being a coder I. Am trying to find a simple solution. Thanks.

  7. There is some HTML that is no longer supported now that HTML5 is the standard. In general, if you follow the examples I have given above, you will be safe

    If you want to change the font for all post and page content, we could do that with CSS, but it would require the Custom Design Upgrade. You can try out and preview custom CSS before you buy as explained here. Here would be the CSS you would need to use.

    .entry {
        font-family: calibri, arial, helvetica, sans-serif;
    }
  8. Thanks. But am I able to simply insert html font codes in posts. Or do I have to upgrade, something I didn't want to do.

  9. Sorry if I confused things, yes you can use the codes I gave above within posts and pages to change the font family. I just mentioned the Custom Design Upgrade as a way to change everything once so that you did not have to do it each time you wrote a post or page.

  10. What you suggested worked. I ended up with sans serif, though it's not calibri. I've been trying to increase font size. In googling and reading WP forums they talk about Tinymce. However, I think I may not be able to use that plug-in. Also, the coding I found for increasing font size may mess up the coding you provided, ie, <span style="font-size:PERCENTAGE HERE;">TEXT HERE</span>.

    Is there anything I can do to increase font size?

  11. Ok, are you wanting to change the font for any entire post? If so you have to wrap the entire post within div tags with the styling declaration within the opening div. Put this on a blank line above the post content (from within the Text tab in the editor).
    <div style="font-family: calibri, arial, helvetica, sans-serif; font-size: 110%;">

    Then at the very end of all the post content, place an ending div tag like this.
    </div>

  12. Ah, so that's where the 110% goes. I didn't know if you put it in that coding or elsewhere. I've successfully used your help to change the fonts and tested it out on various devices. I used this coding
    <font size="3">text</font> to increase the font size.

    If this in not kosher let me know and I'll use what you suggest to make the font larger.

    Thanks very much for all your help...JIm

  13. I would use the inline CSS style, like I mentioned above for font size instead of the HTML since the HTML font size attribute is not supported in HTML5, and at some point in the future, browsers will drop support for it and then your font size will return to what it was originally and you will end up having to edit and change each occurrence of that tag.

  14. Thanks very much.

  15. You are welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic