New web fonts from google

If anyone out there aside from me uses Google to render their fonts for their wordpress, good news, they have have released a ton of new fonts since the last time that I looked at them. I love any font that has a slash through the zero – 0 – because that is the way that I write my zeros anyway. There are a ton of new ones and they are easy to integrate into your wordpress blog. To look at the fonts go to – http://code.google.com/webfonts – and look at the available fonts and samples.  If you find one that you like click on “Use this font” and you will see some code down below.  The way google presents the font for use was convoluted to me.  I talked to a friend who does a lot more customization of wordpress than I do and he gave me a shorthand way to integrate the font into your theme.  Once you have the page open to “Use this font” copy the http://fonts.googleapis.com/css?family=FontNameAppearsHere then go to your wordpress control panel.  In the control panel go to appearance and then editor.  On the right you want to locate the “stylesheet.css” link that brings up the stylesheet for the theme you are working on.  Inside of that file you want to edit it as I have here using the @import url and the code copied from Google.  You put this info right below the header in the style.css file.  I used the /* Import from google fonts */ as a comment so I would know later what I had added so I would not forget.

/* Import from google fonts */
@import url(http://fonts.googleapis.com/css?family=Inconsolata);
@import url(http://fonts.googleapis.com/css?family=Lobster);
@import url(http://fonts.googleapis.com/css?family=IM+Fell+English);
@import url(http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light);
@import url(http://fonts.googleapis.com/css?family=Cantarell);
/* general styles */
body{margin: 0; padding: 0 0 100px 0; font: 14px ‘Inconsolata’, Arial,’Cantarell’, Helvetica, sans-serif;  background: #322F28 url(images/bg-body.jpg); text-align: center}

As you can see this code at the top of the stylesheet.css file.  The shorthand method of importing the fonts is a lot cleaner.  Importing the fonts is as easy as @import url(http://fonts.googleapis.com/css?family=FontNameAppearsHere).  To use the fonts I just added them into the “body{margin:…..” line.  Right now I am using Inconsolata.  I had to put the single quotes around it just like I did with any other Google font that I wanted to render.  The other fonts are all built in fonts.  I have found it is good to keep them in there because if something happens and Google pulls the font you are using or if something happens and they discontinue the font you have, there is something in there to fall back to.  When you are done editing click on Update file down at the bottom and refresh your main page in another browser window.  You can also adjust the size of the fonts as need be since some fonts display larger than others.  Inconsolata was much smaller than what I was using before and had to switch to a 14px for my body text as a 12 was much smaller than what I had before.  To keep from making a mistake I created a duplicate of the theme I was using so I would have original code to go back to – because I am a little paranoid about screwing up my site.  Anyway I hope that is helpful for anyone else wanting to do some wordpress customization.

This entry was posted in Ramblings. Bookmark the permalink.

Comments are closed.