10 Essential Firefox Addons Every Web Designer Should Know

It’s no secret that web designers and developers love Firefox! Firefox provides an endless amount of functionality that you simply won’t find in any other modern Internet browser.
One of the greatest aspects of Firefox is the ability to install add-ons to do just about anything and everything a browser can possibily do. As a web developer this functionality is extremely useful to us.

Firefox has some cool add-ons which make the job of website designers much easier. There are many useful add-ons for Firefox out there and we use several pretty much every day for work.

Since there are so many different add-ons available to download, it can be a little overwhelming to pick out which ones you should be using. I compile a list of the 25+ Essential Firefox Add-ons (along with brief descriptions) that every web designer should know about. Be sure and let me know if i missed anything!


01. Web Developer

The Web Developer Extension is a extension for the Firefox browser and it’s a great tool for web designers. It has a variety off essential tools that allow you to code quality websites and troubleshoot problems easily. It’s a powerful all in one plugin. Web Developer extension adds a menu and a toolbar to the browser with various web developer tools. The added benefit of having Web Developer Tool is the ability to edit CSS on the fly. If you want to try a different font, different size, different color, background, borders, margins, padding, practically anything to do with CSS, you can make the changes in the Web Developer tool and see the changes instantly. The Web Developer tool saves you time when playing around with CSS.


02. Firebug

Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. Firebug gives you full control over the CSS, HTML and JavaScript of any page that you choose. Inspect and edit HTML, Tweak CSS to perfection, Visualize CSS metrics, Monitor network activity, Debug and profile JavaScript, Quickly find errors, Explore the DOM, Execute JavaScript on the fly, Logging for JavaScript. Best of all, every change that you make is done live and instantly, so you can quickly test out different changes and see the results of those changes instantly.


03. Codetech

Codetech is another wonderful firefox extension which allows you to edit your documents right next to your web pages as you surf. This web page editing tool has the feel of Dreamweaver in a Firefox extension. For a web developer or designer, which offtenly deals with HTML source code, Codetch is a lite version of a application like Adobe Dreamweaver. It has a similar layout, yet less features, but it helps the user to complete its source based tasks.
Author description says it all. It’s the closest you can get to a professional web editing interface in a browser. Install it as an extension today and have a full featured editor right beside your web pages as you surf!


04. Colorzilla

An other one of my favorite Firefox extensions is ColorZilla indeed. ColorZilla add-on features an online eyedropper, which makes it quite simple to get the exact value of a specific color. With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. In addition to color picker, ColorZilla offers a DOM color analyzer which allows you to locate elements on the page that correspond to a given color and find out the CSS rules that specify a certain color. ColorZilla also features a online palette viewer that allows choosing colors from pre-defined color sets and saving the most used colors in custom palettes. With this beautiful extension you can Zoom the page you are viewing and measure distances between any two points on the page.s


05. FireShot

FireShot is an advanced screen capture add-on for Firefox. In addition to giving you the ability to capture an entire web page, FireShot also allows you to add add graphics and notes directly to your screen captures.

FireShot gives you several options for handling your screen captures. Not only can they be saved in a variety of file formats, but they can also be saved to your computer, emailed to others or saved on the free FireShot hosting server. As a result of its wide range of features, this add-on has attracted over one hundred and fifty thousand active users, and has proven itself to be invaluable for web designers and other Internet professionals.


06. MeasureIt

As someone who creates designs for the Internet, one of the most chellanging job is to create design elements aligned. In that case MeasureIt comes in handy and allows you to overlay a ruler on a browser page so you can verify width, height and alignment of page elements.



07. CSS Validator/HTML Validator

CSS Validator is a Firefox extension which Validates a page using the W3C CSS Validator. Adds an option to the right-click context menu and to the Tools menu to allow for easy validation of the CSS of the current page. Opens the results in a new tab. Will only work on pages that have a CSS file associated. For example it will work with http://www.w3.org/ as the URL has a CSS file. When using the HTML Validator, you can choose to validate directly in the browser (where any errors are shown as a status bar icon), show the source with explanations of errors after the validation or a validation with proposed solutions to any errors.


08. GridFox

One of the most frustrating issues that a web designer undoubtedly encounter when coding grid-based layouts. How can a designer be sure that the grid is maintained from the original mockup to the final coded version? When I coded my first grid-based layout, I found myself regularly taking screenshots of the site and comparing them with my original grid in Photoshop. There had to be an easier way.

GridFox is a great extension that will overlay a grid on a selected website. If you can open it in Firefox, you can put a grid on top of it. It’s easy to customize, allowing you to create the exact grid you designed your layout around.



09. CSSViewer

With this extension you can view CSS properties of related page elements. Very handy, when You got large CSS file with styles overlapping each other, to analyze why something is not displayed in the way You wanted.



10. Browser Window Resizer

The Browser Window Resizer is useful tool for testing different screen sizes. It accurately resizes your browser so you can test to see if the web page you’re working on looks right in all of the standard resolution sizes. This will allow you to see if your design is going to look good to visitors who aren’t using the same resolution as you. The best thing about this add-on is that if you are using it in conjunction with the other add-ons in this list (specifically Firebug), when you see that something isn’t displaying properly, you can instantly make adjustments to your code and see if that fixes the problem, all without ever leaving your current browser window. Browser Window Resizer add-on resize your Firefox window to 640×480, 800×600, 1024×768, 1280×1024 and 1600×1200 resolution sizes.

If i miss any other addons which you think essential for designer please feel free to share it by your valuable comment.

10 excellent and inspirational examples of Horizontal Navigation Menus

I think Navigation Menu is second important part of any site because they Mostly appear right next to the logo. Anybody can attract users by designing unique and nice looking menus. In my previous post of Navigation menus i provide Top 70 CSS Navigation Menu link. From those link you can learn how to create menus for your site. Today i share couple of inspirational Horizontal Navigation Menu design example site where you can see nice and exceptional design of Horizontal Navigation Menus.

Hope you will be inspired by those menu design and create unique and excellent menus for your site.


Benjamin Christie

Single Hop

Tutorial9

kriesi

Loodo

Skialpine

Designerscouch

Twitterevolutions

Boukarabila

Boomawebdesign

10 Best Color Tools For Web Designers

Right Color for the Right combination is very important while you designing a web page because color play major role to make your web project successful. So sometimes its difficult task for web designer to select decent and beautiful color combination for every design. In that situation color tools can helps you determine matching color or even suggest sets of matching color palette when you are totally clueless.

There are numerous free online tools to help in your decision, so many that it can take time just choosing which tool to choose. Rather than creating a long list of what is available I have chosen 15 best tools which i like most because they are easy to use.



colorexplorer.com

colorotate.org

kuler.adobe.com

colourlovers.com

colorjack.com

pourpre.com

colorschemedesigner.com

colorcombos.com

colorhunter.com

colourgrab.com

Why You Should Validate Your Website.

It is very inportant to validate your website because it helps in many ways. From making it load right / the same in all browsers to helping you in the SEO area.
What exactly is validation? It's the process of checking the syntax of your HTML code to find places where you've violated the rules of the language. The official rules for writing HTML are defined by the World Wide Web Consortium (W3C).

Those rules include strict definitions stating which HTML and tags are legitimate parts of the language, and how you should structure your HTML and CSS documents.

Here i provide some essential tools for validatign your website :

1. W3C Markup Validation : This validator checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML, etc. If you wish to validate specific content such as RSS/Atom feeds or CSS stylesheets, MobileOK content, or to find broken links, there are other validators and tools available.


2.W3C CSS Validation : This service will validate your CSS. If you want to validate your CSS style sheet embedded in an (X)HTML document, you should first check that the (X)HTML you use is valid.


3.Feed Validation : This tool will validate all versions of RSS feeds as well as Atom feeds. This will ensure that readers will not have problems while receiving your feed.


4.[Firefox] Web Developer Toolbar : The Web Developer toolbar extension for Firefox has tools to check HTML and CSS validation. You can use this addons on a daily basis.


5.[Browser Independent] W3C Validator Favelets : A quick and easy way to give just about any major browser a way to validate HTML and CSS is by using favelets. Favelets are bookmarked snippets of JavaScript to add extra functionality.

6.Development Editor : Most development editors offer validation tool. Adobe Dreamweaver is my editor of choice and it provides validation tools.


So validating your pages is a wise precaution, particularly if you write the HTML and CSS code by hand. Clean, well-written HTML,CSS is important if you want to ensure a good search engine ranking. It also helps guarantee that your page will be displayed properly on older, or more obscure browsers that are less forgiving.

Create CSS gradient buttons without image.

Its a dream of any web designers to create css gradient button without image. There are lots of limitation in designing a web page for browser compatibility issue. For this reason we designer cannot express our creative thinking as we think. But from now i think we can express our creative idea without any hassle. We web designer always need to keep some point in our mind when designing a webpage.

One of the serious issue is web page load time. To do that always we try to make page smaller in size.we know that using image in design is a nightmare. Its always make our page heavy.


To get rid from this hassle CSS gradient feature was introduced by Webkit for about two years but was rarely used due to incompatibility with most browers. But now with the Firefox 3.6+, which supports gradient, we can style create gradient without having to create an image. Here in this post i will show you how to code for the CSS gradient button to be supported by the major browsers: IE, Firefox 3.6+, Safari, and Chrome.

The XHTML is below:

<a href="http://webdeziners.blogspot.com/" class="red">http://webdeziners.blogspot.com/</a>

The css style is below:

.red {
display: inline-block;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.5);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
color: #fffbf9;
border: solid 1px #980401;
background: #c50503; /* for non-css3 browsers */
background: -webkit-gradient(linear, left top, left bottom, from(#ff8a50), to(#c30000)); /* For Webkit Browsers */
background: -moz-linear-gradient(top, #ff8a50, #c30000); /* for Firefox */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff8a50', endColorstr='#c30000'); /* for IE */
}
.red:hover {
background: #c50503;
background: -webkit-gradient(linear, left top, left bottom, from(#c30000), to(#ff8a50));
background: -moz-linear-gradient(top, #c30000, #ff8a50);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c30000', endColorstr='#ff8a50');
}
.red:active {
border: solid 1px #ec3331;
color: #f9baae;
background: -webkit-gradient(linear, left top, left bottom, from(#dc3921), to(#ffb36a));
background: -moz-linear-gradient(top, #dc3921, #ffb36a);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dc3921', endColorstr='#ffb36a');
}

If you use above css and html code the button will be look like following image :

Please note not all browsers support CSS gradient. To be safe, you shouldn’t rely on CSS gradient when coding the layout. It should only be used for enhancing the layout.Hope you enjoy it as much as i do.

Pearl Crescent Page Saver for firefox

Page Saver lets you capture images of web pages, including Flash content. A web page screenshot can be saved in PNG or JPEG format. Using Page Saver, you can capture an entire page or just the visible portion. To allow you to control the image capture process, a wide variety of options are provided including a file name pattern and an image scale setting (e.g., save at 50% of original size).
Images may be captured using a toolbar button, the browser context menu, or from the command line.

Add to Firefox
https://addons.mozilla.org/en-US/firefox/addon/10367

A Pro edition of Page Saver is available that adds features such as file upload, extensive command line options, and the capability to select a region on the page. For more information
visit http://pearlcrescent.com/products/pagesaver/pro/

HTML & XHTML Character Entities List

Using character entities is very helpful when the encoding set doesn’t express all the characters that you might want to use in your document. For example, if you were authoring a document in English and wanted to use an inverted exclamation mark for a Spanish quotation, In this situation you must use an entity to create that character. Other character entity references help control space, symbols, and so on.

There are three types of character entities available in HTML and XHTML. Follow the links to the complete chart listings for that entity type.

• ISO 8859-1 characters. This set includes the Latin set of character entities.
• Symbols, Mathematical Characters, Greek and Latin Letters. This set includes entities for various symbols (such as copyright symbols and so on), math characters, and Greek and Latin letters.
• Markup-significant Characters. This set includes internationalization characters such as those required for bi-directional text.

Named Entities in HTML & XHTML

Example	Named Entity	Numeric	Entity Description
	 	 	non-breaking space
¢	¢	¢	cent sign
£	£	£	pound sign
¤	¤	¤	currency sign
¥	¥	¥	yen sign
¦	¦	¦	broken vertical bar
§	§	§	section sign
¨	¨	¨	diaeresis
©	©	©	copyright sign
ª	ª	ª	feminine ordinal indicator
«	«	«	left-pointing double angle quotation mark
¬	¬	¬	not sign
­	­	­	soft hyphen
®	®	®	registered sign
¯	¯	¯	macron
°	°	°	degree sign
±	±	±	plus-minus sign
²	²	²	superscript two
³	³	³	superscript three
´	´	´	acute accent
µ	µ	µ	micro signB5
¶	¶	¶	pilcrow sign
·	·	·	middle dot
¸	¸	¸	cedilla
¹	¹	¹	superscript one
º	º	º	masculine ordinal indicator
»	»	»	right-pointing double angle quotation mark
¼	¼	¼	vulgar fraction one- quarter
½	½	½	vulgar fraction one- half
¾	¾	¾	vulgar fraction three- quarters
¿	¿	¿	inverted question mark
À	À	À	Latin capital letter A with grave
Á	Á	Á	Latin capital letter A with acute
Â	Â	Â	Latin capital letter A with circumflex
Ã	Ã	Ã	Latin capital letter A with tilde
Ä	Ä	Ä	Latin capital letter A with diaeresis
Å	Å	Å	Latin capital letter A with ring above
Æ	Æ	Æ	Latin capital letter AE
Ç	Ç	Ç	Latin capital letter C with cedilla
È	È	È	Latin capital letter E with grave
É	É	É	Latin capital letter E with acute
Ê	Ê	Ê	Latin capital letter E with circumflex
Ë	Ë	Ë	Latin capital letter E with diaeresis
Ì	Ì	Ì	Latin capital letter I with grave
Í	Í	Í	Latin capital letter I with acute
Î	Î	Î	Latin capital letter I with circumflex
Ï	Ï	Ï	Latin capital letter I with diaeresis
ð	ð	Ð	Latin capital letter eth
Ñ	Ñ	Ñ	Latin capital letter N with tilde
Ò	Ò	Ò	Latin capital letter O with grave
Ó	Ó	Ó	Latin capital letter O with acute
Ô	Ô	Ô	Latin capital letter O with circumflex
Õ	Õ	Õ	Latin capital letter O with tilde
Ö	Ö	Ö	Latin capital letter O with diaeresis
×	×	×	multiplication sign
Ø	Ø	Ø	Latin capital letter O with stroke
Ù	Ù	Ù	Latin capital letter U with grave
Ú	Ú	Ú	Latin capital letter U with acute
Û	Û	Û	Latin capital letter U with circumflex
Ü	Ü	Ü	Latin capital letter U with diaeresis
Ý	Ý	Ý	Latin capital letter Y with acute
þ	þ	Þ	Latin capital letter thorn
ß	ß	ß	Latin small letter sharp
à	à	à	Latin small letter a with grave
á	á	á	Latin small letter a with acute
â	â	â	Latin small letter a with circumflex
ã	ã	ã	Latin small letter a with tilde
ä	ä	ä	Latin small letter a with diaeresis
å	å	å	Latin small letter a with ring above
æ	æ	æ	Latin small letter ae
ç	ç	ç	Latin small letter c with cedilla
è	è	è	Latin small letter e with grave
é	é	é	Latin small letter e with acute
ê	ê	ê	Latin small letter e with circumflex
ë	ë	ë	Latin small letter e with diaeresis
ì	ì	ì	Latin small letter i with grave
í	í	í	Latin small letter i with acute
î	î	î	Latin small letter i with circumflex
ï	ï	ï	Latin small letter i with diaeresis
ð	ð	ð	Latin small letter eth
ñ	ñ	ñ	Latin small letter n with tilde
ò	ò	ò	Latin small letter o with grave
ó	ó	ó	Latin small letter o with acute
ô	ô	ô	Latin small letter o with circumflex
õ	õ	õ	Latin small letter o with tilde
ö	ö	ö	Latin small letter o with diaeresis
÷	÷	÷	division sign
ø	ø	ø	Latin small letter o with stroke
ù	ù	ù	Latin small letter u with grave
ú	ú	ú	Latin small letter u with acute
û	û	û	Latin small letter u with circumflex
ü	ü	ü	Latin small letter u with diaeresis
ý	ý	ý	Latin small letter y with acute
þ	þ	þ	Latin small letter thorn
ÿ	ÿ	ÿ	Latin small letter y with diaeresis

Symbol Entities in HTML & XHTML

Example	Named Entity	Numeric Entity	Description
ƒ	ƒ	ƒ	Latin small f with hook
Α	Α	Α	Greek capital letter alpha
Β	Β	Β	Greek capital letter beta
Γ	Γ	Γ	Greek capital letter gamma
Δ	Δ	Δ	Greek capital letter delta
Ε	Ε	Ε	Greek capital letter epsilon
Ζ	Ζ	Ζ	Greek capital letter zeta
Η	Η	Η	Greek capital letter eta
Θ	Θ	Θ	Greek capital letter theta
Ι	Ι	Ι	Greek capital letter iota
Κ	Κ	Κ	Greek capital letter kappa
Λ	Λ	Λ	Greek capital letter lambda
Μ	Μ	Μ	Greek capital letter mu
Ν	Ν	Ν	Greek capital letter nu
Ξ	Ξ	Ξ	Greek capital letter xi
Ο	Ο	Ο	Greek capital letter omicron
Π	Π	Π	Greek capital letter pi
Ρ	Ρ	Ρ	Greek capital letter rho
Note: There’s no Sigmaf, ” final sigma”, ΢ defined in iso-grk
Σ	Σ	Σ	Greek capital letter sigma
Τ	Τ	Τ	Greek capital letter tau
Υ	Υ	Υ	Greek capital letter upsilon
Φ	Φ	Φ	Greek capital letter phi
Χ	Χ	Χ	Greek capital letter chi
Ψ	Ψ	Ψ	Greek capital letter psi
Ω	Ω	Ω	Greek capital letter omega
α	α	α	Greek small letter alpha
β	β	β	Greek small letter beta
γ	γ	γ	Greek small letter gamma
δ	δ	δ	Greek small letter delta
ε	ε	ε	Greek small letter epsilon
ζ	ζ	ζ	Greek small letter zeta
η	η	η	Greek small letter eta
θ	θ	θ	Greek small letter theta
ι	ι	ι	Greek small letter iota
κ	κ	κ	Greek small letter kappa
λ	λ	λ	Greek small letter lambda
μ	μ	μ	Greek small letter mu
ν	ν	ν	Greek small letter nu
ξ	ξ	ξ	Greek small letter xi
ο	ο	ο	Greek small letter omicron
π	π	π	Greek small letter pi
ρ	ρ	ρ	Greek small letter rho
ς	ς	ς	Greek small letter final sigma
σ	σ	σ	Greek small letter sigma
τ	τ	τ	Greek small letter tau
υ	υ	υ	Greek small letter upsilon
φ	φ	φ	Greek small letter phi
χ	χ	χ	Greek small letter chi
ψ	ψ	ψ	Greek small letter psi
ω	ω	ω	Greek small letter omega
ϑ	ϑ	ϑ	Greek small letter theta symbol
ϒ	ϒ	ϒ	Greek upsilon with hook symbol
ϖ	ϖ	ϖ	pi symbol
•	•	•	bullet
…	…	…	horizontal ellipsis
′	′	′	prime
″	″	″	double prime
‾	‾	‾	overline
⁄	⁄	⁄	fraction slash
℘	℘	℘	script capital
ℑ	ℑ	ℑ	blackletter capital I
ℜ	ℜ	ℜ	blackletter capital R
™	™	™	trade mark sign
ℵ	ℵ	ℵ	alef symbol
←	←	←	leftward arrow
↑	↑	↑	upward arrow
→	→	→	rightward arrow
↓	↓	↓	downward arrow
↔	↔	↔	left right arrow
↵	↵	↵	downward arrow with corner leftward
⇐	⇐	⇐	leftward double arrow
⇑	⇑	⇑	upward double arrow
⇒	⇒	⇒	rightward double arrow
⇓	⇓	⇓	downward double arrow
⇔	⇔	⇔	left-right double arrow
∀	∀	∀	for all
∂	∂	∂	partial differential
∃	∃	∃	there exists
∅	∅	∅	empty set
∇	∇	∇	nabla
∈	∈	∈	element of
∉	∉	∉	not an element of
∋	∋	∋	contains as member
∏	∏	∏	n-ary product
∑	∑	∑	n-ary summation
−	−	−	minus sign
∗	∗	∗	asterisk operator
√	√	√	square root
∝	∝	∝	proportional to
∞	∞	∞	infinity
∠	∠	∠	angle
∧	∧	∧	logical and
∨	∨	∨	logical or
∩	∩	∩	intersection
∪	∪	∪	union
∫	∫	∫	integral
∴	∴	∴	therefore
∼	∼	∼	tilde operator
≅	≅	≅	approximately equal to
≈	≈	≈	almost equal to
≠	≠	≠	not equal to
≡	≡	≡	identical to
≤	≤	≤	less-than or equal to
≥	≥	≥	greater-than or equal to
⊂	⊂	⊂	subset of
⊃	⊃	⊃	superset of
⊄	⊄	⊄	not a subset of
Note: ⊅ , ⊅ “not a superset of” is not defined.
⊆	⊆	⊆	subset of or equal to
⊇	⊇	⊇	superset of or equal to
⊕	⊕	⊕	circled plus
⊗	⊗	⊗	circled times
⊥	⊥	⊥	up tack
⋅	⋅	⋅	dot operator
⌈	⌈	⌈	left ceiling
⌉	⌉	⌉	right ceiling
⌊	⌊	⌊	left floor
⌋	⌋	⌋	right floor
〈	⟨	〈	left-pointing angle bracket
〉	⟩	〉	right-pointing angle bracket
◊	◊	◊	lozenge
♠	♠	♠	black (solid) spade suit
♣	♣	♣	black (solid) club suit
♥	♥	♥	black (solid) heart suit
♦	♦	♦	black (solid) diamond suit

Markup-Specific Entities in HTML & XHTML

Example	Named Entity	Numeric Entity	Description
"	"	"	quotation mark
&	&	&	ampersand
<	&lt;	&#60;	less-than sign
>	&gt;	&#62;	greater-than sign
Œ	&OElig;	&#338;	Latin capital ligature OE
œ	&oelig;	&#339;	Latin small ligature oe
Š	&Scaron;	&#352;	Latin capital letter S with caron
š	&scaron;	&#353;	Latin small letter s with caron
Ÿ	&Yuml;	&#376;	Latin capital letter Y with diaeresis
ˆ	&circ;	&#710;	modifier letter circumflex accent
˜	&tilde;	&#732;	small tilde
	&ensp;	&#8194;	en space
	&emsp;	&#8195;	em space
	&thinsp;	&#8201;	thin space
‌	&zwnj;	&#8204;	zero width non-joiner
‍	&zwj;	&#8205;	zero width joiner
‎	&lrm;	&#8206;	left-to-right mark
‏	&rlm;	&#8207;	right-to-left mark
–	&ndash;	&#8211;	en dash
—	&mdash;	&#8212;	em dash
‘	&lsquo;	&#8216;	left single quotation mark
’	&rsquo;	&#8217;	right single quotation mark
‚	&sbquo;	&#8218;	single low-9 quotation mark
“	&ldquo;	&#8220;	left double quotation mark
”	&rdquo;	&#8221;	right double quotation mark
„	&bdquo;	&#8222;	double low-9 quotation mark
†	&dagger;	&#8224;	dagger
‡	&Dagger;	&#8225;	double dagger
‰	&permil;	&#8240;	per mille sign
‹	&lsaquo;	&#8249;	single left-pointing angle quotation
›	&rsaquo;	&#8250;	single right-pointing angle quotation
€	&euro;	&#8364;	euro sign

10 Best Websites To Download Free Fonts

When designing a Web page, you will most certainly use fonts. Some of my friends ask me about free fonts. They want to know information about best free font resources. So here i share top 10 free fonts site, from where you can download nice and exceptional free fonts.

1. Search Free Fonts

2. 1001 Fonts

3. DaFont

4. Daily Free Fonts

5. Urban Fonts

6. Wonder Fonts

7. Abstract Fonts

8. Font Stock

9. Font Cubes

10. Simply The Best Fonts