change font style of text

  • Unknown's avatar
    c3imagines · Member ·

    Hello, I love the font style ffmarket that I have for page and post titles.
    I want to be able to use that font on a bit of text on the homepage. Specifically, the INSPIRE – CREATE – LAUGH – SHARE – ENJOY – LOVE – TELL A STORY line under the featured slider.
    I have tried using a span class on the text but it does not seem to register. Any suggestions? Thanks!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    dannywellman · Member ·

    To customize fonts in your blog you’ll need to purchase the ‘Custom Design’ upgrade.

    http://en.support.wordpress.com/custom-design/
    http://en.support.wordpress.com/custom-design/custom-fonts/

    It looks like you’re limited to their (wordpress.com) available fonts for your selection. If you really want to have “INSPIRE – CREATE – LAUGH – SHARE – ENJOY – LOVE – TELL A STORY ” be in a specific font not available with the upgrade, you could put those words in another editor (photoshop/GIMP/etc.) and save it as an image and pop it in your page.

  • Unknown's avatar
    raincoaster · Member ·

    She has the custom design upgrade. She just needs the code to make the change.

  • Unknown's avatar
    dannywellman · Member ·

    Also:
    http://www.myfonts.com/fonts/fontfont/ff-market/licensing.html

    You might want to look at that for licensing issues (if any).

  • Unknown's avatar
    dannywellman · Member ·

    Sorry. I didn’t see FF market in the Body Text options. I see it in the Headings option. I’m trying to figure out how to customize the CSS for a specific custom element. It might not be possible, but I’m trying to figure it out.

  • Unknown's avatar
    dannywellman · Member ·

    OK. I don’t know if this will work because I haven’t purchased the custom upgrade for my test blog.

    Do you have a Heading (1,2,3,etc.) that you haven’t used anywhere on your site yet? If so, you could pick one of those headings (regular visual editor) for the text you want to change.
    For example, let’s say you haven’t used ‘Heading 6’ yet.
    In the CSS editor make an entry:

    h6 {
    font-family: ff-market-web-1,ff-market-web-2,”Hoefler Text”,”Baskerville old face”,Garamond,”Times New Roman”,serif !important;
    font-size: 16px;
    }

    and save the CSS changes.

    Then, on your home page, change the “”INSPIRE – CREATE – LAUGH – SHARE – ENJOY – LOVE – TELL A STORY ” string to ‘Heading 6’ in the visual editor and publish it.

    Again, I don’t know if this will work because I can’t test it. But in theory, I think it should.

  • Unknown's avatar
    designsimply · Member ·

    You are on the right track! And dannywellman’s example should work but you will need to make a few changes first.

    Let me help you go through the changes one step at a time.

    1. Open the home page for editing and remove the span tags you added before because the CSS example is better and the span tags could interfere — you should use the Text tab in the editor to make the edit, see http://en.support.wordpress.com/editors/#text-editor

    2. While you are editing, add an “h6” HTML tag around the text so it looks like this:

    <h6>INSPIRE – CREATE – LAUGH – SHARE – ENJOY – LOVE – TELL A STORY</h6>

    3. Save changes to the home page

    4. Go to Appearance > Customize > CSS editor and remove the “/*” and “*/” characters because those designate a comment in CSS and will be ignored.

    Here’s what you have now:

    /*
#main-header {border-bottom-color: white}
#footer {border-top: white}
h6 {
 font-family: ff-market-web-1,ff-market-web-2,"Hoefler Text","Baskerville old face",Garamond,"Times New Roman",serif !important;
 font-size: 16px;
 }
*/

    Here’s what the custom CSS should look like when you’re done editing:

    #main-header {border-bottom-color: white}
#footer {border-top: white}
h6 {
 font-family: ff-market-web-1,ff-market-web-2,"Hoefler Text","Baskerville old face",Garamond,"Times New Roman",serif !important;
 font-size: 16px;
 }
  • Unknown's avatar
    c3imagines · Member ·

    Thanks! :)

  • Unknown's avatar
    designsimply · Member ·

    You’re welcome. :)

  • The topic ‘change font style of text’ is closed to new replies.