# Randomize font for field?

**URL:** <https://forums.ankiweb.net/t/randomize-font-for-field/7635>\
**Category:** Help\
**Created:** [February 19, 2021, 3:01pm UTC](https://forums.ankiweb.net/t/randomize-font-for-field/7635 "2021-02-19T15:01:42Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![yaoberh](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/yaoberh/32/7505_2.png) [@yaoberh](https://forums.ankiweb.net/u/yaoberh)\
**Post date:** [February 19, 2021, 3:01pm UTC](https://forums.ankiweb.net/t/randomize-font-for-field/7635/1 "2021-02-19T15:01:42Z")

</div>

Is it possible to randomize font color for each word/letter of a field?  
I have managed to make it work somewhat but it isn’t consistent. Sometimes it bugs out and throws me black fonts until I close and reopen anki.  
Does anyone know of a script or css styling to do this?

---

<div class="post-metadata">

**Author:** ![hkr](https://avatars.discourse-cdn.com/v4/letter/h/c6cbf5/32.png) [@hkr](https://forums.ankiweb.net/u/hkr)\
**Post date:** [February 19, 2021, 5:42pm UTC](https://forums.ankiweb.net/t/randomize-font-for-field/7635/2 "2021-02-19T17:42:06Z")

</div>

Here is a quick example of how to give a different color for each letter in a field. Each color is chosen from lighter colors when night mode is enabled, and from darker colors otherwise.

```auto
<div id="front-field" hidden>{{Front}}</div>
<script>
    var fieldID = "front-field";
    var randomHsl = (isNightMode) => {
        const hue = (Math.random() * 361) | 0;
        const saturation = (Math.random() * 101) | 0;
        let lightness = (Math.random() * 51) | 0;
        if (isNightMode) {
            lightness += 50;
        }
        return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
    };
    var colorizeEachChar = (fieldId) => {
        const text = document.getElementById(fieldId).textContent;
        const nightMode = document.body.classList.contains("night_mode");
        const resultArray = [];
        for (const char of text) {
            if (/\S/.test(char)) {
                resultArray.push(
                    `<span style="color: ${randomHsl(nightMode)};">${char}</span>`
                );
            } else {
                resultArray.push(" ");
            }
        }
        return resultArray.join("");
    };
    setTimeout(() => {
        const ele = document.getElementById(fieldID);
        ele.innerHTML = colorizeEachChar(fieldID);
        ele.hidden = false;
    }, 0);
</script>

```

 ![random_color_char](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/c/ce8ca362a47e6cd524b6f369200d512c15beab53.png)

---

<div class="post-metadata">

**Author:** ![yaoberh](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/yaoberh/32/7505_2.png) [@yaoberh](https://forums.ankiweb.net/u/yaoberh)\
**Post date:** [February 20, 2021, 9:21pm UTC](https://forums.ankiweb.net/t/randomize-font-for-field/7635/3 "2021-02-20T21:21:23Z")

</div>

Works wonderfully! Thanks so much.

---

<div class="post-metadata">

**Author:** ![yaoberh](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/yaoberh/32/7505_2.png) [@yaoberh](https://forums.ankiweb.net/u/yaoberh)\
**Post date:** [March 17, 2021, 2:07pm UTC](https://forums.ankiweb.net/t/randomize-font-for-field/7635/4 "2021-03-17T14:07:35Z")

</div>

Is it possible to implement this for multiple fields? When I try to add more fields it randomizes only one at a time and the other one stays black. It always randomizes the same one too.  
This is my current “mega random” script which randomizes everything including the font:

> **[random all anki - Pastebin.com](https://pastebin.com/XsBf5ABL)**
>
> Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/1X/8f1279ababc5879d54e4838989f606cfe55af8c7.jpeg) [@system](https://forums.ankiweb.net/u/system)\
**Post date:** [May 1, 2023, 5:10am UTC](https://forums.ankiweb.net/t/randomize-font-for-field/7635/5 "2023-05-01T05:10:36Z")

</div>