If you have a WordPress blog, or any HTML website you might like to use different fonts for headings, or some titles. By editing your WordPress theme main style CSS file, it is easy to make that change.
There are two ways to do that.
1. You can give the full url font address to Google Fonts
2. Or you can embed the font into your theme
Using Google Fonts:
You may have your body font Verdana and can use different font in the page title.
font-family: Verdana, Georgia, serif; font-size: 100%; color: #000000;
font-family: ‘Skranji’, cursive;
color: #0E6981; font-weight: bold;
text-shadow: 1px 1px -2px #EAFEFC; font-size: 120%; padding: 2px; latter-spacing: 2px; line-height: 1.5em;
font-family: ‘Rye’, cursive;
color: #cc0000; font-weight: bold;
text-shadow: 1px 1px -2px #eee; font-size: 110%; latter-spacing: 2px;
Use this code in the <head> section of your theme when you are referring a Google Font:
<link href=’http://fonts.googleapis.com/css?family=Skranji’ rel=’stylesheet’ type=’text/css’>
<link href=’http://fonts.googleapis.com/css?family=Rye’ rel=’stylesheet’ type=’text/css’>
Alternatively this also works:
You may use @import method but then browser will wait for the imported file to finish downloading before it starts downloading the rest of the content. So I would not recommend this method if you care about your site’s speed and page load time.
Embedding the font in a WordPress theme
CSS part for “Spirax” cursive font:
font-family: ‘Spirax’, cursive;
src:url(‘/http://www.yourwebsite.com/wp-content/themes/shadows/font/Sprirax.ttf’) format (“truetype”);
font-weight: 400; }
Make sure your ttf font is inside the current theme you are using. For example a path could be like this:
<link rel=”stylesheet” type=”text/css” href=”http://www.yourwebsite.com/wp-content/themes/shadows/style.css” />
My personal choice is the first method just simply referring Google Fonts.
Google offers as today’s date 521 font families to choose from, that is more than enough to pick a desired font for your website.