Fonts and Having it Your Way: Difference between revisions

Line 3:

*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 great tool for converting and manipulating fonts: [https://fontforge.org/docs/faq.html#faq-dsig Font Forge]

*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): [https://fontforge.org/docs/faq.html#faq-dsig Font Forge]

***File, Generate: To select different formats

***Element, Font Info: To change various meta information

Line 10:

Line 11:

**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): Use Any Font

*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;

}

</syntaxhighlight>...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;<syntaxhighlight lang="text">

/*

* 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');

</syntaxhighlight>

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.

@@ Line 3: / Line 3: @@
 *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 great tool for converting and manipulating fonts: [https://fontforge.org/docs/faq.html#faq-dsig Font Forge]
+*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): [https://fontforge.org/docs/faq.html#faq-dsig Font Forge]
 ***File, Generate: To select different formats
 ***Element, Font Info: To change various meta information
@@ Line 10: / Line 11: @@
 **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): Use Any Font
+*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);
+<syntaxhighlight lang="text">
+@font-face {
+font-family: WhatEverFontName;
+src: url(https://WhatEverWebSite/WhatEverFileName.ttf);
+font-weight: normal;
+}
+</syntaxhighlight>...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;<syntaxhighlight lang="text">
+/*
+ * 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');
+</syntaxhighlight>
+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.