Utilizing Web Fonts on a Secure Server

As web designers and developers, we create sites for all sorts of purposes. Internal communication, external marketing efforts, and even the front-end design of internet applications.

Some projects need to support a secure connection (SSL) between the host and client. This can be problematic for some web font solutions.

To make it easy, WebINK provides both SSL and standard import codes for web fonts.

To implement web fonts on a secure server:

  1. Create a free WebINK account.
  2. Create a new project.
  3. Add fonts to your project.
  4. From the Type Drawer page, click on your project name.
  5. Click the Get CSS link.
  6. From this page, WebINK provides both the @import and <link> style of implementation code in both SSL and non-SSL variants. Copy the SSL code that best matches your usage.

    If you can access the <head> of your site, insert the <link> code into the header of your site. If you only have access to the CSS, insert the @import code at the top of your site’s CSS.
  7. Add the WebINK font family names from the pasted CSS code into your font stacks for text elements on your site. It is very easy to spot the WebINK font name in the code. It comes right after the “family=” part in the CSS.
  8. If you have added multiple fonts to your project, they will all be listed in the line of code. Pull them all out and plunk them into the appropriate font stacks and you’re good to go!

And the Winner of the WebVisions Portland Pass is…

…Tracy from Seattle!

Congrats to Tracy, winner of a two-day pass to all sessions, panels, keynotes, studio tours, film screenings, parties & more at WebVisions in Portland, OR, May 16-18th.

Follow us on Twitter @WebINK to be the first to know about cool prizes and the next big event giveaway.

See you at WebVisions Portland!

See you at WebVisions Portland

P.S. Friday, May 18th is the 32nd anniversary of the eruption of Mount St. Helens. Kaboom!

1600 more WebINK fonts in Photoshop Plug-in!

Today we’re pleased as punch to announce the addition of 1600 fonts from two more WebINK foundries to the collection of fonts supported by our Web Font Plug-in for Adobe Photoshop. URW++ and TypeTogether have now added their fonts to the Plug-in!

What’s that mean for you? Just that you can now do prototyping for your web site in Photoshop with over 80% of all the WebINK fonts, now including such popular choices as URW Franklin Gothic, Eurostile, Adelle and Skolar! All without paying a penny: utterly free for the purpose of designing and comping web sites.

URW Franklin Gothic sample

URW Franklin Gothic sample (19 fonts)

Eurostile font sample

Eurostile font sample (16 fonts)

Some TypeTogether fonts

Some TypeTogether fonts

Prototyping Projects for FREE using WebINK

Developing websites for clients can be an invigorating yet challenging process.

Whether you develop site mock-ups using Photoshop and the Web Font Plug-in, or if you prefer to prototype a live sample site, you can accomplish both tasks for FREE with WebINK.

Option 1 – Prototyping a live site

An increasing number of developers are choosing to start coding sites for customer review. Typically using sample stock images and dummy text, until recently, it’s been difficult to use live web fonts on sample sites without paying for the rights to do so. WebINK now allows you to create sample live sites for FREE.

WebINK now includes a FREE project usage level – the Developer mode.

When you’re developing your prototype site, you can now use real, live web fonts from WebINK without any payment. The only restriction is that projects that are in Developer mode are restricted to 10 unique IP addresses per day. This is perfect for client reviews, team-based workflows and so forth.

After you’ve developed your complete site, it’s easy to take the project live on WebINK. You can roll the bandwidth required for the site into your own account, or even transfer your project over to your customer’s WebINK account.

Create a free WebINK account to get started.

Option 2 – Creating Photoshop Mock-ups

If you develop using a more traditional web development workflows, you may start with a Photoshop mock-up before writing any code.

Traditionally, when creating comps, you would need a desktop version of a web font to use in Photoshop.

WebINK makes it easy to use the actual web font in your Photoshop mock-up for free using the Web Font Plug-in.

The plug-in provides access to the vast majority of the fonts available from WebINK, and can be used free in Photoshop comps that can be saved out as JPG, PDF, or any other file format.

Download the Web Font Plug-in to get started.

Win Your Pass to WebVisions Portland, May 16-18!

Win a Two-Day Pass to all sessions, panels and keynotes, studio tours, film screenings, parties & more at WebVisions in Portland, OR!

Entering its 12th year in Portland, WebVisions brings a fabulous lineup of experts in web and mobile design, technology, user experience, DIY, strategy and more. Enter to win your pass! It’s easy!

Tweet:

I wanna explore the future of the web at WebVisions Portland! http://bit.ly/IWxRR8 #webvisions #portland #webink #education

A random winner will be announced on May 10th and will receive a Two-Day General Admission Pass—a $425 value. Your pass also includes free wifi at the conference, entry to the WebVisionary Awards Gala on Friday, May 18th and a cool WebVisions t-shirt. WebINK is a proud sponsor of WebVisions Portland and we hope to see you there! Get to tweetin’!