Everything To Add Custom Fonts In WordPress Once you’ve found the fonts you want to use in your WordPress site, you’ll need to install them. If you haven’t found the one’s you like yet, try these 6 providers of premium and free custom fonts. • myfonts • dafonts • fontsquirrel • fonts • 1001freefonts •
coolfonts.org
There’s different ways you can add your custom fonts depending on your theme and where you get the fonts from. Generally there’s the: • manual
code methods or
• installing
different font loading plugins
Plugin: You can add more font styles & sizes to your visual editor by simply installing a fonts plugin.
FONT PLUGINS FOR WORDPRESS Here’s some of the best plugins you can choose from to install your custom fonts depending on which fonts you choose: • http://wordpress.org/extend/plugins/typekit-fonts-for-wordpress/
– Install this
plugin when using Typekit fonts • http://wordpress.org/extend/plugins/wp-google-fonts/
– Most popular plugin for
adding Google’s web fonts to WordPress. •
http://wordpress.org/extend/plugins/web-fonts/ – Support for web fonts from the www.coolfonts.org web fonts collection out of the box.
• http://wordpress.org/extend/plugins/font-uploader/
– Upload any font file types
(otf and .ttf) and this plugin will embed them into your site using the CSS rule, @font-face
INSTALL GOOGLE FONTS MANUALLY There’s also different ways to install your custom fonts manually. • Using
PHP Code – This is now the method used in StudioPress child themes
using the Genesis theme framework. Here’s a step by step guide for beginners. • @import
– This is used in your child themes style.css file.
• Javascript • Using
– Not covered in this post
a plugin – Here’s a post i wrote earlier about how to install Google fonts
using a plugin. If you’re installing Google web fonts using the @import rule, you don’t need to upload the font files to your server which is what you would do if your fonts are premium or custom web fonts. Simply add this code to the start of your child theme’s style.css file @import url(http://fonts.googleapis.com/css?family=Oswald); This is the font used on the Genesis theme framework. Once you’ve imported the fonts, you can then use them in your theme by editing your child theme’s style.css file like this example: .site-title { font-family: Oswald, Arial; font-size: 45px; } Note: Its advisable to only import the fonts you’ll be using as they use server resources and can slow down your page loading times.
INSTALL CUSTOM FONT FILES MANUALLY – BASIC SOLUTION What about installing non Google custom fonts manually? Here’s the most basic example which you place at the start of your child themes style.css file: @font-face { font-family: Adobe Garamond Pro; src: url('fonts/agp.otf'); } And then you simply create a new fonts folder in your child theme and upload the font file to that folder. Here’s an example of how to add a new font in your theme. This code is placed at the end of the child themes style.css file and will make all h3 sub headings use the new custom font, Adobe Garamond Pro. h3 { font-family: Adobe Garamond Pro, Lato; } The font stack includes a fallback to Lato which is a Google font that’s also installed using another method and displays of the new Adobe Garamond Pro font doesn’t for some reason.
MORE COMPREHENSIVE SOLUTION Here’s an online font face generator which you can also use to an entire kit which includes everything you need to install fonts in WordPress. This is what the CSS code will look like once you upload and convert your font files using the generator.
@font-face { font-family: 'trashhandregular'; src: url('trashhand.eot'); src: url('trashhand.eot?#iefix') format('embedded-opentype'), url('trashhand.woff') format('woff'), url('trashhand.ttf') format('truetype'), url('trashhand.svg#trashhandregular') format('svg'); font-weight: normal; font-style: normal; } This is how the CSS code will look if you simply upload the file without using the generator depending on the number of fonts you want to use: @font-face { font-family: GoodDog; src: url('http://www.example.com/wp-content/themes/child/fonts/GoodDog.ttf'); } • Paste
the generated code into the start of your child theme’s style.css file OR
use the standard method and write a function using action hooks so its loads in your themes header for best performance. • Edit
your CSS file and add your new font to wherever you want to use it in
your theme Note: The @font-face rule is only supported by the latest browser versions. Not all file types are supported by all browsers. Read more about browser support of the @font-face CSS rule For this reason, its best practice to install fonts in WordPress using an online @font face generator.
This will create the other file types (and supporting file kit) from your original font files that are supported by all browsers and mobile devices.
LOADING OF FONTS This screenshot shows you the Google fonts loaded immediately after the site title and before the Magazine (child theme’s) CSS style sheet.
PAIRINGS Its best to try and use 2 fonts that work well together. Google web fonts gives you pairings which match the title headings with body text like: Oswald | Open Sands Or you could use the same font which has 2 different styles.
USING FONTS IN YOUR EDITOR You can also install Google or any other fonts for use in your visual editor. This can be done by installing a plugin for this purpose or you can enable the hidden features like fonts styles in your visual editor. Enabling the hidden features will activate a limited amount of font styles and sizes which are included in your editor files. Adding custom fonts to your editor manually is beyond this post and something i will cover shortly in another post. This way you can use the fonts with different heading sizes on a per page/post basis rather than site wide.