Home > How-To > TypeKit Guide – Change your Fonts

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.

About these ads
  1. January 17, 2010 at 9:33 am | #1

    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)

    • January 17, 2010 at 6:27 pm | #2

      Thanks!. Try “h1″ for title of your blog and “li” for other title in the sidebar.

  2. Karin
    January 20, 2010 at 3:34 pm | #3

    thank you soooo much, this has been a great help for me :-)

    Karin

  3. January 22, 2010 at 9:21 am | #5

    Thank you! My mistake was adding “h3″ to the selector list, but not “.storytitle”. Your post helped me out.

    • January 22, 2010 at 1:12 pm | #6

      Really, I didn’t know there’s “.storytitle” what does this one corresponce to?

  4. T3CK
    January 23, 2010 at 3:48 pm | #7

    Thank you for taking the time to write this tutorial up your tutorial has tremendously helped me… :D 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. :)

    • January 27, 2010 at 1:09 pm | #8

      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…

  5. birdonaline
    January 29, 2010 at 12:19 pm | #9

    Awesome! Thanks! :)

  6. January 29, 2010 at 11:20 pm | #10

    Thanks, this helped a ton!

  7. January 30, 2010 at 12:39 pm | #11

    As everybody has said : Thank youuuuuuuu….

  8. January 31, 2010 at 5:46 pm | #12

    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!

    • January 31, 2010 at 10:41 pm | #13

      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.

  9. February 1, 2010 at 4:33 am | #14

    Thank you Stephen, for your quick reply and your generosity!

  10. Tamara
    February 3, 2010 at 5:55 am | #15

    Thanks, this really helped, but I have another question. How do you choose the weight you want to use in your text?

  11. Tamara
    February 3, 2010 at 5:55 am | #16

    Ow, I just read the previous post, haha
    sorry!

  12. WP Themes
    February 12, 2010 at 12:22 pm | #19

    Amiable fill someone in on and this post helped me alot in my college assignement. Thanks you for your information.

  13. A
    February 16, 2010 at 1:41 am | #20

    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

    • February 16, 2010 at 8:46 am | #21

      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.

    • February 17, 2010 at 10:33 am | #22

      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!

  14. Me
    February 17, 2010 at 12:56 pm | #23

    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!

  15. February 17, 2010 at 7:54 pm | #24

    Thank you :)

  16. March 2, 2010 at 9:01 pm | #25

    You’re welcome!

  17. March 4, 2010 at 12:06 pm | #26

    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

    • March 4, 2010 at 1:18 pm | #27

      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.

  18. March 4, 2010 at 3:28 pm | #28

    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

  19. March 6, 2010 at 2:04 am | #29

    typekit is fun!

  20. Wahrsagen
    March 8, 2010 at 1:34 am | #30

    Where to find the RSS link?

  21. Jacqueline
    March 8, 2010 at 6:45 pm | #32

    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!

    • March 8, 2010 at 9:25 pm | #33

      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 <

  22. hisearthgirl
    March 12, 2010 at 9:58 am | #34

    I followed your instructions and IT WORKED! Thank you!

  23. March 12, 2010 at 10:12 pm | #36

    To think I almost gave up on typekit. Great instructions.

    Thanks

  24. March 13, 2010 at 11:28 am | #37

    “.title” doesn’t work for me

    • March 14, 2010 at 10:01 am | #38

      If you are not using the same theme (inove)… then it might be called something else… the selectors are different among themes…

  25. March 16, 2010 at 10:43 pm | #39

    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…

  26. March 17, 2010 at 5:44 am | #40

    Dude! Legend!
    What a nightmare trying to follow typekit help for a beginner, thanks heaps!!

  27. Dena
    March 23, 2010 at 12:07 pm | #42

    I am at the beginning of all this typekit stuff. This forum is giving me hope!

  28. March 27, 2010 at 6:24 pm | #43

    dude! thanx a lot! i has so frustated!! now everything is how i want!

  29. April 3, 2010 at 3:52 am | #44

    Hi Stephen,

    Thnx for the info….bmarked ur link in my blog for further reading, hope u don’t mind!

    Cheers.

  30. April 14, 2010 at 4:34 am | #45

    omggg
    i’ve been looking for a post like this forever!!
    thank you so much
    this was very very helpful :)

  31. April 20, 2010 at 8:24 am | #46

    THANK YOU SO MUCH!

  32. April 24, 2010 at 3:13 pm | #47

    You’ve already rec’d many thanks for this — so add mine to the pile!! Very much appreciated.

  33. April 26, 2010 at 7:23 pm | #48

    question…what extension do you add into the typekit editor to change the font of the post titles?

  34. jadeylangley
    April 28, 2010 at 1:24 pm | #50

    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?

  35. jadeylangley
    April 29, 2010 at 5:22 am | #51

    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.

  36. tanksalot
    May 4, 2010 at 1:34 am | #53

    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’?

    • May 4, 2010 at 5:52 am | #54

      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

      • tanksalot
        May 4, 2010 at 4:14 pm | #55

        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…

  37. josnz
    May 8, 2010 at 5:59 am | #56

    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.

  38. amact
    May 16, 2010 at 12:58 pm | #57

    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.

  39. amact
    May 16, 2010 at 12:59 pm | #58

    Oh yeah, for some reason this is only in Firefox. IE looks ok. Weird!

  40. May 26, 2010 at 1:49 pm | #59

    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!

  41. May 27, 2010 at 5:32 pm | #60

    Thank youu , that was very helpful

  42. June 14, 2010 at 11:25 pm | #61

    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

  43. resolutus
    June 23, 2010 at 1:03 pm | #62

    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.

  44. Michelle Young
    June 28, 2010 at 10:15 am | #63

    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!

  45. August 6, 2010 at 11:54 am | #64

    nnnn… i don’t understand T______T it doesn’t work…

  46. August 17, 2010 at 2:08 am | #65

    really Useful, Thanks !

  47. September 30, 2010 at 9:44 pm | #66

    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

  48. anuja khadka
    October 2, 2010 at 4:56 am | #67

    when I try to add ‘p’ according to your instruction, it does not get added oh! :( help me! :’(

  49. October 3, 2010 at 6:00 am | #68

    Thank yo so much! This was a great help!

  50. October 13, 2010 at 9:12 pm | #69

    Thank you! I was frustrated with trying to figure out how to change fonts on my wordpress blog. This was so helpful!

  51. October 19, 2010 at 6:28 pm | #70

    Thanks for the help and the Q&A.
    Works just so, glad I didn’t pay for it.

  52. October 20, 2010 at 10:22 am | #71

    *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

  53. November 18, 2010 at 5:53 am | #72

    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!

  54. December 12, 2010 at 5:07 am | #73

    this help just made my day! Thanks!

  55. January 6, 2011 at 10:09 pm | #74

    Thank you very much for your tips

  56. January 17, 2011 at 6:56 am | #75

    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!

  57. ati_minmiin
    February 3, 2011 at 6:31 am | #77

    works great! although having trouble with the itsy-bitsy font..but thanks alot! :)

  58. February 8, 2011 at 7:54 pm | #78

    so usefull. Thank you very much… i was so irritated with type kit fonts..it was a little doubt full

  59. February 14, 2011 at 9:17 pm | #79

    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 :D thanks again!

  60. February 23, 2011 at 9:17 am | #80

    I am using the theme ‘Bueno’ and I cannot get the title to change… Any thoughts???

  61. April 9, 2011 at 6:01 am | #81

    Very Helpful. It worked! Thank You very much…

  62. April 22, 2011 at 5:09 am | #82

    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!!!!

  1. January 18, 2010 at 4:33 pm | #1
  2. January 27, 2010 at 8:34 pm | #2
  3. March 10, 2010 at 6:35 pm | #3
  4. April 2, 2010 at 2:29 am | #4
  5. April 15, 2010 at 11:52 am | #5
  6. May 3, 2010 at 6:43 pm | #6
  7. May 10, 2010 at 5:12 pm | #7
  8. August 15, 2010 at 12:47 am | #8
  9. October 6, 2010 at 8:01 am | #9

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: