Give your WordPress Site a little Snazz by Adding a Custom Font
“Good typography or bad typography – which one would you think might make a reluctant reader more likely to give up? Typography (good or bad) can make the difference between visitors staying on our sites or going elsewhere.” ~
I am not a Typographer. That is an art form that requires years of study and practice. I am a guy that knows that typography is important. And therefore, has to add custom fonts to WordPress websites from time to time.
Often times the theme you choose will have the fonts you want to use built-in. Often times the good themes will have the option to change fonts in the Customization menu.
If your theme does not have the fonts you want, or there is no option to pick a custom font then you can add fonts to your WordPress website.
What is Typography
1. is the art and technique of arranging type to make written language readable and beautiful. The arrangement of type involves selecting typefaces, point size, line length, line-spacing (leading), letter-spacing (tracking), and adjusting the space within letters pairs (kerning).
Nothing makes me want to NOT Read something like having it printed in “Times New Roman”! Please do not use this font… ever.
1. a particular size, weight and style of a typeface. Each font was a matched set of type, one piece (called a “sort”) for each glyph, and a typeface comprised a range of fonts that shared an overall design.
1. (also known as font family) is a set of one or more fonts each composed of glyphs that share common design features. Each font of a typeface has a specific weight, style, condensation, width, slant, italicization, ornamentation, and designer or foundry (and formerly size, in metal fonts)
What Fonts To Use
I don’t think there is a definitive answer… I mean there are thousand’s and thousand’s of fonts to choose from.
Check out this Web Font Combination Infographic for some inspiration.
For example I recently built a website for a client and used a real nice san serif font called Oswald.
The client approved the website except that he wanted me to use a more professional font.
To him a professional font was a serif style font.
While there really is no “right” answer for what fonts to use there are a couple of thing to keep in mind:
- Make sure that the TypeFace matches your website
- Using a Handwriting style font on a Law Website probably does not work
- Using the same font for the entire site works fine… but to add contrast try:
- Using a combination of Serif and San Serif Fonts
- Break up font by using Different sizes, colors, bold, italic, and spacing
- Do not use fonts illegally!
- There are Free Fonts and there are Fonts that require payment
- If a Font requires payment (or a license) and you display it on your website without the license this is illegal.
How to Add Custom Fonts To WordPress
There are many ways to do this I will cover 3:
1. Simple – “Use Any Font” plugin
2. Hard – Google Fonts
3. Difficult (preferred) – Font Squirrel
You may be asking why on earth would I want to choose anything except the Simple option? If you don’t want to add another code heavy plugin to your WordPress website, and make sure that you have the best option for all browsers and devices.
1. Use Any Font Plugin
This plugin is pretty easy to use and allows you to upload custom fonts.
The developer only allows you to upload 1 font for free… you will need to “donate” $10 to get unlimited fonts.
You will need to download your Font or Fonts before you set up the plugin.
To find the font that you would like to use I suggest you visit:
How To Set Up “Use Any Font”
- Screenshot #2. Use Any Font Plugin Setup
- Screenshot #3. Assign font directly from WordPress Editor
- Screenshot #4. Font list not showing in editor.
- Screenshot #5. Disable font list in editor.
2. How To Use Google Fonts
- Visit the Google Fonts website: Google.com/fonts
- Choose the font or fonts that you would like to add to your WordPress Website by click the “Add to Collection” button.
- The font or fonts that you choose will be displayed at the bottom of the screen for your review when you are done choosing your fonts click the “Use” button.
- Find the box that allows you to copy the @import code