Mock Up Your Designs with Google Fonts

Looking for fonts that will spice up your website or design? Have you tried Google Web Fonts? Google Web Fonts lets you browse all the fonts available via the Google Web Fonts API. All fonts in the directory are available for use on your website or designs under an open source license.

Here is a snappy guide to using Google Web Fonts either for your website or for corporate designs.

USING GOOGLE WEB FONTS FOR YOUR WEBSITE
Goto Google Web Fonts and select the font you like. For example I want to use this font "Pacifico by Vernon Adams" on my website. Click on the font this will open the specimen of the font (see screenshot below)



click on Use this font.

Now follow the instruction given below to embed the font on your website.

1. Copy the first snippet and paste it below the tag on your webpage using your favourite webpage editor, or you can even use notepad to do this if you are an advanced web designer.

2. Paste the code below under the tag

<title>Mock Up Your Website with GOogle Fonts</title>
<style type="text/css">
<!--
body,td,th {
font-size: 36px;
}
.myfonttext { font-family: 'Pacifico', arial, serif;
}
-->
</style></head>


Make sure you change the .myfonttext to your new css class name or better still you can leave it that way if you don't know how to manipulate it.

3. Select any text in your webpage and reference the CSS class to .myfonttext. Below is the code for that

<div class="myfonttext">How to Use Google Fonts</div>

save your web page and preview it.









HOW TO USE GOOGLE FONTS FOR YOUR DESIGNS
This part covers the process of downloading and installing Google Fonts on your Computer.

First of all, you need to goto Google Fonts and Download the Font of your choice. After downloading it in the zip format. Extract it and then copy the font itself to your clipboard >> then goto Control Panel >> Open Fonts and finally paste it. Then font will now be visible for you to use when designing.

See screenshots

Remember! Good design conveys information and communicates ideas. Poor design impairs this communication by getting

Read More!