Post Dg9fbxfsp2W

Fiona Jallings Dec 11, 2017 (21:17)

One thing that we need to improve as a community is our abilities to add Tengwar, Sarati, and Cirth transcriptions to our websites. It's not possible on social media websites, we can accept that, but on our own websites it's possible. Some of us have the knowledge and ability to do it, but most of us are luddites. We need to set up really simple ways to do this that non-code-literate folks can use.

This means:
1. Step by step instructions.
2. Setting up remote hosting for the fonts for those who can't just install it on their own servers.
3. Building plugins for the more popular website building tools like WordPress.

Tamas Ferencz Dec 11, 2017 (23:47)

Such plugins exist for Drupal, I used one myself on Aglardh when it was still up and running, so maybe there's something out there for WordPress, too. Also, embedded webfonts make it relatively easy to include non-standard typefaces on websites now.

Severin Zahler Dec 12, 2017 (04:59)

I can provide a tutorial for those who want / can enable custom css. Most of the common CMS (wordpress and others) should be able to embed custom CSS. One example on my page: - - Anfrageformular (I will most likely however replace the fonts there with images, as this page requires loading around 30 entire fonts, which is a lot of data)

I'm happy to assist anyone who wants to embed tengwar on their webpage, should not be too difficult in most cases

Severin Zahler Dec 12, 2017 (05:03)

I might be able to offer remote hosting of the fonts, but it's a bit the question of that it would be against the terms of the creators, who usually demand that the fonts are shared in packaged form with all readme's only

Tamas Ferencz Dec 12, 2017 (09:16)

Fiona Jallings Dec 12, 2017 (10:14)

+Severin Zahler a tutorial would be great! I'm only half-literate in website management and part of why I brought it up is because I don't know how to do it myself.

Tamas Ferencz Dec 12, 2017 (13:48)

Also, in my opinion, the existing popular Tengwar typefaces are excellent works, but there is still room for a Tengwar typeface that scales well, and retains legibility and readability even at smaller sizes typically used in body text. You know, the Verdana of Tengwar. This is something that has interested me for a long time now, and I even started playing around in FontForge, but I simply lack the graphic skills to pull it off.

j. mach Wust Dec 12, 2017 (22:12)

Hi Fiona. This is something I would love to help you with. I have played around with Wordpress myself. Not only is it possible to use tengwar in your posts – you can even enable tengwar in comments, and in the textfields where people write their comments.

Fiona Jallings Dec 12, 2017 (22:51)

+j. mach Wust Yes, please help me with this! PM me, and let's build a tutorial for everyone so we can spread the Tengwar fluency!

Fiona Jallings Dec 12, 2017 (22:54)

Also I have been bashing my head against this problem for ages and I know I am probably making novice mistakes somewhere along the line but because I only know a little code I don't know where I am messing up.

Severin Zahler Dec 17, 2017 (13:24)

Okay here's a quick tutorial for how to embed custom fonts the easiest way, which also should work on pretty much any CMS there is:

* Step 1: Add an "HTML" or "Custom Widget" or similar element using the website builder of your CMS (in my case I use the Elementor plugin for Wordpress).
* Step 2: Add the following code:

`Cj¸# Á

This will insert a paragraph that says "Alla!" in Tengwar. All elements on the page you embed this code and have [class="tng-an"] on them will be displayed as Tengwar.

In my editor this would look like this:

Severin Zahler Dec 17, 2017 (13:33)

Now you can also apply Tengwar to existing elements without having to write them as code, however the procedure there differs between different CMS and types of elements and exact needs.

Simple things can be to i.e. change all second headings (

-Tags) on the page to Tengwar, for this write in the HTML-element inside the

`Cj¸# Á

Severin Zahler Dec 17, 2017 (13:37)

And then hopefully the page looks like this:

Severin Zahler Dec 17, 2017 (13:39)

Sorry for the spam, but can only add one picture per comment ;)

So, as you see with the form example, many things are possible, but depending on what you want the way to achieve it may be very different. So writing a tutorial that's working for many situations and CMS may be difficult. Best you describe concretely what exactly you want and then I may be able to tell you what to do to achieve it.

I censored the URL to the font for now, it leads to my own WIP page, that's for two reasons:
- I would be happy to host the fonts for everyone making websites out there, but I want to respect the terms put up by the font creators, and these usually do not allow sharing the fonts without the documentation / readme files or for commercial use; and i could not control whether the fonts hosted by me would be used commercially or not.
- The URL is temporary only, as soon as the new page replaces the old one the URL will change again (and all external implementations of the fonts will break)

Tamas Ferencz Dec 17, 2017 (14:17)

+Severin Zahler wonderful - would you consider collating all that is a single Google Doc on your Drive and share it here?

Tamas Ferencz Dec 17, 2017 (14:32)

Here's a sample of the Tengwar typeface I've been working on - this is how far I have got. If anyone wants to take it an run away with it, work on it further & improve it, just let me know, happy to share the FontForge file - TengwarModerSans_sample_Dec17.pdf

Severin Zahler Dec 17, 2017 (15:42)

Alright, elaborated a bit and wrote down some more methods to get it working for hopefully quite many environments:

Severin Zahler Dec 17, 2017 (15:47)

I'd be willing to share the link to the fonts I am hosting, but you...
- need to contact me personally at severin.zahler(at)
- need to confirm to me that you are respecting the font's terms
- provide links to the font's original publication place, where the entire package can be downloaded (if available).

The fonts that I gathered so far and that I can provide are listed here: - - Anfrageformular

j. mach Wust Dec 18, 2017 (13:42)

We have used two different methods over on :

1. The font encodes the tengwar in the PUA of Unicode. This has the benefit that it cannot possible clash with other characters. Therefore, the tengwar can be added globally to the entire site without the need of defining any extra classes or tags. All you need to do is adding the following line to the CSS:

* {font-family: FreeMonoTengwar, Roboto, Helvetica Neue, Helvetica, sans-serif !important;}

2. The tengwar font has been added within the CSS file itself, in base64 encoding. The benefit (and only reason why you would want to do this) is that you need not uploading any separate files or worry about hosting the font. The drawback is that the CSS file becomes considerably larger (comparable to a medium-sized picture). Here is the link to the stylesheet that includes the font: - Mellyn Lammath • Anmelden

Severin Zahler Dec 18, 2017 (15:57)

+j. mach Wust Oh nice one with adding the binary data right into the CSS file, did not know that was possible :) I don't think it matters whether you store the font externally and load it from there or add it to the CSS as data, the size should be equal, at last it's the same data.
The thing with the global CSS only works if you have full access to the HTML and CSS files, which is usually not the case with CMS's (as Fiona is using). However some offer the possibility to modify global CSS or access a page's header and similar.