How to install MyFonts webfont on WordPress website

Mark
September 14th, 2016
No Comments

MyFonts.com now provides a WordPress plugin to easily install webfonts on any WordPress website. No need for FTP and tweaking css and script file paths. Kudos to MyFonts, they couldn’t have made it any easier.

Below is a screencap of webfont kit setup. To create WordPress plugin for MyFonts for WordPress simply check the box next to “Make this a WordPress webfonts kit”. Set other configurations as you wish. The kit you download is the MyFonts plugin for WordPress. Simply upload .zip file like any other WordPress plugin.

Screencap of MyFonts Webfont kit setup

Here are the instructions which come with MyFonts:

MyFonts Webfonts Kit

FuturaSB-LightCon
FuturaSB-MediumCon

How To:

The MyFonts Webfonts WordPress Plugin is a package of code and font files which installs fonts onto your WordPress site in a few simple steps. All you need is to upload the plugin to your WordPress site and make some edits to your WordPress Settings. Two easy steps then you’re on your way to using MyFonts.

1. Upload your Kit

Upload the contents of the plugin to your web server. This is typically done using the WordPress plugin import tool in your WordPress admin panel. Open the admin panel and click Plugins. At the top of the plugins menu click the Add New button. At the top of the Add Plugins menu click the upload plugin button and upload the WordPress plugin zip file.

Note: You only need to upload the zip file you downloaded through MyFonts.

2. Edit your settings

Locate your MyFonts Settings under the WordPress Admin Panel and select where you want your webfonts to be used. Make sure that the reference appears on all HTML pages of your site.

The WordPress plugin settings does not always work with custom WordPress themes that change the HTML element & class names. In this case you must use CSS references in your WordPress theme that are listed in the steps below.

3. Edit your CSS (Optional)

Now for the best part!
You’ll need to assign the webfonts (font-family) to tags, classes and other CSS selectors in your WordPress theme if you choose to not use the plugin settings. You need to decide where on your site you would like to use the webfonts. Using the CSS that was bundled with your WordPress theme, you can assign webfonts to specific areas of your site. There are several ways to do it, here are the basics and we’ll explore more advanced options in the ‘Sample code’ section below.

Go to your WordPress admin panel and click Editor; this is where your current WordPress theme’s CSS lives. Add one of the following to the top of this file:

h1.site-title { font-family: FuturaSB-LightCon; }

h1.site-title { font-family: FuturaSB-MediumCon; }

This will add your webfonts to the site title of your WordPress site.

Sample CSS

Lets look at some fancy ways you can use CSS & CSS selectors to apply webfonts to your site!

If you’d like to assign a font to the entire post body, simply use the div.entry-content tag selector in your stylesheet.

div.entry-content { font-family: FuturaSB-MediumCon; }

If you’d like all headings to be formatted using this
webfont, you need to assign it to the h1…h5 elements.
Remember to assign the weight and style of the font, especially if you don’t have the entire family.
Use the following CSS declaration in the stylesheet for your website:

h1, h2, h3, h4, h5 { 
        	font-family: FuturaSB-MediumCon;
        	font-weight: normal;
        	font-style: normal;
        }

You can use any valid CSS selector (such as an HTML tag name, a class or an
ID, or a combination of those) if you want to format a specific portion of the
document. There are tons of different things you can do with CSS, so have some fun!

Webfont Kit Troubleshooting

So it’s not working, bummer. Here are some tricks and tips to make this process a little easier.

Webfonts not working at all?

This is usually a problem with the path to either your CSS file or the actual font files referenced by the CSS file. Double check all your paths and make sure that you’re pointing to the locations which you uploaded the kit to. It also might be worth double checking your CSS inside of a debugging tool such as Firebug (for Firefox) or Chrome Developer tools.

Webfonts not working on an iPhone or other iDevice?

This happens frequently when using IIS as a webserver. IIS will not serve file types (MIME types) it is unfamilar with, so you must set the MIME type for SVG to “image/svg+xml” in the server settings.

Webfonts not working in Firefox or IE9+?

Newer versions of Firefox and Internet Explorer have cross domain restrictions on font loading.
This is a security feature which can get really frustrating if you’re not aware of it. The best thing to do is to host the font on the same domain, however if you have to host it on a different subdomain or on a CDN service you can get around this issue by adding a custom header, something like ‘Access-Control-Allow-Origin: *’this article explains it in detail.
Your other option is to rebuild your webfont kit with Data URI encoded TTF’s, it’s an option under the Advanced section in our kit builder.

The WOFF file isn’t loading

This happens frequently when using IIS as a webserver also, IIS will not serve file types (MIME types) it is unfamilar with, so you must set the MIME type for WOFF to “application/font-woff” in the server settings.

FuturaSB-LightCon

36 A very bad quack might jinx zippy fowls. Pellentesque ac felis eu tortor convallis iaculis vitae eget neque. Sed leo est, volutpat sed laoreet non, convallis at metus. Nam facilisis risus eget orci posuere sodales. Aliquam eleifend quam vel ipsum euismod aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut ultrices tellus. Aliquam quis metus diam, id commodo mi. Aenean ac urna mi, sit amet gravida lacus. Aliquam urna nunc, pulvinar vel egestas ac, tincidunt non dui. Maecenas in orci sit amet lacus mollis viverra eu vitae arcu. Vestibulum eros quam, viverra et fermentum ac, ultrices sit amet risus. Nulla tristique magna vel urna tempus cursus.

30 A very bad quack might jinx zippy fowls. Pellentesque ac felis eu tortor convallis iaculis vitae eget neque. Sed leo est, volutpat sed laoreet non, convallis at metus. Nam facilisis risus eget orci posuere sodales. Aliquam eleifend quam vel ipsum euismod aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut ultrices tellus. Aliquam quis metus diam, id commodo mi. Aenean ac urna mi, sit amet gravida lacus. Aliquam urna nunc, pulvinar vel egestas ac, tincidunt non dui. Maecenas in orci sit amet lacus mollis viverra eu vitae arcu. Vestibulum eros quam, viverra et fermentum ac, ultrices sit amet risus. Nulla tristique magna vel urna tempus cursus.

21 A very bad quack might jinx zippy fowls. Pellentesque ac felis eu tortor convallis iaculis vitae eget neque. Sed leo est, volutpat sed laoreet non, convallis at metus. Nam facilisis risus eget orci posuere sodales. Aliquam eleifend quam vel ipsum euismod aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut ultrices tellus. Aliquam quis metus diam, id commodo mi. Aenean ac urna mi, sit amet gravida lacus. Aliquam urna nunc, pulvinar vel egestas ac, tincidunt non dui. Maecenas in orci sit amet lacus mollis viverra eu vitae arcu. Vestibulum eros quam, viverra et fermentum ac, ultrices sit amet risus. Nulla tristique magna vel urna tempus cursus.

14 A very bad quack might jinx zippy fowls. Pellentesque ac felis eu tortor convallis iaculis vitae eget neque. Sed leo est, volutpat sed laoreet non, convallis at metus. Nam facilisis risus eget orci posuere sodales. Aliquam eleifend quam vel ipsum euismod aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut ultrices tellus. Aliquam quis metus diam, id commodo mi. Aenean ac urna mi, sit amet gravida lacus. Aliquam urna nunc, pulvinar vel egestas ac, tincidunt non dui. Maecenas in orci sit amet lacus mollis viverra eu vitae arcu. Vestibulum eros quam, viverra et fermentum ac, ultrices sit amet risus. Nulla tristique magna vel urna tempus cursus.

12 A very bad quack might jinx zippy fowls. Pellentesque ac felis eu tortor convallis iaculis vitae eget neque. Sed leo est, volutpat sed laoreet non, convallis at metus. Nam facilisis risus eget orci posuere sodales. Aliquam eleifend quam vel ipsum euismod aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut ultrices tellus. Aliquam quis metus diam, id commodo mi. Aenean ac urna mi, sit amet gravida lacus. Aliquam urna nunc, pulvinar vel egestas ac, tincidunt non dui. Maecenas in orci sit amet lacus mollis viverra eu vitae arcu. Vestibulum eros quam, viverra et fermentum ac, ultrices sit amet risus. Nulla tristique magna vel urna tempus cursus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla arcu nisi, fringilla nec pharetra ac, dictum eget lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam viverra lectus nec erat viverra gravida. Nulla leo dolor, tristique elementum tempor sed, malesuada eget libero. Praesent congue, ipsum nec elementum tristique, dui enim fermentum nunc, in eleifend felis arcu at nulla. In augue massa, lobortis in fermentum non, euismod vel libero.

Mauris feugiat porta tincidunt. Cras eget dui diam, a viverra tortor. Proin dictum, diam ut vulputate imperdiet, enim nulla blandit est, in accumsan erat nisl in dolor. Nunc ante orci, tincidunt non luctus quis, congue a sem. Nulla non vehicula nisi. Vestibulum suscipit egestas massa eget convallis. Curabitur sapien magna, imperdiet eu consequat non, bibendum vel magna. Nulla neque lectus, lacinia vitae commodo scelerisque, tempus sit amet tellus. In semper arcu ut massa egestas posuere.

FuturaSB-MediumCon

Comments are closed