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.

• 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.

Chosen Method

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).

In a Parent or Child Theme's function.php file;

/*
 * The following two Functions are for adding custom Fonts to the TinyMCE 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');

All of this 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., so thank you to that person.