HTML/CSS Help

Hey everyone! 

I'm hoping that I can get a little help with my blog from the community. 

As you can see, I've changed a few things. I now have a clean, white background, updated my picture and about me, and added the pages nav bar under the header. 

Here's my problem: the pages at the top are the blog's font. 

I created cute buttons on picmonkey and uploaded them to photobucket so I have the direct and html links.

Here are two of them:

I'd love for those to replace what is currently there right now. All of my Googling is leaving me very frustrated and empty-handed. Do any of you know what to do? 

I am proud of myself for what I've done so far (centering the page tabs and the borders, creating the images, etc.), but I think these images linking to the pages would add so much more to my blog. I'm so annoyed I can't figure it out on my own!

Please let me know what you think! If it's a huge ask I will compensate you for your efforts. 

Thank you!!!

[Editor's Note: I FINALLY got it!!! I started with this tutorial and then figured out the rest with trial and error. Here's a hint if you try to figure this out for yourself: if the images don't link correctly, just go to: Layout > Edit your html gadget > Click on "Rich Text" to view the images > click on the image > click the hyperlink button > link to the correct page]

Voila!