Add a text to an image
Add a text to an image
Creative
Layers
Code
Intermediate

Add dynamic text on top of any image, on-the-fly. You can use any one of the hundreds of fonts available by Google Fonts, or even use your own custom font. Embed the text by setting the overlay parameter (l in URLs) to text<text_params>.

Cloudinary can generate an image from a text string. This is done dynamically on-the-fly in the cloud. You can either dynamically generate the text style, or define and name a text style in advance and use it later in your transformations.

Here's an original image example: Original

Dynamically generate a text style:

You can generate a text style dynamically, setting its font family, size, decoration and weight.

Here's an example of a URL with an on-the-fly generated text style:
Dynamic style

You can also set the color parameter (co in URLs) to dynamically color the font to any required color:
Colored text

Pre-defining a text style:

You can generate a text style in advance, give it a nice, SEO friendly name, and re-use it for your future transformations. When generating a text style, in additional to its basic settings (font family, size, decoration and weight), you can also specify many additional parameters.
Text styles can be easily generated via the API with our integration libraries. For example:


cloudinary.uploader.text("Sample Name", function(result) { console.log(result) },
                          {
                            public_id: "dark_name",
                            font_family: "Arial", font_size: 12,
                            font_color: "black", opacity: 90
                          });

After the text style has been created, any custom text string can be generated as a text overlay.

Here's an example of having a custom text string used by the helv_bd_24_blue pre-defined text style:
Pre-defined style

Have a look at the following blog posts for more information about adding overlays (texts and images) with Cloudinary:
Adding watermarks, credits, badges and text overlays to images
How to overlay text on image easily, pixel perfect and with no CSS/HTML