Need to create a colorful font

I think is possible but I can't find out how.
I want to color some fonts and then add them to my site and use them as a logo.
No, I don't need any gradient effect with CSS, I want exactly what I ask.
For example, I want to make the font Ravie multicolor - each later a different color.
So, the question is how to create a colorful font.
And what color put to it in CSS to not overlay it?
Thanks.

 

Not sure if it's compatible with every device, but you can try "font color":

https://jsfiddle.net/z7wc1Lmh/1/

   
    <h1>
    <font color="#FF2626">W</font>
    <font color="#252A34">h</font>
    <font color="#753422">a</font>
    <font color="#FFD523">t's</font>
    <font color="#71EFA3">u</font>
    <font color="#0F52BA">p</font>
    <font color="#66CC66">D</font>
    <font color="#FF9966">u</font>
    <font color="#FFCCCC">d</font>
    <font color="#00C1D4">e</font>
    <font color="#EFE3D0">?</font>
    </h1>
    </h1>

Code (markup):

 

No, I need exactly a colorful font

 

At the moment I need to colorize only the Ravie font.
I will colorize several more fonts later, but for now I only need Ravie.
The font will work properly on the site if I use @font-face.
I already have the Ravie font integrated as a site title, but I am using a gradient - check it here: TanzaniaTravelGuide.com

Why do I need it?
Mainly for my Mexico-related site, where I currently have colored logos as site titles.
All logos are .png images and I used the Ravie font.
For example, RivieraMayaTravelGuide(.com), TijuanaCity(.com), PueblaCity(.com), etc.
I will keep a similar design for all these sites, but will use my own theme, where I want to get all the elements right.
And I think it is best to use an integrated font for the logo.

 

Thanks, but all this is not what I want, it is too complicated, and I don't mean difficult, just complex.
The solution must be simple and universal.
And I think, I found it, but I still don't understand how to realize it.
Ok, I found one of the solutions, but I don't like it, but it is much better than you suggest.

I asked GPT to create a plugin and adapt the linear-gradient property to my request:

<?php
/**
* Plugin Name: Custom Multicolor Text Effect
* Description: Adds a multicolor effect to the class "multicolor-text"
*/

// Enqueue the JavaScript file
function custom_multicolor_plugin_script() {
    ?>
    <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", function () {
            // Apply multicolor effect to elements with .multicolor (or your custom selector)
            const applyMulticolor = () => {
                const elements = document.querySelectorAll('.multicolor-text'); // Target any element with this class

                elements.forEach(element => {
                    const text = element.textContent.trim();
                    let coloredText = '';
                    const colors = ['red', 'yellow', 'green', 'blue', 'purple']; // Add your colors here
                    let colorIndex = 0;

                    // Wrap each character with a span to apply different colors
                    for (let i = 0; i < text.length; i++) {
                        const color = colors[colorIndex % colors.length];
                        coloredText += `<span style="color: ${color};">${text[i]}</span>`;
                        colorIndex++;
                    }

                    element.innerHTML = coloredText;
                });
            };

            applyMulticolor(); // Apply the effect when the document is ready
        });
    </script>
    <?php
}

// Hook the script into WordPress footer
add_action('wp_footer', 'custom_multicolor_plugin_script');

Code (markup):

As you can see, the linear-gradient property for the "multicolor-text" class adapts its effect to my request.

This happens only for the class "multicolor-text".
For any other class, the linear-gradient property has its default gradient effect.

.multicolor-text {
color: transparent;
background: linear-gradient(to left, red, orange, green, blue, purple);
-webkit-background-clip: text;
background-clip: text;
}

*Mentioning the colors in the CSS is not necessary since all the colors are already specified in the plugin, but I added the colors just to show how it works.

You can check it on this site, it works (see the site's title):
https://tanzaniatravelguide.com/
Don't comment "it looks awful" because I need this effect not for this site, I just test it there.

But...
However, I would prefer to create a new CSS parameter called multicolor where I could add colors via CSS and not mention each color in the plugin.
However, the above solution is the best alternative I could find at the moment.

.

 

I made a better update, and now is possible to control and assign colors from CSS.
The updated plugin:

<?php
/**
* Plugin Name: Custom Multicolor Text Effect
* Description: Customize the linear-gradient effect to the "multicolor-text" class.
*/

// Enqueue the JavaScript file to handle text coloring
function custom_multicolor_plugin_script() {
    ?>
    <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", function () {
            // Apply the multicolor effect
            const applyMulticolor = () => {
                const elements = document.querySelectorAll('.multicolor-text'); // Target elements with the class

                elements.forEach(element => {
                    const text = element.textContent.trim();
                    let coloredText = '';

                    // Get colors from CSS custom properties (variables)
                    const rootStyles = getComputedStyle(document.documentElement);
                    const colors = [];

                    // Dynamically collect colors from the :root CSS variables
                    for (let i = 1; i <= 20; i++) { // Adjust the number 20 if needed
                        const color = rootStyles.getPropertyValue(`--color-${i}`).trim();
                        if (color) {
                            colors.push(color);
                        }
                    }

                    let colorIndex = 0;

                    // Wrap each character with a span to apply different colors
                    for (let i = 0; i < text.length; i++) {
                        const char = text[i];
  
                        if (char === ' ') {
                            // Preserve spaces without assigning a color
                            coloredText += ' ';
                        } else {
                            const color = colors[colorIndex % colors.length]; // Cycle through colors
                            coloredText += `<span style="color: ${color};">${char}</span>`;
                            colorIndex++;
                        }
                    }

                    element.innerHTML = coloredText;
                });
            };

            applyMulticolor(); // Apply the effect when the document is ready
        });
    </script>
    <?php
}

// Hook the script into the WordPress footer
add_action('wp_footer', 'custom_multicolor_plugin_script');
?>

PHP:

And the CSS is:

.multicolor-text {
text-decoration: none;
color: transparent;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}

:root {
--color-1: #046913;
--color-2: #A60071;
--color-3: #2132A6;
--color-4: #9D3BA6;
--color-5: #A6242C;
--color-6: #1E6134;
--color-7: #8578FF;
--color-8: #FF7146;
}

Code (CSS):

Check it here on the site title:
https://tanzaniatravelguide.com/

Colors can also be assigned by using words red, blue, etc.

:root {
--color-1: red;
--color-2: blue;
--color-3: orange
--color-4: green;
--color-5: yellow;
}

Code (CSS):

It will not affect any other classes, this modification will work only for "multicolor-text" class.

<div class="multicolor-text">
     <a href="<?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a>
</div>

PHP:

It's a pity that CSS doesn't have such an option and we need to figure out how to get around it.
They need to add a "multicolor option" instead of a gradient because the gradient is so 90's.
It's good for logo - @font-face + multicolor - are much better than create logo images.

 

This is also universal, because I can assign the multicolor-text as class to the site's title in header.php and use the same template for any site, even if I don't need there a multicolor effect.
All I ned is just use in style.css 1 color for those sites, it will be the same as just color property.

.multicolor-text {
text-decoration: none;
color: transparent;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}

:root {
--color-1: white; // or green, or black, or red, etc
}

Code (CSS):

 

No, it's not the same solution.
This way, I can use the same theme for many sites without opening header.php and adding there a color to each character.
Yes, each site is a little bit different from another one, but I can change each site using only a CSS file in a child theme.
That's why I need a more universal solution than writing the site title in the header.php of each site.
Now, I only need to add this to style.css and chose a different colors and fonts for each site:

.multicolor-text {
text-decoration: none;
color: transparent;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}

:root {
--color-1: green;
--color-1: orange;
--color-1: red;
--color-1: blue;
}

Code (CSS):

Or just 1 color if I don't need a multicolor effect:

.multicolor-text {
text-decoration: none;
color: transparent;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}

:root {
--color-1: black; // or white, or blue, or green, etc
}

Code (CSS):

Yes, I still call the class "multicolor-text" even if I don't need this effect.
.

 

When I said I wanted it simple, I meant more universal, something that will adapt to any occasion.
I think maybe would be better to name the class for this effect "site-title" and not "multicolor-text" since I will use it only for site titles.
Some sites' titles and not for each of my sites.

 

I don't get exactly what you mean, but I have a main theme + child theme.
The main theme is universal and suits each site.
The child theme consists only of files I need to modify according to a new site design and needs.
For example, the child theme has style.css, mail-form.php, and a few PHP files.
When I activate the theme on a new site, I just check all PHP files in the child theme, so I always know what exactly I need to modify.
My style.css of the child theme has only elements with color and font properties.
I don't have margin, padding, and the rest of the properties in my child theme css.
All these are in the main style.css which is the same for each site.

This is a part of my style.css from a child theme, as you can see, there are only elements with color and I need only these elements to modify each new site.
Header, menu-bar, site-title, sidebars' elements, footer, etc - all elements have only color properties.
The rest of the properties are in the main style.css
I can't "go full bore" and forgot to add a specific font and color.

/* SITE TITLE (MULTICOLOR) */

.multicolor-text {
font-family: 'Hobo Std', Arial, sans-serif;
font-size: 1.4rem;
padding: 13px 0px 11px;
}

.multicolor-text a {
text-decoration: none;
color: transparent;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}

:root {
--color-1: #FFF;
}

/* NAVIGATION MENU */

.menu-bar li a {
color: #FFF !important;
}


/* SIDEBAR MENU - RESPONSIVE MENU */

@media (max-width: 815px) {
.menu-toggle {
color: #FFF !important;
}
}

.sidebar {
background-color: #113653 !important;
outline: 2px #FFFFFF24 solid !important;
}

.sidebar-menu li {
border-bottom: 1px solid #FFFFFF4D !important;
}

.sidebar-menu li a {
color: white !important;
border-bottom: 1px solid #FFFFFF4D !important;
}

.close-sidebar {
color: white !important;
}

Code (CSS):

 

I already have integrated all the fonts I need.
So, when I create a new site, I just read a short style.css from the child theme which has less than 200 lines.
I change the font name if I need to, and colors.

I have tested the theme on a few of my sites.
Thsi is the same theme, I only change the font and the color in the child theme css.

• BestDubaiTours
• GreeceTouristGuide
• MongoliaTravelGuide
• PeruTouristGuide
• SeoFriendlyDomains
• TanzaniaTravelGuide

Add .com to each domain.
.

 

I am an idiot! I recognize it.
The solution is too simple and too elegant.
I just must use the standard gradient effect in CSS.
The script that converts the rainbow effect into a multi-color one is implemented by activating the plugin with the script.
That's all.
I can turn this effect on and turn it off if I don't need it.
.

 

انواع شیر کشویی در سایت آهن پرایس
https://ahanprice.com/Price/%D8%B4%DB%8C%D8%B1-%DA%A9%D8%B4%D9%88%DB%8C%DB%8C