TypeKit Guide – Change your Fonts

Getting TypeKit to work on your blog can be frustrating especially if you are not familiar with CSS. Here’s a simple guide of what I did to make it work without paying for wordpress CSS upgrade. First go to TypeKit and register for the Trial account which really should read free-without-time-limit. The Trial account allows you to pick only two type of fonts out of gazillions fonts that they have. That’s fine as I only need two different fonts, one for title and the other for paragraph. In TypeKit editor, select the font you want to apply to paragraph and type “p” without the quotation mark in the selector field hit Add and it will appear like so:

Select the other font and type “.title” if you want the selected font to be applied to the post’s title. Don’t forget to hit “Publish” which tells Typekit to execute the changes you made and apply fonts you have selected to your blog.

So in summary, really you can type in any element of CSS that is already taken place in your blog by default but you just need to know what the element is called. For a simple change to title and paragraph all you need to know is “p” and “.title” to be typed into Typekit selector field. Below is a screenshot of my blog. Number 2 is title and number 3 is paragraph and they both have different fonts. Number 1 is “element identifier” but you have to use Firefox and install “Web Developer” add-on.

The add-on pin point exactly the element’s name for title and paragraph. For everything else that has elements in the blog it will find them all just by clicking them.

Update1:
After playing around with different type of fonts, you’ll soon realize that their fonts are kind of small. This issue needs to be address and Typekit is aware of it. In the mean time here’s how to increase size.

Update2:
I give up trying to figure out how to increase the font size on the sidebar… so after 4 months with WordPress, I finally purchased the CSS custom upgrade. And now eveything is right with the world. I wished it was only one time payment… But no. it’s a subscription yearly.

Thank you for taking the time to write this tutorial up your tutorial has tremendously helped me…😀 In your tutorial you wrote that the basic commends are “.title” and “p” I found the “.title” works on some of the themes here @ WP.com but the newest theme MonoChrome doesn’t change font when I use “.title” so I did some research and found I needed to replace “.title” with “h2” now after inserting “h2” into typekit my headlines display the correct font.🙂

Indeed. They are called by many names. It’s a trial and error process for me to get the look that I like and it varies among different themes. Interesting find though. Makes me wonder what else can we throw at the selector field…

My understanding on alternate weight is that the font if used on bold or italic, it will still be that font style only in bold or italic… Some fonts style only have 1 weight and so when you use bold or italic it will NOT use that font style selected…

But if by any chance you only want to make your fonts more solid so easier to read, I recommend you do this. the color black is what makes it easier to read.

I am relatively new to CSS and I coupled Typekit and my CSS stylesheet together, to customise the fonts, but the font sizes are way too small.. Hence, even if I love the font, I cannot apply it to the body, since I dont know how to change the font size on my CSS stylesheet..

This is great but I STILL don’t see how to use Typekit on my terrydarc.wordpress.com
blog. I signed up and put in the kit code on my admin page. I see this Typekit editor up there atop this page but I sure don’t see how/where to get to it from my blog or do I even do that? Thx.
-td

Thanks, Stephen,
I’ve chosen the two fonts, gotten the Typekit code, entered that into my admin page on WordPress.com.

I’d gathered that everything was done through this “Typekit window” that I see the pictured here and there. I’ve also googled to see where Typekit editor might be. Is it started as a separate process that makes up the correct html that I cut and paste into my edit post window? Is it something that I start up from the post window. Where the heck IS the Typekit editor window?

I also see a bunch of stuff on the Wp forum about “selectors” and CSS and such which I certainly hope is unecessary.
-td

You are totally awesome! Thank you so much for this info. I would have never figured this out on my own.

One question, hope you don’t mind…
Do you know of a way to change the background and font colors without paying for the upgrade? I found all of the codes for the colors, but wordpress want’s to charge me.

Thank you so much I’m just starting a blog on wordpress and trying to change the fonts with the typekit instructions has been useless, not everyone out there is tech savvy and I’m so glad you can explain in English to the rest of us…

I use “Fresh” theme and was wondering if you knew what code would change the header title. And on an unrated note: I was considering buying the css upgrade to make the header bigger, is that a simple fix?

Hmm.. just can’t get it to work for the Blog Title.. tried every selector on the source page. Can get every other selector working fine. According to Firefox Developer tool it is simply ‘a’.. ah well.. I give up! Thanks anyway…

Thanks for your help. I downloaded the Web Developer tool you suggested, but found it more useful to display the Id and Class details eg, goto Information, and check Display ID & Class details. This puts little yellow tags around every element on the page and you can clearly see the class selector (preceded by a full stop (.)) and the ID selector (preceded by a hash (#)). I found it best not not mix in sizes as well – eg, don’t use h1, h2, just eneter the class or I.D. i think the problem is, is that because WordPress themes are written by different people that there aren’t standard names used. eg, in my WordPress theme the title was called “#site-title” and each post title was called “.entry-title”. Those are what I entered in, and it works perfectly now, and stays consistent even when I click on a post title to go to the post. And I only have the one domain name eg “myname.wordpress.com”

Enlightening! I now have everything looking smooooooth… except one thing! For some reason the link that says ‘Home’ is in Arial (the wrong typeface) even though all the others are in my desired typeface. I established that ‘.current_page_item’ changes it for when I am actually ON the home page, but when viewing any other page, the word ‘Home’ is wrong. I just cannot work out what the code is for this. Any help gratefully received!

PS. I agree with josnz that Display ID And Class Details is helpful in the Web Developer add-on.

Thank you for this helpul tutorial. I have only one problem. I am using the Inuit Types theme and the paragraphs are working perfectly but the titles I cannot change. I tried every command available in this tutorial and in comments and none seems to work. Would be very grateful if you could help me with this problem.

Stephen thank you for the post, it has helped me so much as I am a new user of wordpress.

I do have a question and if anyone can help me answer it, I thank you beforehand. I’ve managed to change the font on almost all of the blog, except the links below the widgets; I don’t know the abbreviation of/for the selector, and not sure if its even possible to change the font in that area of the widget. If you visit my blog, you will notice the two different fonts I’m using, and below the widget, the actual links default to the font for the theme.

Picked “Adobe Garamound”.. put in selector field “.title” without quotes.
Then picked Vera Sans, in selector field entered “pp without quotes.
I hit “publish” after both selections.
AND NOTHING HAS CHANGED!
What am I doing wrong?
Any advice? I have been working on this for 3 dayas now!Soler@hotmail.com

This was more helpful than anything else I’ve read and it worked immediately. Thanks so much for the help! Seems like a pretty simple fix…you should give this advice to typekit since they don’t seem to know how their product works with wordpress!

thanks, this is really helpful! I accidentally applied a font to a blog and now cannot find how to set it back to the default (the Edo font not work well as a heading for Wu Wei). I’m a WordPress/CSS/HTML newbie, so any help is greatly appreciated!