1,723
edits
Difference between revisions of "Fonts and Having it Your Way"
Fonts and Having it Your Way (view source)
Revision as of 18:22, 13 January 2021
, 18:22, 13 January 2021no edit summary
m |
m |
||
| Line 23: | Line 23: | ||
</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. | </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 == | ==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). | 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 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);<syntaxhighlight lang="text"> | |||
/* | /* | ||
* The following two Functions are for adding custom Fonts to the TinyMCE Editor (from the /wp-content/Fonts_Additional Directory) | * The following two Functions are for adding custom Fonts to the TinyMCE Editor / Advanced Editor (from the /wp-content/Fonts_Additional Directory) | ||
*/ | */ | ||
| Line 67: | Line 69: | ||
add_action('wp_enqueue_scripts', 'load_custom_fonts_frontend'); | add_action('wp_enqueue_scripts', 'load_custom_fonts_frontend'); | ||
add_action('admin_enqueue_scripts', 'load_custom_fonts_frontend'); | add_action('admin_enqueue_scripts', 'load_custom_fonts_frontend'); | ||
</syntaxhighlight> | |||
The following code should be copied into the ''fonts.css'' file (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). <syntaxhighlight lang="text"> | |||
@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'); | |||
} | |||
</syntaxhighlight> | </syntaxhighlight> | ||
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. | |||