# Number counter, wrong font color

**URL:** <https://community.elfsight.com/t/number-counter-wrong-font-color/116536>\
**Category:** Customization\
**Tags:** number-counter\
**Created:** [April 26, 2025, 12:02pm UTC](https://community.elfsight.com/t/number-counter-wrong-font-color/116536 "2025-04-26T12:02:26Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![akreiden](https://avatars.discourse-cdn.com/v4/letter/a/8dc957/32.png) [@akreiden](https://community.elfsight.com/u/akreiden)\
**Post date:** [April 26, 2025, 12:02pm UTC](https://community.elfsight.com/t/number-counter-wrong-font-color/116536/1 "2025-04-26T12:02:26Z")

</div>

Hi there!

I started using the number counter on our page and everything seems to work fine, except for the color of the numbers. Within Elfdight, i.e. when playing with and creating the widget, the numbers have the correct color (green, see attached screenshot). But on the page where the widget is installed they are black.

Anyone can help with this?

Link to the page with the widget in question: [https://norlandiaforskolor.se](https://norlandiaforskolor.se)

 ![Screenshot 2025-04-26 at 14.01.42](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/5/a/5ace0c266f18b5bf7c754fb206a0f21135a45f87.png)

---

<div class="post-metadata">

**Author:** ![maxim](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/maxim/32/8562_2.png) [@maxim](https://community.elfsight.com/u/maxim)\
**Post date:** [April 26, 2025, 12:06pm UTC](https://community.elfsight.com/t/number-counter-wrong-font-color/116536/2 "2025-04-26T12:06:30Z")

</div>

Hello, @akreiden ! 👋

Add this code to the Custom CSS field:

```auto

.eapps-number-counter-number {
    color: green !important;
}

```

---

<div class="post-metadata">

**Author:** ![Sina](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/sina/32/59970_2.png) [@Sina](https://community.elfsight.com/u/Sina)\
**Post date:** [April 26, 2025, 5:07pm UTC](https://community.elfsight.com/t/number-counter-wrong-font-color/116536/3 "2025-04-26T17:07:16Z")

</div>

Hi @akreiden

The CSS class is influenced by your own bundle-css.css using the` <span>` tag.

![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/7/2/72dac1f20124783b47b43fd5da33b7b7d0da51ec.png)

add the code below to Custom CSS field on your [Number Counter](https://elfsight.com/number-counter-widget/) widget’s Style tab:

```auto
[class*="Counter__CounterComponent-sc"] span{
  color: rgb(97, 166, 14) !important;
}

```

Please try it out and let me know if you like the result

---

<div class="post-metadata">

**Author:** ![akreiden](https://avatars.discourse-cdn.com/v4/letter/a/8dc957/32.png) [@akreiden](https://community.elfsight.com/u/akreiden)\
**Post date:** [April 28, 2025, 6:30am UTC](https://community.elfsight.com/t/number-counter-wrong-font-color/116536/4 "2025-04-28T06:30:13Z")

</div>

@Sina this worked! Thanks so much!