Adding Typekit Fonts to Paperpunch

lance · Member · May 26, 2010 at 10:00 pm
Copy link

Add topic to favorites
We launched Paperpunch today, and it has an option to add two Typekit fonts to enhance the theme’s typography.

Here are the steps to enable both fonts for your WordPress.com site.
1. Log in to your WordPress.com Dashboard and go to Appearance → Typekit Fonts.
2. Sign up for Typekit by clicking Sign up in seconds. This redirects you to the Typekit website.
3. Click Try it for free and enter your name, email, and password. Your site URL is added automatically.
4. After you create your account, continue to choose a plan. Both of the fonts are available on all plans from “Trial” on up.
5. Next, click Configure WordPress. This takes you back to your WordPress.com Dashboard.
6. Then find the two fonts on the Typekit website (you should be already logged in): typekit.com/fonts/junction and typekit.com/fonts/chunk and click Add then click Publish at bottom right of the dialog window. Do this for both fonts. You don’t need to change any of the settings in Typekit for Paperpunch since it already has the Typekit CSS selectors enabled in the stylesheet.
7. Now grab a drink, stand up and stretch (did you touch your toes?). After your break refresh your site to see the new fonts.
You can learn more about how Typekit works with WordPress.com sites here: http://typekit.zendesk.com/entries/121731-using-typekit-with-wordpress.
timethief · Member · May 26, 2010 at 10:13 pm
Copy link
@Lance
Ermmm (she clears her throat) … What is “Paperpunch” and where can we find out more about it please?
timethief · Member · May 26, 2010 at 10:19 pm
Copy link
Cancel that. ^ I found it. Paperpunch is a new theme that IMO already has nice fonts. :)
sl1k · Member · May 26, 2010 at 10:25 pm
Copy link
Thanks lance, for posting the tutorial, = )

@TT Wow the new paper punch theme is very basic looking. = (
timethief · Member · May 26, 2010 at 10:29 pm
Copy link
@slikbonez
Yes it is. It’s clean, 2 columns, right sidebar, 4 footer sidebars, good SEO.
muhshodiq · Member · May 26, 2010 at 10:49 pm
Copy link
@ timethief
How do you know that Paperpunch is good SEO?
timethief · Member · May 26, 2010 at 10:51 pm
Copy link
Why do you ask?
timethief · Member · May 26, 2010 at 10:57 pm
Copy link
I’m disappointed that the horizontal navigation bar for static Pages with drop-downs to child pages is not included in the wordpress.COM version like it is in the wordpress.ORG version. :(
rickla · Member · May 26, 2010 at 10:58 pm
Copy link
The link at the bottom of the post leads to a 404 error.
timethief · Member · May 26, 2010 at 11:03 pm
Copy link
@rikla
That’s strange. Both the “The Theme Foundry” link and the”Blog at WordPress.com” link are working on it on my test blog.

Please post the complete URL for the blog you are experiencing this on starting with the prefix http://
lance · Member · May 26, 2010 at 11:41 pm
Copy link
Let’s keep the posts here on topic about the Typekit fonts. If you have questions about other Paperpunch issues please start a new thread. Thank you! :)
thamilkman · Member · May 27, 2010 at 1:36 am
Copy link
is paperpunch limited to those two fonts?
lance · Member · May 27, 2010 at 2:02 am
Copy link
@thamilkman No… it’s not limited to those fonts—though the original designer used those exact fonts, so it’s the intended look-and-feel of the theme.

Using other fonts *should* be a matter of adding them in Typekit, using the Page Elements or Selectors menus in Typekit to select the elements you want to style with that font, then clicking Publish.

The nice thing about using Chunk and Junction is that you can skip the Page Elements / Selectors step since the stylesheet already has the font-family definition in place for those two.
prilandtechnology · Member · May 27, 2010 at 6:56 am
Copy link
Hi Lance,

The Paperpunch design clean and nice… and the font embed with perfects.

Well Done.
letsnotnsaywedid · Member · Jun 1, 2010 at 11:40 pm
Copy link
paperpunch isnt working on any other fonts except the two “suggestions” for me
lance · Member · Jun 2, 2010 at 12:01 am
Copy link
@letsnotnsaywedid

Looks like in your Typekit settings you don’t have a specific enough selector, so the one in the theme stylesheet is still being used.

You are using h1 and you’ll instead need to try something more specific: h1#title and div#title to override the current font-family selector.

The selectors for the body titles are much more complicated. See the stylesheet and look for Chunk and Junction: http://svn.automattic.com/wpcom-themes/paperpunch/stylesheets/master.css to see how it’s being used currently.
letsnotnsaywedid · Member · Jun 2, 2010 at 1:32 pm
Copy link
hey lance, thanks for the advice on the selectors! much appreciated. cheers.

No items found.