• Twitter: billpliske

    • Category Archives: Design tips

    Getting Google Web Fonts to work in Internet Explorer

    Posted on September 10, 2012 by Bill

    While some Google We Fonts work fine across the board, many people have stumbled into problems with IE … i.e., it doesn’t work. When working on my Watchdog project for azcentral.com, I had a menu and main headlines taking advantage of some GWFs. The page looked great in Chrome, Safari, and Firefox. But as the old tale goes, Internet Explorer is usually another story.

    My top gray menu was supposed to look like this:

    But in IE, a font substitution occured, causing my menu to revert from Oswald to sans-serif, breaking it over to the next line … like this:

    The root of the issue is a combination of how Google renders their fonts, and what IE can comfortably translate. It’s not an easy mix. Many times, you’re wanting a specific GWF, but instead, you get the ever-so-sexy Arial.

    Here’s the solution

    • After I found the font I wanted, Oswald, I went to the main GWF “Quick Use” page. Sometimes you’ll want more than one style. If so, you’ll be taking care of your styles one at a time.  For Oswald, I only wanted the heaviest weight, Bold 700. I checked the box next to it.

    • Further down, in the “Add this code to your website” box, copy the href link:

    • Now go to IE, and paste that URL into the browser, as if you’re trying to visit that page.
    • Automatically, a chunk of CSS code pops up. That’s your solution.

    • Take that chunk of code, and paste it into the top of your CSS file.
    • Change one thing. You’ll notice the above chunk of code has the font-family as Oswald. Yet, near the bottom of this code chunk, you’ll notice that the font name is referred to twice more, next to a “local” attribute. Choose that first local name, the one without the hyphen, and make that your top font-family name.
    • So when you’re finished, it looks like this:

     

    If I had chose different versions, like Oswald 200, 300 and 700 … I’d do this routine for each weight, one at a time. And I’d end up with three separate chunks of code (like above) at the top of my external stylesheet.

    Hope this helped!

    Posted in CSS, Design tips, HTML | 1 Comment

    How to add Google Web Fonts for a better-designed website

    Posted on September 7, 2012 by Bill

    As a designer, the biggest handicap moving from print to Web was typography. With print, you had endless fonts at your disposal … in truth, too many. But since the beginning of the World Wide Web in 1989 through 2010, designers were limited to Arial, Helvetica, Times, Verdana … you get the idea.

    Web fonts changed it all. One of the easier entry points into web typography has got to be Google Web Fonts (GWF).  I started using them in my projects for azcentral.com early last year, but even then, the font selection was somewhat limited. What a difference a year makes. The font selection has now doubled (maybe tripled), and many typefaces come with a variety of weights.

    As an example, I recently finished designing a project called Boomer 101 for azcentral.com, and the Google web font I chose to use was a typeface called Source Sans Pro. For those of you new to web fonts, I’ll walk you through the process:

    Step 1: Find a font you like

    Source Sans Pro jumped out at me because it came in 12 styles, had a huge contrast between the thinnest and thicker version and it worked well as a headline font.

    Clicking on the “See all styles” link (above) does just what it says, showing you a live preview of each font weight for that typeface. The “Quick-use” link was the key to making GWF’s work on the web site.

    Step 2: Choose your styles, and insert the code

    After clicking on the “Quick-use” link, you’re presented with a new page that takes you through four main steps … the key here is adding this code to your website and integrating the fonts with your CSS.  The first part is adding a link to your chosen typefaces to your website. In my case, the link was:

    <link href=’http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,900′ rel=’stylesheet’ type=’text/css’>

    You’ll need to put this (above) short piece of code near the top of your HTML file, somewhere in between the beginning <head> and closing </head> tags.

    I knew which HTML I wanted to take advantage of these new fonts. For me, it was my topic headers (Family) and main headline <h1> tags.  Before making the final change, my page looked like this:

    Notice that I’m using Arial in the above example. After adding the initial code outlined above into your <head> area, I needed to add the font code to my CSS file. In this case, the code for my headers looked like this:

    font-family: ‘Source Sans Pro’, sans-serif;
    font-weight:200; 

    While the code for the main headlines used a thicker weight:

    font-family: ‘Source Sans Pro’, sans-serif;
    font-weight:900; 

    After uploading my CSS file, my webpage get its updated look:

    Keep in mind that you don’t want to use these fonts all over your website, because at some point they become a resource drain. If abused, they’ll simply slow your site down in the end. So be picky about where you decide to use them, but do use them. It might just be that small bit of polish that truly finishes off a good design.

    Posted in CSS, Design tips, HTML | Leave a comment

    I am an experienced print and web designer living in Goodyear, Arizona ... and I'm for hire! Check out some of my work in the above links.