Adobe Edge Web Fonts is an open source font service, comparable to using Google Fonts in your WordPress website. It has over 500 font families, and is powered by Adobe’s better-known, commercial web font service, Typekit. Adobe has also partnered with Google Fonts to use most of the fonts originally commissioned by Google, to contribute two of the Adobe fonts to Google Fonts, and to help improve the web fonts from both Google and Adobe. You can read more on the website.
It’s easy to use Adobe Edge Web Fonts; you don’t need to create an account; you can just get started using the fonts. When you are on the Fonts page, you can search by name or by eight font classes, instead of only five with Google. You can also choose fonts recommended only for headings or paragraphs or other font properties. You can also view the fonts in a grid or list format, whichever is easier for you. I only found a handful of fonts that were not on Google Fonts, but the search feature makes Adobe Edge Web Fonts easier to find fonts.
How To Select the Web Fonts
- Click on the name of the font. This will open a Use section at the bottom of the screen.
- If you want to use another font, find and click on that font name, as well. The image above has M+ 1c (for body font) and GFS Didot (for heading font) selected.
- In Use section 1., if the font family you selected has a lot of font styles, like M+ 1c, you may want to choose just a few of them. Click on Custom Styles, and then check only the styles you need for your website. See the red 1 and 2 in the image.
- Then in Use section 2., you will be given a script (Javascript tag) to paste into the <head> of your website. It will show the font styles you checked. See the red 3.
<script src="//use.edgefonts.net/m-1c:n4,n7;gfs-didot.js"></script>- Then in Use section 3., you are shown how to use the fonts in your CSS.
font-family: m-1c, sans-serif;
font-family: gfs-didot, serif;How to Use the Web Fonts in WordPress
There are two steps. See the details below, depending on your theme.
- Add the script to your WordPress child theme <head> or your functions.php.
- Add the CSS to your child theme style.css or a Custom CSS Editor.
How to Add the Web Fonts Script in WordPress
Add the Script Directly to the <head>
- If your theme has a section in the WordPress Admin with theme settings, you may be able to add script to the <head>. You can just paste the script on a new line. Here is an example from a Genesis theme.
OR Enqueue the Script in functions.php
- Or instead, you can register and enqueue the script in your functions.php, which is really a better method for those using WordPress.
- Add the following to your functions.php.
<?php // Don't add this line to your functions.php
// Enqueue Font Scripts
add_action( 'wp_enqueue_scripts', 'my_enqueue_font_scripts' );
function my_enqueue_font_scripts() {
wp_register_script( 'my_adobe_edge_fonts', '//use.edgefonts.net/m-1c:n4,n7;gfs-didot.js' );
wp_enqueue_script( 'my_adobe_edge_fonts' );
}Note that you will need to use the script for your selected fonts to replace //use.edgefonts.net/m-1c:n4,n7;gfs-didot.js Also if you have other fonts enqueued in your functions.php, you may want to remove them.
How to Add the CSS to Your Child Theme
- You will need to find the selectors in your child theme style.css that you want to edit.
- For the example I changed all the heading tags to use GFS Didot. I changed the body font to use M+ 1c.
- You would add this to your child theme style.css or to a Custom CSS editor.
body {
font-family: m-1c, sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: gfs-didot, serif;
}And this is how our new fonts will look in a blog post.
2 responses to “Use Adobe Edge Web Fonts in Your WordPress Website”
THANKS! First clear and concise description of webfonts in WP I have seen. Must be that TRS-80 experience. (I always wanted one back then)
LOL! Thank you, Steve. I’m glad it helped.