Prototyping with Web Fonts (and Icons!)

This is an update to my earlier post, Prototyping with Google Web Fonts. A lot has changed in the time since I wrote that article, both in ProtoShare, and in web design.

In addition to using custom fonts to make text more interesting, people are also creating custom fonts that contain entire sets of scalable, high-quality icons. This article from The Next Web has a rundown of some great ones. We’ve recently made some changes to ProtoShare that make them easier to use than ever.

To demonstrate, I’ve created a design that uses both a stylized text font and an icon font (and no images):

Blast Off with ProtoShare 9.4

Styling the Text

For the text, I used Rock Salt from Google Fonts. Adding this font to a ProtoShare project is easy:

1. Find a font you like on Google Fonts. (For example, type “Rock Salt” into the search field).
2. Click the “Quick Use” button for that font.
3. Copy the “@import” CSS code (not the “Standard” or “JavaScript” code):
   

   Rock Salt Quick Use

4. Paste the CSS code at the top of your project style sheet:
   

   Adding "Rock Salt" to the Style Sheet

That’s all it takes. You can use this font in every design in your project.

• To make it the default font for all text in your project, apply it to the body element with a line (after the @import rule) like body { font-family: "Rock Salt", cursive; }.
• To apply the font to an individual component, choose it for the “Font” setting in the component inspector, just as you would choose any other font. ProtoShare automatically finds these fonts in the style sheet and adds them to a “Google Web Fonts” section in the list.

Creating the Icon

For the icon, I used the “rocket” icon from Font Awesome. Adding Font Awesome to your project is also easy:

1. Find the URL for the Font Awesome style sheet on the BootstrapCDN. You won’t be using the entire link that’s shown on that page. Instead, create an @import rule using just the URL from the href, like:

   @import url('//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css');

2. Just like with the text font, paste this CSS code top of your project style sheet:
   

   Adding "Font Awesome" to the Style Sheet

Once Font Awesome is added to your project, you can create icons by adding special class names to components. Although you’ve always been able to add class names to components, in ProtoShare 9.4 you can now add class names to the inner “content” element of a component. This allows the icon to be styled using the appearance settings, and it’s what we’ll use to create our icon:

1. Since the icon is created as text using a special icon font, we need a text-based component. A good starting point is the “Heading 1” component because it doesn’t have many appearance settings applied, and it auto-sizes to fit its content. Drag a “Heading 1” from the palette to your canvas.
2. Select the component, and the in the component inspector, find the “Mark-up” section. Add the class names for the icon using the “Content .class” field. For the rocket icon, I used fa fa-rocket:
   

   Creating a "Rocket" Icon

3. Now that the icon is in place, you can delete the placeholder “Heading 1” text.
4. Since the icon is just text, your can style and resize it using the “Text” appearance settings:
   

   Styling and Resizing the Icon

Taking it Further

I hope you find these techniques useful. The ability to import custom style sheets into your project is a really powerful feature of ProtoShare. With the additional id and class name fields in ProtoShare 9.4, we’ve added flexibility that allows you to truly take advantage of these imported style sheets.

Styling text and creating icons only scratches the surface of what’s possible, though. There are lots of “CSS libraries” out there that can be used by simply importing a style sheet and applying some class names. Do you have any favorites?