Figuring out HTML and CSS on your blog is never easy. Especially for the newbie blogger out there. Luckily, there are a lot of sites and blog posts out there like this one that can help you out. For this blog post, I was inspired because it took me forever to revamp my site recently. 

I kept trying to figure out where in my HTML my main body text code was and why it would not work when I kept trying to change the code. After searching deeply through the internet, I found a solution and thought I would share some font options with you as well as HTML to help with fonts when it comes to your website.

Web-safe fonts are important because they appear the same across all different operating systems. So, for the best chance of your website looking the same no matter where your readers are in the world picking a safe font is key!

Here are some common font names and what they look like:

  • Arial
  • Arial narrow
  • Courier
  • Domine
  • Georgia
  • Times New Roman "Use the word Times for HTML"
  • Helvetica
  • Verdana
  • Lato
  • Raleway
  • Lora
  • Prompt
  • Lucida Console
  • Tahoma
  • Telex
  • Viga
  • Poppins
  • American Typewriter
  • Serif
  • Comic Sans
  • Impact
  • Arial Black
  • Gill Sans
  • Trebuchet MS
  • Avanta Garde
  • Bodoni MT
  • Big Caslon
  • Rockwell
  • Andale Mono
  • Chalkduster
  • Copperplate
  • papyrus
  • Trattatello
  • Luminari
  • Microsoft Sans Serif
  • Futura
  • Brush Script MT

Styles
font-style: normalHello…Hello…
font-style: italicHello…Hello…
font-style: obliqueHello…Hello…
Variants
font-variant: normalHello…Hello…
font-variant: small-capsHello…Hello…

Take this code for font-families provided and put it in your body of your layout and add it to your Custom CSS:




What fonts are your favorite from above? I hope this post helps out when it comes to your blog or blogging in general. HTML can be tricky!

xoxo,