eighteen in one font

𝓦𝓮𝓵𝓬𝓸𝓶𝓮

𝕤𝕥𝕪𝕝𝕚𝕤𝕙

𝓑𝓵𝓸𝓰𝓰𝓮𝓻

The eighteen in one font has the file name "FreeSerifMath.ttf" and can be downloaded here.
The file packages have included a *.sfd file to edit the font with FontForge.

Package Information	Package link	Filesize	md5sum
FreeSerifMath.ttf in zip:	FreeSerifMath.zip	471 kb	7b5dedf761e99bd3ea94d889d78d4600
FreeSerifMath.ttf in tar.gz:	FreeSerifMath.tgz	491 kb	fdb2b843508841bc473814cbe6f8d4c5
FreeSerifMath.ttf in 7zip:	FreeSerifMath.7z	1358 kb	30fa13c255f821965a50af061884ad90
FreeSerifMath.ttf in tar:	FreeSerifMath.tar	1363 kb	2c6eaad7e72254edeaf40d5af4bd8b54

Tutorial for embedding the font

Requirement:

HTML5 in UTF-8 (saved and attributed) for chars in plain text
CSS3 at least (for @font-face)

When you use the chars in plain text, the document (*.html or *.php or similar) must be saved in UTF-8 and the charset UTF-8 must be attributed with <meta charset="UTF-8">.

On Content Management Systems:

Database with character set utf8mb4
Database tables with collation utf8mb4_unicode_ci

Alternatively, read point 4 on this page and the Wordpress Info page.

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

For Wordpress users who can not do that, please read the wordpress info page.

2.) CSS3 @font-face rule
Paste the CSS3 @font-face rule to the top of the css stylesheet file of your website and/or blog.
CSS

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

3.1a) CSS class attribute
Use a unique specific CSS class attribute in your CSS stylesheet for the font.
CSS

.eigtheeninonefont {
font-family: FreeSerifMath;
}

3.1b) CSS class attribute
Use the unique specific CSS class attribute in your HTML code with a HTML span Tag.
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
...
<span class="eigtheeninonefont">𝕄𝕪 𝕤𝕥𝕪𝕝𝕖𝕕 𝕥𝕖𝕩𝕥 𝕓𝕝𝕠𝕔𝕜.</span>
...
</body>
</html>

3.2) HTML style attribute
You must use single quotes, when you us it not with CSS class attribute, but with a HTML style attribute.
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
...
<span style="font-family: 'FreeSerifMath';">𝕄𝕪 𝕤𝕥𝕪𝕝𝕖𝕕 𝕥𝕖𝕩𝕥 𝕓𝕝𝕠𝕔𝕜.</span>
...
</body>
</html>

Please notice: It is possible that they will not see the copied characters in their HTML editor if the font is not enabled in their HTML editor (especially in a admin area). But that is not necessary. The characters are then not displayed or just placeholder, but on the web page they are seen. The best way to fix that is, install the font on your system.

4.) Alternative HTML hexadecimal code
If the document can not be saved in UTF-8, or can not get the attribute UTF-8, or the database can not utf8mb4, then alternatively the styled text in HTML hex code can be integrated into the website or blog. The HTML hexadecimal code will be decoded in plain text by the browsers.

For Wordpress please read the Wordpress Info-Page.

5.) Database check
Commands on the command line to check the database