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.
-
Recent Posts
Recent Comments
Archives
- September 2019
- August 2019
- July 2019
- June 2019
- May 2019
- April 2019
- March 2019
- February 2019
- January 2019
- December 2018
- November 2018
- October 2018
- September 2018
- August 2018
- July 2018
- June 2018
- May 2018
- April 2018
- March 2018
- February 2018
- January 2018
- December 2017
- November 2017
- October 2017
- September 2017
- August 2017
- July 2017
- June 2017
- May 2017
- April 2017
- March 2017
- February 2017
- January 2017
- December 2016
- November 2016
- October 2016
- September 2016
- August 2016
- July 2016
- June 2016
- May 2016
- April 2016
- March 2016
- February 2016
- January 2016
- December 2015
- November 2015
- October 2015
- September 2015
- August 2015
- July 2015
- June 2015
- May 2015
- April 2015
- March 2015
- February 2015
- January 2015
- December 2014
- November 2014
- October 2014
- September 2014
- August 2014
- July 2014
- June 2014
- May 2014
- April 2014
- March 2014
- February 2014
- January 2014
- December 2013
- November 2013
- October 2013
- September 2013
- August 2013
- July 2013
- June 2013
- May 2013
- April 2013
- March 2013
- February 2013
- January 2013
- December 2012
- November 2012
- October 2012
- September 2012
- August 2012
- July 2012
- June 2012
- May 2012
- April 2012
- March 2012
- February 2012
- January 2012
- December 2011
- November 2011
- October 2011
- September 2011
- August 2011
- July 2011
- March 2011
- November 2010
Categories
Meta