Got Nuts?

Are your website fonts driving you nutty? Then you need Font Squirrel! Font Squirrel provides free fonts for your website. In most cases, no strings attached. Their fonts can even be used for commercial purposes. However, I recommend reading their license description prior to using them for a specific purpose.

Using Font Sqirrel fonts is really easy. Here’s a breakdown of what you ned to do:

1. Find your font using the @font-face kits menu option.
2. Download the zipped font file.
3. Unzip the font file.
4. Upload the fonts to your website. I recommend a separate folder to keep things organized. Upload the files using an FTP client or your web host file manager.
5. Font Squirrel provides a sample style.css file that shows you how to declare the fonts. Copy the CSS from this file to your theme style.css file. You can edit your style.css file by going to Appearance => Editor in your WordPress admin. Don’t forget to make a backup copy of files before editing them.
6. Paste the CSS into your theme style.css file near the top. Paste it before any CSS rules.
7. Add the new fonts to your CSS rules to start using them.
8. Easy as pie!

If you want to make your site unique, why not try some fonts from Font Squirrel!

Do you use fonts other than default fonts on your website?

Google Fonts

This video shows you how to add Google fonts to your WordPress website without using a plugin. Why not use a plugin? You may be designing a theme, you may like to tinker with your website or you may have determined that a font plugin slows down your website. Whatever your reason, plugins aren’t always the best answer. Let’s take a look at how to use Google fonts without a plugin.

Find Some Google Fonts

Head on over to the Google fonts web page. If you haven’t been there before you’ll get a splash page with a brief description of the process for using Google fonts. It’s pretty easy to use Google fonts in your WordPress website without using a plugin. There are just three steps:

1. Find your fonts
2. Add some code to your theme files
3. Add some CSS to use your new fonts

Simple! Yes!

Find Your Fonts

Immediately after the splash page is the font list page. This page allows you to select which type of fonts you want: Serif, Sans Serif, Display and Handwriting. The Filter dropdown on the left will let you select the type of fonts you want to see.

At the top of the page is where you set what is displayed for each font. You can see a word, a sentence or a paragraph with the font in use. You can set each to display your own text, the font name, a sentence or the alphabet. You can also change the size of the font being displayed. Last but not least you can sort the list in various ways. Play around with these options to see what each does.

If you want to use your new fonts for just headings or your site title, you can use any font you want that is available from Google. But, if you want to use your new fonts in headings, text, lists and blockquotes, in other words all over your site, you’ll want to find fonts that have at least four key font styles. You can use the Sorting option to sort the font list by the number of font styles available for each font.

The four fonts you will need if you want to use your new font all over your website:

• Normal
• Bold
• Italic
• Bold Italic

Sort the font list by Number of styles and find a font that has at least these styles available.

Once you find a font you want to use, click on the Quick Use link.

 Add Some Code to Your Website

The next screen is the Quick Use page. It starts by asking you a couple of questions. The first is which of the font styles do you want to use in your website. Check at least the boxes for Normal, Bold, Italic and Bold Italic. The second question needs to be answered sometimes. If the box for Latin extended is available, most people won’t need to check this box.

After the questions are the options for making the fonts available to your site. You have to add some code somewhere. You knew that was coming and this would be the techy part. You have three options for making the fonts available:

1. Add a <link> tag to your header.php file
2. Add an @import rule to your style.css file
3. Add javascript to your header.php file

Watch the video to see where and how to add the code to your file. The video shows two ways to add a <link> tag and javascript.

Add Some CSS to Use Your New Fonts

All you have to do is modify your current CSS or add some new CSS. If you have some simple changes to make, go to Appearance => Editor, scroll to the bottom of the CSS file and add your new CSS. If you have extensive CSS changes you may want to edit the existing CSS rather than duplicating some of it. You may also want to create a child theme before making modifications to the CSS. Watch the video to hear about child themes.

Find Out More About Fonts in WordPress

Introduction to Fonts in WordPress

Visit: GuyVBoxing

Site Type: WordPress & XHTML Splash Page

Theme: Custom child theme. Custom graphics were provided by the customer for this site. The Photoshop files were incorporated into Foundation for WordPress a responsive theme. Customizations include a single page, scrolling home page with anchor links. I wrote a custom loop to retrieve all of the pages and put them into the home page. The custom loop added HTML anchor links to each page heading. The menu uses the anchors to skip down or up to each page. This was a request of the customer.

Other customizations include the clickable gym icons on the home page. Clicking one of the icons produces a Google map in a lightbox. The lightbox is Reveal which is part of Foundation. The Testimonials page has a link in the upper right to skip through one additional testimonial page. The scrolling photos on the Photos page uses Orbit which is also part of the Foundation theme. Orbit was customized to include the text over each image. The Contact page was customized with jQuery tabs. The gym icons are clickable on this page too. However, clicking a gym icon here changes the map to the right. Very cool! This took a while to figure out how to do it. I need to write a post on how to do Google maps in tabs.

I created some simple column shortcodes for use on the various pages that have 3 columns.

The splash page graphics were provided by the customer. The splash page is a simple XHTML page. The splash page was a customer request also.

Plugins: Allow PHP in Posts, backWPup, Google Maps V3 Shortcode. Custom addition of jQuery tabs javascript.

What kind of fonts does a graffiti artist use?

Why Do So Many Websites Use the Same Fonts?

Have you ever noticed that most websites use similar fonts? Is it a lack of intertest in being unique? Is it because fonts don’t matter? No, it’s because the computer or device you use to view a website provides the fonts. Back in the day of slow internet connections, using fonts available on the computer was a good way to keep the size of web page files as small as possible. Today, downloading a font file isn’t really that big of a deal with high speed connections, fast storage systems and fast processors.

Fonts are specified with CSS. WordPress uses themes for the graphics and layout of web pages. The theme files include a style.css file which will specify the fonts to be used. Typically a common font is specified so that the design will look good no matter what device is viewing the web page.

Did I mention that a PC has different fonts than a Mac? Or a Linux machine? Yep, that’s why web sites typically use a common font. There are only a few fonts shared by the three primary desktop computers.

Why Do Websites Still Use Common Fonts?

Good question! There are a number of reasons. Here are three reasons why common fonts are still being used:

1. Additional work is needed to use special fonts or fonts not available on the typical computer.
2. It’s easier to design web pages using common fonts.
3. Free fonts have been limited to specific fonts or page views.

You may be surprised by the last reason mentioned. Who would think fonts have a price? Well, fonts have to come from somewhere. People create them and everybody needs to make a living. So some fonts have a price. Some are free.

The availability of free fonts has been increasing as of late. It’s becoming more common to see font options in a premium theme as a result. Free themes typically use common fonts, although some free themes have font options.

Where Do I Get Free Fonts?

WordPress users always have the easy option of installing a plugin. That’s one of the things that makes WordPress so great! Need some different fonts? There’s a plugin for that! Here are three popular WordPress font plugins:

• WP Google Fonts plugin -  uses Google fonts; you can apply fonts to specific elements like h1 tags
• AnyFont plugin -  requires free account at FontServ.com; provides a processs to convert TrueType or OpenType fonts to web fonts; uses the @fontface CSS rule to implement
• Typekit Fonts for WordPress – requires a free account at Typekit; Typekit is a font service with thousands of fonts

These plugins will allow you to use more interesting fonts than those found on the typical computer. Check them out if you want to implement some cool fonts using a plugin.

Fonts without Plugins

This article is the first in a series of four articles on fonts in WordPress. In the following three posts, I will be covering how to implement fonts in your theme without using a plugin. I’m a hands-on guy and like to implement without plugins when I can. The next three posts will cover the implementation of Google fonts, fonts from Font Squirrel and implementing Typekit fonts.

Do you use unique fonts on your website?

I wrote this book because I’ve met a number of people who were frustrated with WordPress because they couldn’t get what they wanted out of their site. It may have been a table layout, background images or font colors. But, I realized that in all of these cases if these people just knew a bit of HTML or CSS they could get what they wanted from their WordPress website.

My book is written in a conversational style to keep it interesting. The book consists of these five sections:

1. Basic XHTML where you’ll practice writing tags and learn about the structure of web pages
2. Create a simple website on your local computer
3. Bsic CSS where you learn CSS syntax and practice writing rules
4. Apply CSS to the website you created on your local computer
5. Take your new HTML and CSS skills and apply them in a WordPress website

All of the sections are hands-on because that’s the best way to learn.

You can cover each section in a week or less. Just imagine how satisfied you’ll be when you finish this amazing book and apply your new skills to your website. Or maybe you’ll start working on other websites for money.

The book is available in PDF format for immediate download. Check it out here: The WP Stew Guide to HTML + CSS + WordPress

I wrote a book. Now that’s either really smart or a big waste of time. I guess if people buy it, that will tell me if it was worth my time. Anyway… I needed a logo for my new book. I also needed it for the book website – WPStew.com. I’m not a graphic designer so I needed help.

99designs.com is a website where you can set up a design contest for a logo, stationery, brochure and website graphic designs. Take a look at their site for a complete list of design categories. Even though I’ve purchased many products and services on the Internet, I was a bit reluctant to undertake this adventure.

Go For It!

Once I got my gumption up, I created an account and set up the contest. Setting up the contest doesn’t take a whole lot of information. You’ll want to explain to the designers what you want and why you want it. For example, if you owned a pizza store and wanted a new logo, you would describe the location of your store, the décor, the staff, why you’re in the pizza business and of course you would describe why your pizza is the best in the area. You also might provide colors that you’ve used in advertising or the décor of your restaurant.

After the contest is set up, you just wait until designers start submitting designs. It may take a couple of days as it it did with my contest. I thought nobody was going to submit a design. But then designs started appearing. Each design is submitted in expectation of you providing feedback. Do you like the design? Is the designer on the right track? Are the colors right? Providing feedback results in more designs being submitted. The process of submission, feedback and submission continues for several days.

Guarantee the Prize

At one point, 99designs.com asked if I wanted to guarantee that the contest prize would be awarded to someone. Previously, I had only committed to holding the contest. Now I was being asked to guarantee the award to one of the designers.

The designs that had been submitted at that point were good enough to make me agree that I would be happy with one of the designs. So I went ahead and guaranteed the prize. 99designs.com indicated I should expect more submissions after guaranteeing the prize. I’m not sure that I saw new designers enter the contest, but the designs that had been submitted were great.

After a week of providing feedback on the submitted designs I had to select the finalists. The finalists were easy to pick from the submitted designs. The designers have varying levels of design skills. My design included a character and drawing human faces is one of the hardest things to draw. So the people good at drawing faces were included with the finalists.

Select a Winning Design

Selecting a winning design from the finalists wasn’t easy. Many more designs were submitted over the next few days. Again, the submission, feedback and submission process refined each design. The finalists are eager to make modifications because they know they’re close to the prize.

The process to get to the final design took about two weeks. My first experience was a good one with 99designs. I did discover, with the help of one designer, that at least one design was not original. I was surprised that someone submitted a design that wasn’t original. But for the most part, the designs were original, fun and well done.

The cost for my logo was $295.00. I know there are other sites that produce logos for a lower price. I like 99designs.com because you get to see the designs before you pick the finalists. You pick up to 6 finalists and then work with the finalists to refine your logo. If you’re not seeing designs you like, you don’t have to guarantee the prize.

New Logo for WP Stew

Here’s a link to the contest I held: The WP Stew Guide to HTML + CSS + WordPress Logo Contest

I expect to finish the WP Stew site in the next couple of weeks. The book should be available within two weeks as well.

Have you ever had a logo designed?

The WP Stew Guide to HTML + CSS + WordPress

This 790 page book covers basic HTML, basic CSS and how to use both in WordPress. Really, 790 pages? You might be thinking, “Holy cow, Kurt, I’ll never read nearly 800 pages!” Don’t worry, it’s a book about web design. There are hundreds of screenshots in the book. In fact, most pages will have a screenshot taking up at least half of the page. There, now, do you feel better? You can handle pictures, can’t you? I knew you could.

Jam Packed with HTML, CSS and WordPress Help

This book is intended to help you understand basic HTML. It walks you through and shows you how to write basic HTML. The book is also intended to help you understand basic CSS. It walks you through and shows you how to write basic CSS. Last, but not least, the book walks you through the process of transferring HTML web pages to a WordPress website.

The book includes a number of HTML, CSS and image files. You’ll use these files to make a working website right on your computer. There are starter files and finished HTML and CSS files. After you create your website, you’ll transfer the HTML and CSS to a WordPress website.

Once you see how to write HTML and CSS you’ll be amazed at what you can do. Not only that, but you’ll be able to use both HTML and CSS on your WordPress website. Wow!

Where It’s Available

The WP Stew Guide books will be available only at: WPStew.com. The site is currently under construction. The book will be launched on January 2, 2012.

Stay tuned.

I like finding hidden gems as much as the next person. Not too long ago I found one in Mikogo.com. Mikogo offers free web conferencing and desktop sharing for personal use. For businesses they offer competitively priced services.

Mikogo is a simple to use service that you can take advantage of as a solo entrepreneur or as a small business. Mikogo offers web conferencing and desktop sharing in an easy to use package. Web conferencing allows you to broadcast or shrare your desktop with people you’ve invited to view it. The obvious advantage to web conferencing is that you don’t have to travel to a customer’s location.

 Ideas for Using Web Conferencing

• demonstrate your product
• teach a course
• make a sales pitch
• give a presentation
• conduct a meeting
• conduct a webinar with talking points, slides, videos, whatever you want!

Desktop Sharing for Tech Support

Mikogo also lets you share desktops. How is that different from web conferencing? With desktop sharing, you can take control of another computer while sitting at your desk. Mikogo allows a participant in a web conference to give control of their keyboard and mouse to you. You can then show them how to use software, how to make configuration settings or fix a technical problem. Your customer can see what you’re doing so you not only make the changes, you show them how you did it. Teach a person to fish, right?

Free and Low Cost Options

Mikogo is free for personal use. I’m sure if you want to try it out for your small business, you can do it without paying for the service just to try it one time. The service is competitively priced with other bigger names like WebEx and GoToMeeting.

Do you remember the last time you joined a WebEx or GoToMeeting web conference? I do. It was kind of a pain and somewhat unnecessary to “register” for the conference. Mikogo doesn’t require any software installation, although a small connection software runs locally. Mikogo requires only a name for your participants. That’s it. All participants have to do is go to Mikogo.com, click on Join Session, enter the session ID and enter a name. No registration. No hassle for your participants. Now that’s simple and easy!

If you’re in the market for a web conferencing or desktop sharing service, check out Mikogo. I’ve used it and found it to be excellent.

Have you found any hidden gems recently?

Way Back When

This story begins a little over two years ago. I was working the job board circuit looking for WordPress jobs. I bid on a simple job to adjust a page header and insert a logo. When I started working on the job, I understood why the site owner was having problems. I don’t recall why it was a bit of a challenge, but it took me longer than I thought it would take. Anyway, I finished the job as quick as I could and was promptly paid.

Move ahead to this summer. I was reading a post on a site that referred to another site as being inspirational, funny and that offered great advice. So I clicked and landed on a site like I hadn’t seen before. Come to find out, this was the person who needed the logo inserted into her header. Of course she had a new theme now. She has a very nice custom theme in fact.

Like a Drunken Sailor

Just so you know, swearing doesn’t bother me. In fact I do it myself, probably too frequently. I hadn’t been on a website with much swearing prior to this one. I had never been on a professional site with frequent swearing. Huh? A supposed professional swearing on their business website? How unprofessional is that?

At first glance you would say, “That’s just not right. That’s very unprofessional.” But, then you take a step back, read her story and understand what Ash is trying to do and you begin to understand. Understand? Yes, understand that she’s just being herself and doing what she wants with her life. And who doesn’t want that? I mean the part about doing what you want with your life which may or may not include swearing.

Read some of her articles and you’ll also see that she understands marketing, acquiring clients and writing. She knows a bit about hard times too. Ash isn’t for everyone, especially if you don’t like swearing, sex talk and drinking. But for the rest of us, she’s funny, inspirational and smart. Take a chance and wander over to Meet Ash @ themiddlefingerproject.org.

Stop back and let me know what you think.

I recently moved my sites to a new hosting company. Previously, I had been using 1 &1 for my hosting. For the most part, 1 & 1 provided a good service. I had no complaints about down time or how fast my site loaded. But, 1 & 1 has not kept up with the times. They have a custom admin screen that is klunky at best. There support is outsourced to the lowest price bidder based on the responses I received on a couple of questions.

I felt is was time to move to a better hosting solution. I looked for a web host that would allow me to scale up my account should I experience significant growth in visitors to my site. What? A man can dream can’t he?

So I moved my sites over to MediaTemple (MT). It was fairly easy to move my sites to MT. MT allows you to access your site before changing the DNS pointers by accessing a URL related to your account and server. This makes it easy to add a new db, copy and upload your files before you change the DNS pointers.

My WordPress Database Backup No Longer Worked

So what does moving to MT have to do with database backup? Well, I discovered that my chosen database backup tool didn’t work on MT. MT tech support offered some suggestions but didn’t solve the problem. I posted a question on the WP.org support page for the backup plugin. The plugin author did respond with a suggestion. However, his suggestion was to do some debugging.

In the meantime, I had decided to investigate my options for backing up WordPress databases. The last time I looked at backup tools, most of them were designed to backup only the database. I was pleasantly surprised to see some new plugins that have much more flexibility. I looked at a number of plugins, including: Simple WordPress Backup, EZPZ One Click Backup (what a name!) and backWPup.

My Recommendation for WordPress Backup

After installing and testing several of the plugins, I settled on backWPup. This plugin installed without problem and ran without error on MT. That of course, is the first qualification for any plugin. I was pleasantly surprised by the options in this plugin.

The author has taken the time to create a flexible plugin. It offers a lot of options without making it too complex. Here are some of the options and reasons why I like this plugin:

• You can backup only the database (my choice for now, as I manually copy files monthly)
• You can backup all the site files, some site files or any combination of files
• You can specify the backup folder
• You can have the backup emailed to you
• You can backup to: an FTP server, Dropbox, SugarSync, Amazon S3, Google, Microsoft or Rackspace (now that’s flexibility!)
• You can select the day and time of your backup
• You can backup hourly, daily, weekly, monthly or one time
• You can specify the output format, such as zip and tar
• You can have an email sent if there is an error (cool!)

Overall, this is a well thought out plugin with lots of options. But, it also won’t overwhelm you either. This plugin gets the very important job of backups up done without fanfare. If you’re looking for a backup solution check this one out.

How often do you backup? Which backup plugin do you use?

If you found this post helpful, why not share it with friends? They’ll be glad you did!