Archive for January, 2014

#CreativeFriday – Customise your Behance ProSite with TypeKit Fonts

If you are a full subscriber of Adobe Creative Cloud and are already using the Behance/Prosite platform for publishing your work, then did you know that you are able to make use of the Typekit (https://typekit.com) font service to customise the Fonts that are used on your Prosite. If you are not using Behance/Prosite and are using the Creative Cloud, then Prosite is an additional feature that you are entitled to (Behance is already free), maybe it’s something to look into.

Behance is comparable to Linkedin for Creative Professionals, and as a result the quality of content is incredible, and as a result  provides a way to socially connect to your peers, feedback groups, as well as potential new clients or employers. Behance/Prosite are easy to use and configurable without having to write a single line of code (of course you can if you would like, as there is an open API available), this means that your presence/profile is always fresh and dynamic without the need to establish a large project for a website build. Both Behance and Prosite are used by creative pros from different disciplines including Photographers and Designers, with the idea being that there is inspiration everywhere. It’s a great way to show your work off to many different audiences and raise your profile in the Creative space. For help setting up your Behance/Prosite account then i already have a post here and a video here. There are other Behance/Prosite references here. There are integrations from the applications as well, namely Photoshop CC and Lightroom.

Having a platform that is simple to manage and refresh means that we are able to customise it with fresh Fonts via the Typekit service that comes with Creative Cloud.

Typekit is a platform that contains both web and desktop fonts for full Creative Cloud subscribers. Traditionally for a designer to use a font that they don’t own it would mean a trip to a Font foundry armed with a credit card. Adobe have teamed up with multiple Font foundries and provided an all access, easy way to use Fonts, for both web sites and desktop applications.  The Fonts are available at the Typekit website, and are accessed by your Adobe ID. Once you have logged into the Typekit service you can search and view Fonts, then either use them on your websites (including Prosite), or within your Creative Cloud applications like Photoshop CC, Illustrator CC, Premiere Pro CC or Indesign CC etc. Your Desktop applications, Fonts and Creative Cloud files are managed by the Creative Cloud Desktop App, this app (once installed and signed into) will synchronise any Fonts that you have selected to your desktops (you know you have an entitlement to two computers with Creative Cloud and it doesn’t matter if they are a combination of Windows/Macintosh machines). As of Creative Cloud version 1.3.0.322 the synchronisation of Files and Font sync are individually controllable, see post.

It’s really easy to make use of Typekit on your Behance Prosite, just sign in to your Typekit page and grab the font and go!

Once you have logged into the Typekit site you should see a site similar to the one below. There are many options including search facility (right hand side of the screen) and the ability to mark your favourite Fonts using the heart icon. To select a Font, just click on it.

Screen Shot 2014-01-03 at 10.53.05

Once a Font has been selected (in this case Calluna Sans), there is an option to show different weights as well as different renderings.

Screen Shot 2014-01-03 at 10.53.23 copy

Once a suitable font has been found, click on “Use Fonts”, you will be prompted with the following screen, then click on the Web tab.

Screen Shot 2014-01-03 at 10.54.44 copy

A Typekit kit definition is a way to protect your font from only being used on your site(s),  if you already have a kit set up, then you can able to use this, other wise you will need to create a new one.

Once a new kit has been created, you will be prompted to give it a free format name (i have just called mine Behance Prosite, as only i will see this description), you also need to specify the domains where the Fonts will be used. For Behance and Typekit you will need to always specify both *.Behance.net and *.Prosite.com, as well as any other domains that you will refer to the web Fonts from (i have included *.richard-curtis.net as this is the URL i use for my site).

Screen Shot 2014-01-03 at 10.56.48 copy

Continue will take you to the publish screen (you will need to publish the Kit to make it available to Prosite and Behance network). Click Publish (marked in Red), and once the kit has been successfully published, you will need to click on the Embed code link (marked Yellow) to get the Unique Kit code which Behance Prosite will use to reference the Font.

Screen Shot 2014-01-03 at 10.57.26 copy

Of course for normal web sites you can just embed the scripts that are displayed on this page. For the Behance/Prosite platform, just copy and past the Typekit Kit ID (marked Red), then navigate over to Behance /Prosite platform.

Screen Shot 2014-01-03 at 11.02.39 copy

There are different ways to get to Behance’s Prosite, One is via your Behance account (https://www.behance.net (see left screen below)), or, via the Behance Pro Site URL (https://www.behance.net/prosite (see the right screen below)).

Screen Shot 2014-01-03 at 10.58.29 copy

Once into Behance Prosite click on the “Settings” button (Marked Yellow), then “Custom Type Integration” (marked Pink), then enter the copied Typekit Kit ID to the ID box (marked Red). Once save is clicked the font will be made available for use on your site.

Screen Shot 2014-01-03 at 11.03.28 copy

There is an option under the settings menu that configures Global Styles used within Prosite (this option is turned on by default), however, if you would like to manually define each project page, then you will need to review it. To access this setting click on the Design button (marked Purple) / Styles (marked Light Blue) / Projects (marked Yellow) / Global Style Options (marked Red). The “Override text and & divider styles” can be used to style all projects that are created (note, this will only affect Prosite and not the Behance pages).

Screen Shot 2014-01-03 at 12.28.14 copy

Once the Global use has been defined, navigate to the Design tab (Marked Yellow), then open the Website elements / Global styles / Font. The Global styles will affect the whole site (managed by Global Style Options (marked Red) above). Now within the global Font definition the Type Kit fonts are available for use (marked Red), don’t forget to publish any changes by clicking on the Update Live Site button (marked Purple).

Screen Shot 2014-01-03 at 12.20.13 copy

Fonts exist in quite a few places on Behance Prosite, you will need to navigate around the design to make sure the pages behave in the way that you want.

Management of your Prosite is simple because by default there is no coding, so maybe this is a great point to refresh your sites look and feel. My final Prosite is available at www.richard-curtis.net, my Behance is at https://www.be.net/richard-curtis.

This blog post would not have been possible without the pure awesomeness of Michael Chaize Adobe’s own Creative Cloud Evangelist.

 

 

 

 

Share on Facebook