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.
Leave a Reply
Social Networks
this was a huge help for me! Thank you! the only part I can’t figure out is how to change the fonts for the title of my blog and all the sub titles in the sidebars (archives, search etc)
Thanks!. Try “h1″ for title of your blog and “li” for other title in the sidebar.
thank you soooo much, this has been a great help for me
Karin
You are welcome!
Thank you! My mistake was adding “h3″ to the selector list, but not “.storytitle”. Your post helped me out.
Really, I didn’t know there’s “.storytitle” what does this one corresponce to?
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…
Awesome! Thanks!
Thanks, this helped a ton!
As everybody has said : Thank youuuuuuuu….
Thank you so very much for this! You’ve been a great help! Do you mind another question?
I’ve selected the “M+1″ font, which has a good selection of weights. How do I select these alternate weights when drafting a post?
Thanks!
Not at all.
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.
Thank you Stephen, for your quick reply and your generosity!
Thanks, this really helped, but I have another question. How do you choose the weight you want to use in your text?
Ow, I just read the previous post, haha
sorry!
Found a good discussion on that topic here at Typekit Forum.
That’s an great resource! Thanks again!!!
Amiable fill someone in on and this post helped me alot in my college assignement. Thanks you for your information.
Hey great post, was very informative..
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..
Would you be able to help me with this?
Thank you in advance
Hi there,
That’s the fist impression I have when I get typekit to work for the first time. The font is just way to small on certain style… I have written a post to increase font size.
thanks again Stephen for the info, it’s great! I ended up switching to the Cutline theme and was able to teach myself CSS S change fonts/color and even the overall layout. Took a while but eventually I got the hang of it. I posted an overview on my blog with some tips too. http://urbanhodgepodge.wordpress.com/2010/02/13/csscan-someone-show-me/
Thank god there’s a great community so we can all learn from each other!
Thank you for this awesome guide! I followed your advice and used the FF Web Developer add-on and it’s working like a charm now. Good job!
Thank you
You’re welcome!
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
Everything is done through the “Typekit editor window”. What you need to do after choosing 2 font syle you like is to type in selector in the selector field in the “Typekit editor window”.
For starter just type in “p” and hit publish. see if that change it for your blog.
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
typekit is fun!
Where to find the RSS link?
Top right below search field?
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 again!
Changing background color might require you to pay for “CSS Upgrade” but for changing font color you can do
*font color=”#hex_number”* You_type_here */font*
this symbol * replaces > and <
I followed your instructions and IT WORKED! Thank you!
Glad to hear!
To think I almost gave up on typekit. Great instructions.
Thanks
“.title” doesn’t work for me
If you are not using the same theme (inove)… then it might be called something else… the selectors are different among themes…
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…
Dude! Legend!
What a nightmare trying to follow typekit help for a beginner, thanks heaps!!
Thanks, enjoy the font!
I am at the beginning of all this typekit stuff. This forum is giving me hope!
dude! thanx a lot! i has so frustated!! now everything is how i want!
Hi Stephen,
Thnx for the info….bmarked ur link in my blog for further reading, hope u don’t mind!
Cheers.
omggg
i’ve been looking for a post like this forever!!
thank you so much
this was very very helpful
THANK YOU SO MUCH!
You’ve already rec’d many thanks for this — so add mine to the pile!! Very much appreciated.
question…what extension do you add into the typekit editor to change the font of the post titles?
try “h1″ or “.title”
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?
GOT IT! To change your Blog Title/Header use
#header #title h1
all one selector, with space, I recommend just copying and pasting the above.
fresh theme or freshy theme ? I tried to copy paste but didn’t work
Hey there.. I’m using the same WordPress Theme as you are (NeoEase).. any idea what the selector is for the Title – as in ‘Getook Blog’?
This theme isn’t perfect. I got it to work most of it in homepage but when you go into individual post, the typekit font of my header and post title revert back to original font…
Anyway… try .title and #header
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”
I hope this helps.
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.
Oh yeah, for some reason this is only in Firefox. IE looks ok. Weird!
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.
Thanks a lot!
Thank youu , that was very helpful
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.
Thanks again,
Omar
cervezaplease.wordpress.com
Somehow, I can’t make this work. I’m using the Twenty Ten theme at resolutus.wordpress.com.
The snippet Typekit directs you to place in the portion. Where do I access this? The only place I saw such a thing was in the CSS editing window.
Many thanks in advance.
what if after i put in the typekit ID and confirm its live on the blog, there is not typekit editor to be found anywhere? help!
nnnn… i don’t understand T______T it doesn’t work…
really Useful, Thanks !
I followed all your instructions but it won’t work.BTW I’m using the Greyzed theme.Does that mean I have to use different selectors? http://www.writetobringlight.wordpress.com
when I try to add ‘p’ according to your instruction, it does not get added oh!
help me! :’(
Thank yo so much! This was a great help!
Thank you! I was frustrated with trying to figure out how to change fonts on my wordpress blog. This was so helpful!
Thanks for the help and the Q&A.
Works just so, glad I didn’t pay for it.
*pulling my hair out* Ok, I have done EXACTLY what you said and still nothing has happened.
I have tried everything and nothing is working.
Theme; Neutra by Artmov
Got my Typekit code embedded into my dashboard- went to typekit editor, got a free trial. Picked two fonts.
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!
this help just made my day! Thanks!
Thank you very much for your tips
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!
hey! I found it – thanks anyway!
works great! although having trouble with the itsy-bitsy font..but thanks alot!
so usefull. Thank you very much… i was so irritated with type kit fonts..it was a little doubt full
even though i’m not using typekit anymore, your blog has been a great help and i’ve passed it along to help someone else
thanks again!
I am using the theme ‘Bueno’ and I cannot get the title to change… Any thoughts???
Very Helpful. It worked! Thank You very much…
OH MY GOD! Since I’ve been using WordPress I tried to figure out how to do it. And now you make it seem so simple, and make me feel like a stupid.
SO, THX A LOT!!!!