Changing fonts for a website used to be something that was suspect because of the support in browsers and the quickness of load, and the fact that it will default to something you’re not expecting if that font doesn’t load, etc, etc.
But, luckily internet is awesome, and always becoming more awesome.
To add the support of a font for your website there are a few steps to follow.
Find the Font you Love and Upload it
First step is to find the font you love. It can be found online very easily, dafont.com is a great choice.
Once you’ve found this font, upload it to a folder in the directory of the website. This is typically within your themes folder (on WordPress) or it can anywhere. Just copy where it is exactly located so we can use it later.
Typically ../fonts/<font name> is a good place.
Add @font-face to Style Sheet style.css
Now we need to tell your browser that you have this font, and where it’s located.
This needs to be done in the style sheet of your website, which is typically named style.css (pay special attention to the *.css part).
The code necessary is:
@font-face {
font-family: myFontFamily;
src: url('fonts/myFontFamily.otf') format('opentype');
}Those are the necessary elements, but you can also define more properties to the font-face (see w3schools.com).
This part is tricky, and usually takes some funny business (hopefully not). If you’re lucky, there will already be fonts associated with your website and you can put the font in the same folder as the other fonts (step 1 above) and copy the existing @font-face declaration.
Also note that ‘myFontFamily’ is the name of the font that you’ve uploaded to your site, and pay particular attention to the type of font, the format. There are two fairly standard fonts: ‘opentype’ (*.otf) and ‘truetype’ (*.ttf), but more exist.
Set Element Font in Style Sheet
Now we actually need to set the element of your website to use the font you’ve just installed.
This is done using something like:
.entry-title { font: 50px myFontFamily; }Once again, refer to w3schools for a complete list and instructions on proper syntax for using the font property.
Protip: to figure out what class or id a specific element of your website is defined as, highlight the text you’re curious about, right click, and select inspect element. This should open up a panel at the bottom of your screen (depending on the browser that you’re using: suggested: Firefox) and you should be able to see the id or class the element you’ve selected is defined with (which should also show you the specific font that it’s using!).
Sites that might be helpful:
- w3school font property
- w3school @font-face rule
- wpmudev | Adding Custom Fonts to WordPress
- Evolutionary Designs | How to Use Google Web Fonts on WordPress and Other Sites
- Evolutionary Designs | How to add Custom Fonts to WordPress
- WordPress.org | Playing with Fonts
- dafont.com
Hope this helps!