Wordpress Typostyler
Home
Info Table List Wordpress

eighteen in one font

𝓦𝓮𝓵𝓬𝓸𝓶𝓮
wix.com
The Website-Cloud.
𝔅𝔩𝔬𝔤𝔤𝔢𝔯

Tutorial for Wordpress

It is possible to use the eighteen in one font in Wordpress, but on older systems it needs some extra features and attention.

Step by step

1.) Upload the "FreeSerifMath.ttf" font file to your webhost.

You can not upload files to your web host? Follow point 4.2 and before that point 4.1 on this page.

2.) CSS rules
Use the following CSS code with a unique specific CSS class attribute on your Theme.
You can put it in your Wordpress over the admin area sidebar Appearance → Customize → Additional CSS.

CSS
@font-face {
font-family: FreeSerifMath;
src: url(https://www.example.com/path/to/the/FreeSerifMath.ttf);
}

Use a unique specific CSS class attribute.
CSS
.eigtheeninonefont {
font-family: FreeSerifMath;
}

Use the unique specific CSS class attribute in the editors "Text" mode.
HTML
<span class="eigtheeninonefont">๐•„๐•ช ๐•ค๐•ฅ๐•ช๐•๐•–๐•• ๐•ฅ๐•–๐•ฉ๐•ฅ ๐•“๐•๐• ๐•”๐•œ.</span>

Please notice: It is possible that they will not see the copied characters in their editor if the font is not enabled in their editor. But that is not necessary. The characters are then not displayed in the editor, or just placeholder, but on the web page they are seen. Alternatively, you can install the font on your operating system.

3.) Wordpress on older systems

Important: Save/Update an article or page only in the editor "Text" mode! If you switch between the editor "Visual" and "Text" mode and are back in "Text" mode, then press "F5" on your keyboard before you re-style the article or page or add new text or save/update it. Text → Visual → Text → F5!


NoteFor older Wordpress installations with documents not in UTF-8 and/or databases that do not support utf8mb4, please read the info page point 4.

4.) Special Features for Wordpress

4.1) Wordpress Child Theme
A Wordpress child theme is required.
Make a Wordpress Child Theme with a functions.php.

Note: For this example the parent theme is "twentyseventeen".

Create the folder:
/wp-content/themes/twentyseventeen-child

Insert into the folder two new empty files with the filenames:
/wp-content/themes/twentyseventeen-child/style.css
/wp-content/themes/twentyseventeen-child/functions.php

Add the following code in the:
/wp-content/themes/twentyseventeen-child/style.css
CSS
/*
Theme Name: twentyseventeen-child
Template: twentyseventeen
*/

Add the following code in the:
/wp-content/themes/twentyseventeen-child/functions.php
PHP
<?php

Activate the child theme over the admin area sidebar menu:
Appearance → Themes → twentyseventeen-child → Activate

4.2) Upload font files to the Wordpress Media Library
Use the Wordpress Media Library with the following feature to upload the font.

Add the following PHP code in the:
/wp-content/themes/twentyseventeen-child/functions.php
PHP
// add new mime types for upload as media in the Media Library.
function add_new_mime_types($new_mime_types){
$new_mime_types['ttf'] = 'application/x-font-ttf';
return $new_mime_types;
}
add_filter('upload_mimes', 'add_new_mime_types', 1, 1);

Now you can upload font files to the Media Library and use the path to the font file for the CSS @font-face rule.
CSS
@font-face {
font-family: FreeSerifMath;
src: url(/wp-content/uploads/2017/12/FreeSerifMath.ttf);
}


4.3) Text editor quicktag button
Create a special quicktag button for the text editor with the name "span 18in1".

Add the following PHP code in the:
/wp-content/themes/twentyseventeen-child/functions.php
PHP and Javascript
// add more quicktag buttons to the html editor
function htmleditor_add_quicktag() {
if (wp_script_is('quicktags')){
?>
<script>
QTags.addButton( 'span', 'span 18in1', '<span class="eigtheeninonefont">', '</span>', 'span', 'span tag 18in1', 100 );
</script>
<?php
}
}
add_action( 'admin_print_footer_scripts', 'htmleditor_add_quicktag' );

You can find the new button in the editors Text mode Toolbar (Fourth from the right):
The button "span 18in1" create on the first click a opened span tag with the class "eigtheeninonefont" ... ... and on the second click the closed span tag.

Wordpress Screenshot Gallery Tutorial

Go in the Wordpress Media Library and upload the font.
Is it not possible to upload fonts in the Wordpress Media Library, make a child theme and add the add_new_mime_types() function into the functions.php.
With a Wordpress child theme and the add_new_mime_types() function in the functions.php, you can upload fonts in the Wordpress Media Library.
A click on the Media FreeSerifMath.ttf will open the Wordpress Attachments Details.
In the Wordpress Attachments Details copy the URL to the FreeSerifMath.ttf.
Go to the Wordpress Appearance → Customize for adding the CSS rules.
Go to the Wordpress Additional CSS for adding the CSS rules.
Go to the Wordpress Additional CSS for adding the CSS rules.
Yet, you can use the font chars in plain text with a HTML span tag and the CSS class in Wordpress articles and pages.
A Wordpress page with the font chars in plain text.
For older Wordpress installation on older databases without utf8mb4, you can use the styled text in HTML hexadecimal codes.
A Wordpress page with the font chars in plain text (Phrase) and HTML hexadecimal codes (Alphabet).
Support Penultima.de
PayPal Gefรคllt Mir Button
© Penultima.de - All rights reserved. Data protection statement & Imprint & Contact
Cookies in use.
More Infos