Fonts and Having it Your Way

This is not a step by step or a how to article. It is a brief summary of what is needed to do anything you want with fonts. The origins of this article come from the need to embed special fonts in a web page and all the issues that arise.

Some Choices on How to Do It

• If you're using a Windows computer, search the internet for TTF fonts you want, check them out, play with them, etc.
• A great PlugIn to use in WordPress, but one needs to have tools to convert fonts to various formats (TTF, WOFF, WOFF, OTF, etc.): Custom Fonts (WordPress, Appearance, Custom Fonts)
• A good PlugIn to use for uploading fonts to WordPress (saves the trouble of coding the style.css file by hand, but does NOT included it in the TinyMCE dropdown)
  • A great tool for converting and manipulating fonts (But only works for certain themes, not in Pages or Posts): Font Forge
    • File, Generate: To select different formats
    • Element, Font Info: To change various meta information
    • It will walk you through steps / give hints if settings need to be changed for specific formats
  • A great tool if a TTF Font's "Font Embedability" needs to be changed (from say "Restricted" to "Editable" (which can be viewed by right clicking a TTF File, Details Tab): Embed.exe by Tom 7
  • A great tool for converting a TTF to an EOT font (hint, EOT is for Internet Explorer only, and since about version 9, IE can handle OFT and WOFF Fonts, so not a high need): https://www.fontsquirrel.com/tools/webfont-generator
    • And there are any number of other online websites that will convert fonts: https://onlinefontconverter.com/, etc.
• A great PlugIn to use in WordPress that makes it easy to do everything in one place (but you have to pay for it if using more than one font): Use Any Font (allows for adding via TinyMCE editor dropdown)
• Which Font to Use (some tips here)?: https://creativemarket.com/blog/the-missing-guide-to-font-formats
  • In the end, WOFF and OTF are the top picks.
• And there's the manual way: https://themeisle.com/blog/custom-fonts-wordpress/ (in the website Parent or Child Theme's style.css file);

@font-face {
font-family: WhatEverFontName;
src: url(https://WhatEverWebSite/WhatEverFileName.ttf);
font-weight: normal;
}

...and then it needs to be added into a Widget's style sheet, or a custom Class or ID for a SPAN or DIV Element (Hint: Apply a unique font with TinyMCE, then manually edit the name of the CSS font-style descriptor.

Best Method to Address the TinyMCE / Advanced Editor too

As of the beginning of 2021, there doesn't seem to be a PlugIn, besides Use Any Font, that will allow one to set a Font Style via the TinyMCE / Advanced Editor. So the solution is to do it manually. Below is the necessary information (without being as long winded as so many other sites that include everything from finding a font to the step by step procedure for uploading it, not making a criticism, because they are quite complete).

The following example uses a font titled Underwood Quiet Tab and was based off of a TTF file from

In a Parent or Child Theme's function.php file add the following code (modifying the font name (Underwood QT / UnderwoodQuietTab) as needed);

/*
 * The following two Functions are for adding custom Fonts to the TinyMCE Editor / Advanced Editor (from the /wp-content/Fonts_Additional Directory)
 */

function load_custom_fonts($init)

	{

    $stylesheet_url = '/wp-content/Fonts_Additional/fonts_additional.css';

    if(empty($init['content_css'])) {
        $init['content_css'] = $stylesheet_url;
    } else {
        $init['content_css'] = $init['content_css'].','.$stylesheet_url;
    }

    $font_formats = isset($init['font_formats']) ? $init['font_formats'] : 'Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats';

    $custom_fonts = ';'.'Underwood QT=UnderwoodQuietTab;';

    $init['font_formats'] = $font_formats . $custom_fonts;

    return $init;
	}

add_filter('tiny_mce_before_init', 'load_custom_fonts');



/*
 * The below Function loads the Custom CSS File that makes it possible for a Public User to see the font in their Web Browswer;
 */

function load_custom_fonts_frontend()
	{
    echo '<link type="text/css" rel="stylesheet" href="/wp-content/Fonts_Additional/fonts_additional.css">';
	}

add_action('wp_enqueue_scripts', 'load_custom_fonts_frontend');
add_action('admin_enqueue_scripts', 'load_custom_fonts_frontend');

The following code should be copied into a *.css file (can be in the same directory or a different one than the font files, make sure to adjust the path in the functions.php file to reflect this), fonts.css for the below example (this is an arbitrary name and can be anything as long as it is reflected in the above functions.php file too) (The font name and different types of font files to be included can be modified). There are other examples of the CSS code / directives, but the following seemed to be the most complete, addressing everything from Internet Explorer 8 and up (which is quite a lot).

@font-face{
  font-family: 'UnderwoodQuietTab';
  src: url('/wp-content/Fonts_Additional/UnderwoodQuietTab.eot');
  src: url('/wp-content/Fonts_Additional/UnderwoodQuietTab.eot?#iefix') format('embedded-opentype'),
  url('/wp-content/Fonts_Additional/UnderwoodQuietTab.woff') format('woff'),
  url('/wp-content/Fonts_Additional/UnderwoodQuietTab.ttf') format('truetype'),
  url('/wp-content/Fonts_Additional/UnderwoodQuietTab.otf') format('opentype');
}

The TinyMCE / Advanced Editor information is based on information from: http://learn.wpeditpro.com/adding-new-wordpress-tinymce-fonts/, with some modification made in consideration of relative URL paths, etc. The CSS code is based on information from here:https://stackoverflow.com/questions/38809359/custom-font-on-wordpress-not-working Thank you to all of the people involved with that.