Prototyping with Google Web Fonts

There are a lot of high-quality resources for the web out there. One of those is Google’s Web Fonts, which provides easy access to hundreds of free-to-use fonts. Since ProtoShare prototypes are based on web standards (HTML5, CSS, nyan cats, etc.), using these fonts in a prototype is really easy.

Here’s a design I made called “Step Up Your Game” (click for a larger view):

Step Up Your Game Draft

Step Up Your Game Draft

I like the design, but the built-in fonts don’t really capture the retro feel I’m after. Luckily, a quick trip to Google Web Fonts yields Monoton, by Vernon Adams, which is perfect.

Using a web font in ProtoShare is a snap:

  1. Get the “@import” CSS from the  page for the font.
    (You want the “@import” version, not the “Standard” or “JavaScript” versions.)

    Google Web Font "Quick Usage" Page

    Google Web Font "Quick Use" Page

  2. Add it to the Main Style Sheet in ProtoShare.
    (Be sure to add the “@import” before any other styles.)

    ProtoShare Style Sheet Editor

    ProtoShare Style Sheet Editor

  3. Use the font name in the Inspector
    (ProtoShare will find the font in your style sheet and add it to the list of fonts.)

    Component Inspector

    Component Inspector

That’s really all it takes to use a custom font in a ProtoShare design. Through the magic of web standards, it just works! Here’s the finished design:

Step Up Your Game Final

Step Up Your Game Final

This entry was posted in Blog, ProtoShare Tips & Tricks, Prototyping Benefits. Bookmark the permalink.

Previous post:
Next post:

8 Comments

  1. Donald says:

    I’m using Open Sans from google fonts but I can’t seem to add different weights for the font family I’m using. Is there a way to do that?

    • Alex Johnson says:

      Hi Donald,

      In February, we released ProtoShare 9.3, which includes settings for expanded font weights. If the font you’re using supports these weights, it should be easy to use them.

      The font-weight setting is now separate from the font-style (normal vs. italic) setting. In addition to Normal (400) and Bold (700), there are now choices for Semi-Bold (600), Medium (500), Light (200) and Ultralight (100).

  2. Alex Johnson says:

    Update March 2014: These instructions are out-of-date, please see my reply above for newer (and easier) instructions.

    Hi Donald,

    We’re working on adding support for more font weights in an upcoming release. For now, you can use these weights via CSS classes.

    For example, to use the “Semi-Bold 600” weight of Open Sans, add this to your project style sheet:

    .font-weight-600 { font-weight: 600; }

    Then add the font-weight-600 class name to your component. (There is a field in the “Mark-up” section of the Inspector for adding CSS class names to components.) Leave the Text Weight set to Automatic in order to use the value from your custom CSS class. (You’ll still want to choose “Open Sans” for the Text Font.)

  3. Dave says:

    Any way to make this the default font for the whole project?

  4. Alex Johnson says:

    Hi Dave,

    Absolutely! Follow steps (1) and (2) from the article. Then, instead of choosing the font for each component, leave the component fonts set to Automatic and apply the font to the body element using your project style sheet.

    For the design in this article, you would add body { font-family: 'Monoton', cursive; } to the style sheet after the @import line.

    • Dave says:

      Worked perfectly. Thanks!

  5. Dave says:

    What about icon fonts, such as Font Awesome? http://fortawesome.github.io/Font-Awesome/? Is there a way to utilize them?

    • Alex Johnson says:

      It’s not as well supported as the fonts, but you can use icon fonts in your designs. First, import the icon font style sheet into your project style sheet. Then you can add the icon class names to components using the .class field in the Mark-up section of the inspector.

      So, to create a bullhorn icon using Font Awesome, add this near the top of your style sheet: @import url('//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css');

      And then add a component to your canvas (“Heading 4” works well) and set it’s class names to fa fa-bullhorn.

      It’s not all sunshine and rainbows, though. Because of the way these icons work, the icon won’t respond to the component’s appearance settings. If you want to style the icon, you’ll probably need to use the project style sheet to do so.

      We’re working on some improvements to address the styling issues, so stay tuned. I’ll add a comment to this post when it’s released.

Leave a Reply

Your email address will not be published. Required fields are marked *