Getting Started with AnyFont

Recently there have been quite a few requests for some sort of help document or howto for using AnyFont, and I haven’t really done much documentation for AnyFont due to time constraints.  So I have put together this short howto which will cover the basic operations of AnyFont until I am able to find some time to write the next howto doc, which will cover some of the more advanced tips and tricks for AnyFont as well as how to manage the advanced options effectively.

Firstly, if you having problems installing the plugin, please run through the following checklist before trying anything in this tutorial.

  1. Make sure “.htaccess” exists in your document root and is writable by the server.
  2. Check if “fonts” & “fonts-cache” exist in the “wp-content” folder. Create them if they don’t.
  3. Once they both there, Check that the server has permission to write files to them.
  4. Ask your webhost if the server your site is on has GD or ImageMagick for PHP installed.
  5. If it doesn’t have either, ask why and don’t stop bugging them until they install at least 1.
  6. If all the above checks out. Deactivate, then Reactivate Anyfont.
  7. If at this point AnyFont is still not working, please contact me for assistance.

I know this checklist is mostly advanced topics which are not explained very well.  However I will be writing a more comprehensive post, which explains each point above in detail, just as soon as I can find time.

Working with the Font Manager

Once the plugin has been installed successfully, the first step is to upload some truetype fonts.  To do this, expand the AnyFont menu in your WordPress admin area, and click on Font Manager.

You should see a page that looks something like the following:

Font Manager

click to zoom

Now if you’re wondering where on earth you supposed to get fonts to upload, you can start by looking at either FontSquirrel or Dafont.com, both of them are excellent font resources with large collections of free high quality fonts available to download as well as links to useful font tools and other typography resources.

When you have downloaded and unzipped some fonts, you are ready to start uploading them to your blog using the Font Manager! To start the upload, click on the Upload New Font button as shown to the right.

You should then have a screen that looks like the following:

Upload Screen

click to zoom

UploadYou can now upload your font by clicking on the Browse button and then browsing to the folder on your computer where you have your fonts saved.  Select the font you want to upload and click OK, then click on the blue upload button as shown to the right.

NOTE: If you are using Microsoft Windows,  you will not be able to upload fonts directly from the system font folder (C:\Windows\Fonts).  You will first have to copy the fonts out of that folder to somewhere else on your PC, and then select the fonts you want to upload from there.

Once the font has uploaded successfully, you should see a preview of the font you just uploaded as shown in the image below.

Font Preview

click to zoom

If your font continuously fails to upload via this page, you can also try uploading using FTP.  Using your favourite FTP application, upload your font files to the “/wp-content/fonts”  folder in your WordPress installation.

Doing it in Style!

Now that there are a fonts uploaded you can start creating Styles.  A style is simply some basic rules which  allow you to control exactly how your newly uploaded fonts will look on your blog.  To get started, click on Style Manager under the AnyFont menu.  Once loaded you should be presented with a page that looks something like the following image:

click to zoom

click to zoom

Click on the Create New Style button on the right hand side of the page. You will then be presented with the following options:

  1. Name:

    Name your style something descriptive(such as “blog titles” or “sidebar”). This will make it easier to assign styles to the correct section of your blog later on.

  2. Color:

    style_manager_colorChoose what color you want your font to be, you type in a colour or click the little colour box on the right of the input field to bring up a box with a couple of colour choices!

  3. Font Name:

    The fonts you uploaded earlier should be listed here, Select one of them to use with the style.

  4. Font Size:

    These are standard point sizes, as you would find in most common word processors. Select the size you want and continue.

  5. Background Color:

    This is the background color of the image which is being created. Select a colour which matches your blogs current background colour for the best results.

  6. Shadow:††

    Check this option if you want to have a slight shadow on your text.

  7. Shadow Color:††

    If you have checked the option above, you can select what colour you want the shadow to be by entering it here.

† Only available on GD
†† Only available on ImageMagick

Once you have filled out all the options, click on the blue “Save” button on the right.

When the style has been saved, you should see it appear in the list as shown in the image below.

Saved

click to zoom

Applying Style with Settings

Now that you have both fonts uploaded and some styles set, you are ready to start showing off your fonts on your blog.  And the best part is, all you actually have to do to make this happen, is set a couple of easy options on the settings page. No code editing is required! Click on Settings in the menu to get to the page shown below.

Settings Page

click to zoom

When you enable these options by selecting the checkbox and choosing a style,  the text will be automatically be replaced with the font you have uploaded and set in your style previously.

If you discover any incompatibilities with your current theme, please contact me and try to provide as many details as you can such as which theme you are using, your WordPress version, your browser, any error messages that might have popped up or anything else that you might think is important or relevant to the problem.

I hope this short howto helped you in someway. If you still have any questions please feel free to comment or contact me here.

  • email
  • Digg
  • del.icio.us
  • LinkedIn
  • Facebook
  • Twitter
  • Google Bookmarks
  • muti
  • StumbleUpon
  • FriendFeed
  • Ping.fm
  • Mixx
  • Technorati
  • blogmarks
  • Posterous
  • Blogosphere News
  • NewsVine
  • Yahoo! Bookmarks
This entry was posted in AnyFont, Projects, WordPress and tagged , , , , , , , , , , , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

22 Responses to “Getting Started with AnyFont”

  1. I have tried to get this plugin to operate on multiple domains with no luck.

    I have followed the directions here and the server meets the requirements.

    I can upload fonts and add styles, but no font preview shows up and neither do any of the options on the settings page dropdowns.

    I have spoken with one other person having the same issues.

    • Hi JB,

      Sorry to hear that, please post or email me a link to a phpinfo page on your server and also a link to one of the domains you have installed AnyFont on, plus the names of any styles that you have created. I will have a look when I have a chance and let you know.

  2. st.anger.inc

    Epic! Excellent. Thank you so much. It is working fine so far although I have to do some more testing to really make sure all the features are working

    My only problem is that I don’t know if my webhost JustHost supports ImageMagick because I don’t see the options Shadow and Shadow Color

    • If you don’t see those options then its very likely that your webhost does not support the php Imagick extension for ImageMagick. You can check if its installed though by going to the AnyFont settings page and looking under the Advanced settings for the php module setting, If you see Imagick in the dropdown list, then it is installed, otherwise it is not available. If its not there, try contacting your webhosts support desk and request that the module is installed. Most webhosts will install it for you on request, I know mine did! :)

      Enjoy the plugin!

      • st.anger.inc

        thanks a lot for the reply Ryan!! I went there and all I saw was GD module but nothing similar to Imagemagick was there. I’m gonna email my webhost JustHost now. Thanks!!

  3. st.anger.inc

    hey ryan they just replied saying “Imagemagick is already installed on server. The path for Imagemagick is /usr/local/ImageMagick/bin.”

    I’m feeling lost :(

  4. I am trying to make this plugin work on a Windows 2003 Plesk Server, PHP 5 and it seems not to write the image to the corresponding directory. I am not a programmer, however I have followed all the instructions and looked into a few forums, I could not find anyone having a similar issue, since it seems most installations have been done on a Linux server.

    I changed the permissions to the folders, .htaccess does not work with Windows, however Wordpress makes it work some how, could that be the issue? Also, ImageMagick was installed and the new version does not require an extension, I added the extension anyway, shouldn’t Imagemagick show as an option in the admin? I tried the examples on the server for Imagemagik, an it is working. GD is showing in the admin.

    http://www.boricuasenla.com/blog/index.php/advertise/ if you take a look on Chrome or IE, it shows the image was not found, if you open the image, of course it is not there, it seems it is not writing. Sorry if the issue sounds stupid, but any help I would really appreciate it and I will donate also, it is a great plugin.

    • Hi George,

      Unfortunately AnyFont was never designed with a Windows server in mind as I don’t actually have any windows machines to test on. It probably could work on windows without any major problems, But it will require certain software on the server first in order to work correctly.

      Firstly the image links require a .htaccess file to rewrite the links to the php script that generates the image. So at the very least you would need Apache installed over IIS. And secondly having just ImageMagick installed doesnt quite cut it , AnyFont needs the Imagick PHP extension installed as well, otherwise it will just use GD, if GD is installed.

      So if you have all the software installed I am pretty sure it will work as intended. Good Luck and thanks for trying out my plugin.

  5. I appreciate your wonderful plugin! It’s working well for me except that I can’t get it to work on a theme I’m developing on the home page. I’m using a query to pull posts instead of the standard loop and am not getting the anyfont result in the post titles:
    $my_query = new WP_Query(‘tag=featured&showposts=1′);
    while ($my_query->have_posts()): $my_query->the_post();
    $do_not_duplicate = $post->ID;

    It seems to be because I’m not using the standard loop, because when I replace one of my post columns with a standard loop, the post titles look great. Is there any way to get the pretty font with the way I have it set up? Thanks again for an awesome plugin! I don’t think I’ll ever do another site without it!

    • Never mind. I’ve just realized that the real problem is of the varying widths of the space for the post title. Even if I got it to work, if I set a max width on one it wouldn’t work for others. Still I often code themes not using the standard loop and it would be great to know if there’s a solution for this. Thanks!

    • Hi Randa,

      Sorry for such a delayed response, I have been hectically busy with work recently. But in response to your question, Yes there most certainly is a way to get the image when doing a request outside of the standard loop. All you need to do is code in an image tag such as the following:

      <img src="/images/style-name/<?php echo urlencode($post_title); ?>.png" alt="$post_title" title="$post_title" />

      Just replace “style-name” with the name of your own style you created and “$post_title” with the correct variable relating to the title of the post. Just make sure you urlencode it, else when certain characters are used, the image will not generate correctly.

      Enjoy!

  6. sam.gaidin

    Hi Ryan, great plugin thankyou. It was working well – I was able to add images to my category titles aswell as to one of my widgets. However, AnyFont would not create an additional widget title for some reason. So only one of my widgets has an image (I only have two widgets enabled)

    Problem number two – I tried adding images to my page titles, however the images are not displaying at all. There appears to be no change at all to my page titles.

    So for some reason I can only get one widget title and all category titles to work with AnyFont. In settings, I have the widget, category and page options selected with the appropriate styles associated with them.

    Can you help me on this one? Cheers.

  7. I installed AnyFont on my Wordpress blog and can’t get a preview of the font and it won’t upload to change the font. my site is spatterblog.com. I followed the directions carefully, no idea what I could be doing wrong….

  8. Hi, Thanks for building such a great font tool for WP. I had a question. Can you look at http://www.bayroot.com and look at the post header titles? After I insert a font of my choice there are too mysterious characters that are “> before the title. This doesn’t happen when I don’t use AnyFont, only when I do use AnyFont they appear. Do you know how to set AnyFont so these don’t appear at all? Just the title? I pulled some code from Firebug to try and track down the source of this and I found the following.

    <a style="border: 0pt none ;" alt="LA to NY Time Lapse" title="Permanent link to
    “>

    You’ll see there’s an extra “> between a style and image style paragraphs. Somehow this is being inserted but I can’t figure out how or when or why.

    Please let me know if you can figure this out for me. Thank you.

    -Gomez

  9. Same Problem here. Using Wordpress 2.8.3 on an openSUSE 11.1.
    Great work you did. would really love to use it.

  10. hi,
    thanks for the fantastic plugin.
    is there any way to get text-transform in styles working?
    thx a million
    anna

  11. drgenio

    hey, great stuff! just only one tiny bug report: it doesn’t work if the text contains slashes (path errors due to slashes)

  12. neuroglyph.games

    For some reason the pluin is not working for me – I installed it and uploaded the font I wanted – it’s an icon font for use with D&D RPG – I have a stylesheet that calls for the font:

    span.dndicon {
    font-family: ‘D&D 4e icons’;
    display:inline;
    }
    and it is part of my blog post as part of an html table:

    m

    however, all I get are the letters not the font replacement.

    Any idea what I can do to fix this?

  13. Hey, thx for this awesome plugin…
    I got a problem with my fonts: all of them are cut of 2px in the bottom.
    Do you know this issue?

Trackbacks & Pingbacks:

Post a Comment