Typography Resources

You must have already seen many websites with fancy fonts and advanced CSS text effects. Web Fonts and Web Typography has totally evolved in last 2 years. Using Web Typography now you don’t need to have images for “cool” text effects and it has replaced heavy designs. Now you just need to code a little for a beautiful text line rather than creating its image on Photoshop. And with Web Fonts libraries, using typographies by designers and developers has been made even easier. In this article I will share few good Web Fonts Directory and links to Typography resources.

Finding Web Fonts

With Web Font libraries it has become very easier for designers and developers to find opensource fonts and use them in their websites. There are many good websites to find Web Fonts, I am including “Free” in parenthesis for sites which provide opensource fonts. Some of them are:

Google Web Fonts (Free)

Google Web Fonts

Adobe Web Fonts

Adobe Web Fonts

Open Font Library (Free)

Open Font Library - Open Font Library


Open Font Library - Typekit


WebINK Web Fonts

Font Squirrel (Free)

Font Squirrel   Handpicked free fonts for graphic designers with commercial-use licenses.

Fonts Live

Fonts Live - Expertly Crafted Web Fonts from Monotype Imaging


Fontdeck web fonts  Real fonts for your website

Fonts.com Web Fonts

Fonts.com Web Fonts


Desktop and  font-face fonts   Fontspring

exljbris Font Foundry (Free)

exljbris Font Foundry



CSS3 Text Effects

There are already many tutorials written for various kinds of advanced CSSTtext Effects, you can visit here to see a list of 22 Advanced CSS Text Effects. Please be careful that these text effects might not be compatible with all web browsers. Though all web browsers support typographies very efficiently, and the WOFF is supported by all the major web browsers lately(Firefox 3.6 and later, Google Chrome 6.0 and later, Opera 11.10 and later and Internet Explorer 9).

Further Reading: There is a great article on Steven Snell’s Blog for Web Typography resources, dont forget to read it here.

Best .htaccess Hacks For Websites

The .htaccess configuration file on your server which controls Apache Server is an important file and a very powerful tool for your website if used properly. It is generally found in root of your web server. In this article I will share how .htaccess can help improve your website’s  stability, security, functionality and usability.

Please backup your .htaccess file before doing any changes. In case anything goes unexpected just replace the .htaccess with your backup.

Search Engine Friendly 301 Redirects

If you have moved your website to another domain and want to redirect all the pages to their new location or you want to redirect a particular URL to a specific page in most Search Engine Friendly manner then you can use the below code in your .htaccess.

## .htaccess Code :: BEGIN
Redirect 301 /Old_Directory/ http://www.new-domain.com/
## .htaccess Code :: END

Note: Remember not to insert “http://www” to the “/Old_Directory/”.

Block Requests From User Agents

By adding a ban list to your .htaccess file you can block all unwanted user agents. These agents at times are harmful and can can cause load on your server.

## .htaccess Code :: BEGIN
## Block Bad Bots by user-Agent
SetEnvIfNoCase user-Agent ^FrontPage [NC,OR]
SetEnvIfNoCase user-Agent ^Java.* [NC,OR]
SetEnvIfNoCase user-Agent ^Microsoft.URL [NC,OR]
SetEnvIfNoCase user-Agent ^MSFrontPage [NC,OR]
SetEnvIfNoCase user-Agent ^Offline.Explorer [NC,OR]
SetEnvIfNoCase user-Agent ^[Ww]eb[Bb]andit [NC,OR]
SetEnvIfNoCase user-Agent ^Zeus [NC]

Order Allow,Deny
Allow from all
Deny from env=bad_bot
## .htaccess Code :: END

Remove WWW from your website’s URL

If you wish to remove the “www” from your website’s URL, like http://your-domain.com instead of http://www.your-domain.com, then you can use the below code.

## .htaccess Code :: BEGIN
RewriteEngine on
Options +FollowSymLinks
RewriteCond %{HTTP_HOST} ^www\.your-domain\.com$ [NC]
RewriteRule ^(.*)$ http://your-domain.com/$1 R=301,NC]
## .htaccess Code :: END

Add WWW to your website’s URL

If you wish to add “www” your website URL, you can add the below code.

## .htaccess Code :: BEGIN
RewriteEngine On
Options +FollowSymLinks
RewriteCond %{HTTP_HOST} ^your-domain.com [NC]
RewriteRule ^(.*)$ http://www.your-domain.com/$1 [L,R=301]
## .htaccess Code :: END

Allow only specific IP addresses and block everyone else

If you want to allow only few particular IPs and deny everyone else then you can use the below code in your .htaccess file. Replace “http://www.your-domain.com/under_construction.html” with the error page which you will like to be displayed to everyone(except the particulars IPs) or you can simply omit the line if you don’t need it.

## .htaccess Code :: BEGIN
ErrorDocument 403 http://www.your-domain.com/under_construction.html
Order deny,allow
Deny from all
Allow from
Allow from
## .htaccess Code :: END

Ban only specific IP addresses and allow everyone else

If you think there are spammers regularly flooding your website you can simply ban their IP addresses to get rid of them and allow everyone else.

## .htaccess Code :: BEGIN
allow from all
deny from
deny from
## .htaccess Code :: END

Custom Error Pages

You must have already seen many custom 404 error pages, you can use the below code for error pages for 404 errors and other errors too.

## .htaccess Code :: BEGIN
ErrorDocument 401 /error/401.html
ErrorDocument 403 /error/403.html
ErrorDocument 404 /error/404.html
ErrorDocument 500 /error/500.html
## .htaccess Code :: END

Change Index Page

The default page of a regular server is either an index.html or index.php, you can use the below code to change it.

## .htaccess Code :: BEGIN
DirectoryIndex index2.html
## .htaccess Code :: END

Remove Extensions from Files

The below code removes extension in a URL, this make it the URL more Search Engine Friendly. Example: http://www.your-domain.com/about.php will be http://www.your-domain.com/about. You can replace .php with .html or whatever you want.

## .htaccess Code :: BEGIN
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.+)$ /$1.php [L,QSA]
## .htaccess Code :: END

Disable Directory Browsing

You can block users from viewing directories without an index page using the below code.

## .htaccess Code :: BEGIN
Options All -Indexes
## .htaccess Code :: END

Disable Browser To Prompt Open/Save As Option

Usually when you try to download something you generally get asked whether to Save it or Open it. To disable this from server side, you can use the following code:

## .htaccess Code :: BEGIN
AddType application/octet-stream .mp3
AddType application/octet-stream .mpg
AddType application/octet-stream .avi
AddType application/octet-stream .mov
AddType application/octet-stream .pdf
AddType application/octet-stream .xls
AddType application/octet-stream .zip
## .htaccess Code :: END

Change Script Execution Type

If you have php within an html file, you can still execute it as php using the below code.

## .htaccess Code :: BEGIN
AddType application/x-httpd-php .html
## .htaccess Code :: END

Stop Execution of Script

If you want, you can stop scripts like php, asp, etc from executing and simply display them as plain text.

## .htaccess Code :: BEGIN
RemoveHandler cgi-script .php .asp .html
AddType text/plain .php .asp .html
## .htaccess Code :: END

Set Default Admin Email ID

Using below code you can set the default Email ID of your server.

## .htaccess Code :: BEGIN
ServerSignature EMail
SetEnv SERVER_ADMIN [email protected]
## .htaccess Code :: END

Disable Hotlinking

Using this disable users from using images hosted on your server in their website, this helps in saving bandwidth. You can do this by adding the below code, replace “http://your-domain.com/copyright.jpg” with the image which you will like to be displayed instead.

## .htaccess Code :: BEGIN
Options +FollowSymlinks
#Protect against hotlinking
RewriteEngine On
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www.)?your-domain.com/ [nc]
RewriteRule .*.(gif|jpg|png)$ http://your-domain.com/copyright.jpg[nc]
## .htaccess Code :: END

Enable Caching

The below code will tell the web browser to use cache instead when your website is loaded. It doesn’t directly increase the loading speed of your website, it will basically loads the cached content when the user visits your website second time. Currently the cache expiry time is set to 1 day(86400 seconds).

## .htaccess Code :: BEGIN
ExpiresActive On
ExpiresDefault "access plus 86400 seconds"
ExpiresByType text/css "access plus 1 week"
ExpiresByType text/plain "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 week"
ExpiresByType application/x-icon "access plus 1 year"
## .htaccess Code :: END

Blogging Tips for Better Search Engine Rankings

Despite of many articles on SEO for Blogs, I am writing this one because most of them need professional SEO techniques and good amount of time. Here I will be sharing few simple tips which can increase your Blog Post’s Search Engine Visibility and can be implemented while writing posts.


Keywords are an important aspect for Search Engine Optimization, keywords are what we input when we search on web, picking up the correct keywords thus helps a lot in increasing your Blog Post’s Search Engine Rankings.

Selecting Keywords
When you are starting with your post, it is recommended to include keywords relevant to your post and which are more popular. You can use Google trends for checking popularity of the keywords, and then include the most popular and relevant keywords into your post. Inserting more popular keywords basically means that they are searched more, and hence chances of you getting Search Engine traffic also increases.

Inserting Them
Make sure all the keywords are relevant to your article and it is recommended to have one keyword per line, too much of keyword density or too similar keywords will only help you score negatively. It is also highly recommended to insert the keywords in the post title and subtitles(Between header tags) and you should time to time bold, italicize and underline keywords in between the paragraphs to emphasize them when Search Engine bots crawls your article.


Linking is also a very important aspect of Search Engine Optimization for Blogs, there are many long link building techniques and methods which give good results.

Interlinking for your Blog posts means that linking keywords or words of your article to other posts of your Blog. Below are two more good ways of interlinking.

Recent Posts Or Further Reading
You can also include a “Recent Posts” Or “Further Reading” section in footer of your post which will simply display related posts to your current post, this will alsoincrease usefulness of your article, like if your reader wants to learn more about that particular topic he/she can simply browse those links. If you are onWordPress, you can use WordPress Related Posts Plugin for inserting automated Related Posts rather than doing it manually.

Its also advisable to have breadcrumbs in header of your posts or pages, breadcrumbs are navigational links which tells the location of your article,
like “Category>> Subcategory>> Article“,
Example: “Blogging Tips>> Making Money>> Choosing Advertising Platforms”. If you are on WordPress you can use Breadcrumb NavXT, it is a great plugins and produces breadcrumbs very efficiently.

I hope these few points helps you with Search Engine ranking for your articles.


Benefits of Using Own Domain Email on Google Apps Gmail

Your Email ID is a valuable marketing tool for you, and Email ID of your own domain tells that you have an online presence, where people can find you, etc. Its also a tool to promote your company, as you are promoting your domain by that. Your Email ID will promote your domain rather than Gmail or Yahoo. You can even see here why to go for own domain Email ID. ;-) You can have own domain Email ID using your hosting company’s web mail or buy Email space at some hosting company. But according to me, Google Apps Gmail is provides the best own domain email solutions, and above all, its free(Standard package). Below are few of the many reasons why you should use Google Apps Gmail for your Email purposes.


Our web servers keep experiencing downs and crashes, and it is a pain when you are on a shared server or low-memory VPS. Imagine you were using your hosting company’s web mail, and had to receive an important email that time when your website/server was down. It will simply bounce. By using Google Apps Gmail you overcome this, as when you use Google Apps all the associated data will be stored on Google Data centers which runs your Email services effortlessly and gives 99.9% uptime.


Domain users can share their calendar from any computer, see when people are available, send invitations, manage RSVPs, do real time editing on documents, spreadsheets & presentations. Also access Instant Messaging (IM)(Using Gtalk) from any computer.


If you have a small dedicated or VPS Hosting, then you probably get small amount of hard drive space, and Email particularly takes a lot of space especially if you have many users. Going with Google Apps Email helps here again, as it provides at least 7 GB of storage on Email accounts and this also increases your server’s efficiency as the load is not on your server for the Email services.


Your SMTP server might get flooded with Spam or SQL hacks might steal credentials of your users. You overcome these also because of Google Apps. You can even disable the email server that came with your hosting account, that is the IMAP/POP3 server and the SMTP. This saves memory too.


There are many more reasons for you to go with Google Apps Gmail, but if you need customized Email service for your company, like custom layout and branding on your users mailboxes then Google Apps Gmail might not be a great option as it isn’t really very flexible. If you need to use for personal purposes or branding doesnt matters, then Google Apps it is! Even if you have a huge organization you can still go with Google Apps as they have multiple editions to suit your needs, plus you get all the Google Apps benefits.

Sending HTML Emails using your Web-based Email account | Gmail | Yahoo | Hotmail

Yes, you can send your custom made HTML Email using your Web-based Email account account like Gmail, Yahoo, Hotmail, etc. Many people think HTML can only be send using Email Clients like Outlook or Thunderbird, etc. To send an HTML using your Web-based Email account, you need to do make a valid HTML Email Template first, like with in-line CSS, using Tables, absolute paths etc. Read here how to write an HTML Email. After you are done making it, upload it to your server or if you dont have one you can use a free web hosting service here or any other which you like. Make sure your HTML Email has absolute paths for everything, your readers are going to be at all different locations.

When done, open your Web-based Email account, click on Compose/New Mail, make sure you have Rich Formatting enabled. Also, open your HTML Email using your Web Browser. Select all on the HTML Email page using Ctrl+A(On Windows) Or Command-A(On Mac) and then paste it on your Rich Text Editor(where you are writing the Email) using Ctrl+V(On Windows) or Command-V(On Mac). Send it. Thats its. So easy to do.

Make sure HTML Email is properly formatted, be careful with it. CSS rules vary for Web-based emails, also it is not necessary that the receivers Email Client has HTML support it, it will go as plain text in that case, and if they are not web code friendly, they might just delete it in one go thinking it as some spam. Thus, you should give the receiver the opportunity to choose between HTML Email or plain text. Also if it is a commercial Email, make sure it follows CAN-SPAM Act of 2003.

Using Website Templates: Free vs Premium

Often Web Designers try to provide quick web design services to clients and for a low price to live up the competition. It is recommended in this case to use website templates to save time as well work within the client’s budget. There are ample of templates available for websites online, these templates are free as well as paid(premium). Templates can vary from client to client according to their website specifications/requirements. It is a myth that paid templates are better than free ones. While it is not always true.

Free Templates

In a free Website template you get a well put up website layout, with good CSS and minimal codes. Free Website Templates might not be heavy on JavaScript like jQuery plugins, or at times dont even include a simple image slider or any JavaScript at all. But this doesnt makes it an unfavorable option. You can add jQuery plugins like prettyPhoto for image galleries/lightboxes and you can use Google Web Fonts for typographies. These small customizations take your Free Template to Premium Template standards and are very easy to be implemented on your Template. You can customize these templates to a large extent and change the glance of the template according to your creativity. This would be an example of free website templates site, there are many more, may be many better ones too. But I personally like this one because, the website templates here are clean, well laid out and not messed up, that is minimal. It gives the web designer a good opportunity to work, and be artistic. Thats why for me free templates work as good as paid templates. Though be careful when using these templates, they at times have Copyright/Licensing restrictions.

Premium Templates

Premium Templates are like a ready made websites, most of them already have required scripts like JavaScript for Image Galleries, etc in place, where you just need to edit or add little HTML, they even have the best suited typographies already in them. Some of them have PHP forms also in place for Contact Pages. If time is an important element of your website, then you should go with Premium Templates as they generally require lesser customization, everything is styled in best possible manner with best possible appearance of the website and they have all functionalities needed by a standard website, most of them even provide support too which can help you if you are stuck somewhere. Customizing Premium Templates like changing color scheme, design, background etc is not difficult, they usually have PSDs included in them and at times come with various layout options and color schemes.

Going with Templates

Templates might be an easy way out, good in appearance, saves time, etc, but this doesn’t makes them the best option. Thousands of websites are made everyday, but good Templates are not that many. What happens generally is that those few templates gets used again and again in many websites, which takes away the exclusive feeling of your website. At times the client even mention not to use Templates at all, and fooling them is completely unethical. To overcome these, you should customizing the Template as much as you can, remember over customizing will just end you up in an ugly website. Just make sure your website stands apart in the crowd.


All in all, both the types of templates are good. Free templates just require little more of work than premium templates. Premium Website Templates are like completely cooked dish, and in Free Templates you need to cook little more at times, but you save $ also. In Premium Templates, you generally just need to fit content into it, style a little, and done. Also, if you want to show your real creative and artistic skills, then you can drop the template idea, and can create the whole website yourself, or just borrow a framework layout from your WYSIWYG editor like Dreamweaver.

UPDATE: Check out my free website template Elegant Press at https://priteshgupta.com/templates/elegant-press/.