Monthly Archives: June 2013

Not so long ago, standard monospaced fonts were the norm in computers. Then, a young Steve Jobs took a calligraphy class in college and eventually built a computer capable of housing endless font options. The Internet was slower to catch-on with the digital font revolution. When was the last time you took notice of a font on a website? We’ve been staring at the same old standard fonts for so long that we neglect customizing how our content looks from the first typed letter. If you’re ready to take the next step in customizing your web fonts, there are a few things to consider before taking the plunge. First of all, just because web fonts can be creatively customized doesn’t always mean they should. Your body copy should be easily readable, which is what makes fonts like Helvetica or Arial so popular. Instead, employ creative and innovative fonts in your titles or headers to bring some personality to your copy. Using a new web font also requires a little coding before you’re up and running. But don’t let digging into the backend of your site intimidate you. A tool like Google Fonts holds your hand throughout the process from font selection to instructions on inserting the code into your website. And best of all, it’s free to use!  Here’s how to get started:   Step #1 – Back-Up Your Website Before you touch your current fonts, back-up a copy of your website according to your local hosting provider’s instructions. You never know when you might hit a bump or a wrong key and need that latest version.   Step #2 – Getting Started To choose the font that’s right for your site, visit Google.com/fonts for a collection of 629 (and counting) font families. Look at the top of the screen and locate the tabs reading “Word, Sentence, Paragraph and Poster.” Pick the option you want to see and type the text you the “Preview Text” field. Next, pick a font size and start scrolling down to view your text in a wide variety of fonts. Each cell of text features a different font option ranging from Meriweather Sans to Caudex, making it easy to compare and choose your favorite.     Step #3 – Filter Your Results The left-hand side of Google Fonts offers a “Filters” section. Click on the “All Categories” drop-down and choose between serif, sans serif, display or handwriting and hit “Okay” to see your new preview. You can also select your font thickness, slant, width and script to customize your results to find the exact kind of typeface you’re looking for.   Step #4 – Build Your Google Web Font Collection Once you find the perfect font style, hit the blue “Add to Collection” button. You can also customize more font options and build up a collection of different options that are ready for use. Just be careful about the number you select. Google will end up taking all the font collections you choose and giving you a code to insert into your site. Stick with one or two fonts or risk dragging down the speed of your site.   Step #5 – Review Now, look at the bottom of your screen. There, you’ll see your Font Collection on the lower left-hand side. Highlight the collection you want to see and click “Review” to see your font in action.   Step #6 – Use Your New Font Once you’re ready to go, select your Font Collection and click on “Use” in the lower right-hand corner of your screen to read through the available options. Be sure to check out Google’s handy icon that displays your new font’s estimated impact on page load times and the tip, “Using many font styles can slow down your webpage, so only select the font styles that you actually need on your webpage.”   Step #7 – Add to Website Ready to integrate your new Google Web Font into your website? Scroll about halfway down the page until you see the option for, “Add this code to your website.” Stick to the standard option to copy and paste the code into the header of your site. Google Fonts will give you instructions to paste the code as the first element in the of your HTML document. You’ll also find instructions on how to import the code into your stylesheet or use JavaScript.     Step #8 – Integrate the Fonts into Your CSS Don’t worry about how the fonts will look in different browsers. Google Fonts’ API will go ahead and generate browser-specific CSS to use your new fonts. That said, you still need to add the font name to your CSS styles to make it all work. Here’s an example CSS style that Google Fonts gives to keep you on track: h1 { font-family: ‘Metrophobic’, Arial, serif; font-weight: 400; }   Step #9 – Test Your Site Hit “Save” and preview your site. If you’re not seeing anything different, try opening a different browser or clearing your cookies first. You might be staring at a cached copy of your site.   Step #10 – Take a Short Cut If you’re using a WordPress template for your website, consider taking a quick and easy short cut. Download the Google Web Fonts plugin and directly customize your font options from within your WordPress dashboard. Google Fonts regularly adds new options to its library, so keep checking back if you’re looking for a specific style. But don’t worry about missing out if you’re using the WordPress plugin. It will tell you when an update is available, unleashing a whole new world of fonts at your fingertips. Continue reading →