CSS - Translate/Transform Text

Written by kaixabu

A few people have asked how I accomplished the hover translation on my world. There are many ways to accomplish this, some simpler and some a lot more advanced than mine, but here was MY process.
Example: El-sod Elohin Homepage
The main body text appears in a script-like font. But when you hover over it, the text shows the translation in English.
Note: This is not a true translation, although that can be done using containers with the different text in them and showing on or the other based on hover.
Subscription Level: Grandmaster
Resources: Fonts in the World Anvil Codex

The steps

Setup your Fonts

I used my base text font (MBBody in code) for the translation and a font called WspElvenolati-RpLE.ttf for the "script" font (MorganEL). I set a backup font (MorganFB) called Astrologics-Regular.ttf since the main script font sometimes does not render on mobile devices.

@font-face {
   font-family: MBBody;
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: url(https://fonts.gstatic.com/s/comicneue/v8/4UaHrEJDsxBrF37olUeD96rp5w.woff2
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }


@font-face {
  font-family: MorganEl; 
  font-style: normal; 
  font-weight: 400; 
  src: url(https://rawcdn.githack.com/kaixabu/fonts/8f5f828c365d8f152882dc3bd3cd6c21657d4933/WspElvenolati-RpLE.ttf) ; 
 }
 
 @font-face {
   font-family: MorganFB;
   font-style: normal;
   font-weight: 400;
   src: url(https://rawcdn.githack.com/kaixabu/fonts/11d340267f5e59deac708f406ce876348f7ac381/Astrologics-Regular.ttf
 }
 

The CSS

Next I created a custom container for the default and the hover effect.

.user-css .ninsutext {
   font-style: normal;
   font-family: MorganEl, MorganFB;
   font-size: 17.25px;
 }
 
.user-css .ninsutext:hover {
   font-family: MBBody;
 }

Applying the Custom Container

Next I applied the font as a section. Note I had to add spaces after the first [ and the last ] to display it below. Make sure you remove those extra spaces.

[ section:ninsutext]Your text here[/section ]

4. Test and adjust I had to play with the font-size until I found a good size that didn't jump the transition text too much.