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:
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:
You can also set the color
parameter (co
in URLs) to dynamically color the font to any required color:
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:
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