How to use Google Fonts on your website
Google fonts has really made it easy for developers to find 100′s of free fonts to use on their websites, and the best part is all these fonts are free and can be easy setup to show on any website, with a few easy steps.
Find a link to Google Fonts here
Once you have found the font you are looking for, you can either “add to collection”, which makes the font available for download so you can use it in your photoshop design, or you can go to “quick use”, which gives you the lines of code you need to insert into you html. I chose the font “Iceland”.
Take the line of code
<link href='http://fonts.googleapis.com/css?family=Iceland' rel='stylesheet' type='text/css'>
and link it in your head as you would normally with any style sheet.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>How to use Google Fonts</title> <link href='http://fonts.googleapis.com/css?family=Iceland' rel='stylesheet' type='text/css'> </head> <body> </body> </html>
After you have done this you just add the font-family in your css. You can once again just copy paste the code from Google Fonts in the quick use section!
h1 {font-family: 'Iceland', cursive;}
And as easy as this seems, it is even easier to do! There are some really amazing fonts out there to give your website a unique feel, so take a look and give them a try!
(1 votes, average: 5.00 out of 5)
Loading ...
I like to use Google fonts as well, but I use the WP Google Fonts plugin http://wordpress.org/extend/plugins/wp-google-fonts/
I love your site. It is clean, easy to navigate and easy on the eyes! Well done!
Thanks so much Maryke! I like to do the coding by hand, but I guess a plugin can get the job done