> ## Documentation Index
> Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt
> Use this file to discover all available pages before exploring further.

# Custom fonts and advanced text options


This page covers custom fonts, Google Fonts, predefined text templates, and text layer flags for images. For styling parameters, color, multi-line text, and special characters, see [Text layer options](image_text_layers). For the layer syntax itself, see [Layer syntax](layers).

## Custom fonts

By default, only universally available fonts are supported for text overlays. However, if you want to use a non-standard font, you can upload it to Cloudinary as a [raw](upload_parameters#uploading_non_media_files_as_raw_files), [authenticated](upload_parameters#authenticated_assets) file and then specify the font's full `public_id` (including extension) as the font for your overlay:

```multi
|ruby 
Cloudinary::Uploader.upload("AlexBrush-Regular.ttf", 
	resource_type: 'raw',
	type: 'authenticated', 
	public_id: 'AlexBrush-Regular.ttf')

|php_2
use Cloudinary\Api\Upload\UploadApi;

(new UploadApi())->upload('AlexBrush-Regular.ttf', [
  'public_id' => 'AlexBrush-Regular.ttf',  
  'type' => 'authenticated', 
  'resource_type' => 'raw']);
    
  
|python
cloudinary.uploader.upload("AlexBrush-Regular.ttf", 
  public_id = "AlexBrush-Regular.ttf",
  type = "authenticated",  
  resource_type = "raw")

|nodejs
cloudinary.v2.uploader
.upload("AlexBrush-Regular.ttf", { 
  public_id: "AlexBrush-Regular.ttf", 
  type: "authenticated", 
  resource_type: "raw"})
.then(result=>console.log(result));
  
|java
Map params = ObjectUtils.asMap(
    "public_id", "AlexBrush-Regular.ttf", 
    "type", "authenticated",
    "resource_type", "raw");
Map uploadResult = cloudinary.uploader().upload(new File("AlexBrush-Regular.ttf"), params);

|csharp
var uploadParams = new RawUploadParams()
    {
        File = new FileDescription(@"AlexBrush-Regular.ttf"),        
        PublicId = "AlexBrush-Regular.ttf",
        Type = "authenticated"};
var uploadResult = cloudinary.Upload(uploadParams);

|android
MediaManager.get().upload("AlexBrush-Regular.ttf")
   .unsigned("preset1")
   .option("public_id", "AlexBrush-Regular.ttf")
   .option("type", "authenticated")
   .option("resource_type", "raw")
   .dispatch();

|swift
let params = CLDUploadRequestParams().setPublicId("AlexBrush-Regular.ttf")
let request = cloudinary.createUploader().upload(data: fileUrl, uploadPreset: "sample_preset", params: params)

|curl
curl https://api.cloudinary.com/v1_1/demo/image/upload -X POST --data 'file=AlexBrush-Regular.ttf&public_id="AlexBrush-Regular.ttf"&type=authenticated&resource_type="raw"&timestamp=173719931&api_key=436464676&signature=a788d68f86a6f868af'
```

![Custom font overlay](https://res.cloudinary.com/demo/image/upload/co_white,l_text:AlexBrush-Regular.ttf_100:Happy%2520New%2520Year/fl_layer_apply,g_north_west,x_30,y_30/fireworks.jpg "thumb: w_500")

```nodejs
cloudinary.image("fireworks.jpg", {transformation: [
  {color: "white", overlay: {font_family: "ttf", font_size: 100, text: "Happy%2520New%2520Year"}},
  {flags: "layer_apply", gravity: "north_west", x: 30, y: 30}
  ]})
```

```react
import { source } from "@cloudinary/url-gen/actions/overlay";
import { text } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("fireworks.jpg").overlay(
  source(
    text(
      "Happy%20New%20Year",
      new TextStyle("AlexBrush-Regular.ttf", 100)
    ).textColor("white")
  ).position(
    new Position()
      .gravity(compass("north_west"))
      .offsetX(30)
      .offsetY(30)
  )
);
```

```vue
import { source } from "@cloudinary/url-gen/actions/overlay";
import { text } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("fireworks.jpg").overlay(
  source(
    text(
      "Happy%20New%20Year",
      new TextStyle("AlexBrush-Regular.ttf", 100)
    ).textColor("white")
  ).position(
    new Position()
      .gravity(compass("north_west"))
      .offsetX(30)
      .offsetY(30)
  )
);
```

```angular
import { source } from "@cloudinary/url-gen/actions/overlay";
import { text } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("fireworks.jpg").overlay(
  source(
    text(
      "Happy%20New%20Year",
      new TextStyle("AlexBrush-Regular.ttf", 100)
    ).textColor("white")
  ).position(
    new Position()
      .gravity(compass("north_west"))
      .offsetX(30)
      .offsetY(30)
  )
);
```

```js
import { source } from "@cloudinary/url-gen/actions/overlay";
import { text } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("fireworks.jpg").overlay(
  source(
    text(
      "Happy%20New%20Year",
      new TextStyle("AlexBrush-Regular.ttf", 100)
    ).textColor("white")
  ).position(
    new Position()
      .gravity(compass("north_west"))
      .offsetX(30)
      .offsetY(30)
  )
);
```

```python
CloudinaryImage("fireworks.jpg").image(transformation=[
  {'color': "white", 'overlay': {'font_family': "ttf", 'font_size': 100, 'text': "Happy%2520New%2520Year"}},
  {'flags': "layer_apply", 'gravity': "north_west", 'x': 30, 'y': 30}
  ])
```

```php
use Cloudinary\Transformation\Overlay;
use Cloudinary\Transformation\Source;
use Cloudinary\Transformation\Position;
use Cloudinary\Transformation\TextStyle;
use Cloudinary\Transformation\Gravity;
use Cloudinary\Transformation\Compass;

(new ImageTag('fireworks.jpg'))
	->overlay(Overlay::source(
	Source::text("Happy%20New%20Year",(new TextStyle("AlexBrush-Regular.ttf",100)))
	->textColor(Color::WHITE)
	)
	->position((new Position())
	->gravity(
	Gravity::compass(
	Compass::northWest()))
->offsetX(30)
->offsetY(30))
	);
```

```java
cloudinary.url().transformation(new Transformation()
  .color("white").overlay(new TextLayer().fontFamily("ttf").fontSize(100).text("Happy%2520New%2520Year")).chain()
  .flags("layer_apply").gravity("north_west").x(30).y(30)).imageTag("fireworks.jpg");
```

```ruby
cl_image_tag("fireworks.jpg", transformation: [
  {color: "white", overlay: {font_family: "ttf", font_size: 100, text: "Happy%2520New%2520Year"}},
  {flags: "layer_apply", gravity: "north_west", x: 30, y: 30}
  ])
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Color("white").Overlay(new TextLayer().FontFamily("ttf").FontSize(100).Text("Happy%2520New%2520Year")).Chain()
  .Flags("layer_apply").Gravity("north_west").X(30).Y(30)).BuildImageTag("fireworks.jpg")
```

```dart
cloudinary.image('fireworks.jpg').transformation(Transformation()
	.addTransformation("co_white,l_text:AlexBrush-Regular.ttf_100:Happy%20New%20Year/fl_layer_apply,g_north_west,x_30,y_30"));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setColor("white").setOverlay("text:AlexBrush-Regular.ttf_100:Happy%2520New%2520Year").chain()
  .setFlags("layer_apply").setGravity("north_west").setX(30).setY(30)).generate("fireworks.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation()
  .color("white").overlay(new TextLayer().fontFamily("ttf").fontSize(100).text("Happy%2520New%2520Year")).chain()
  .flags("layer_apply").gravity("north_west").x(30).y(30)).generate("fireworks.jpg");
```

```flutter
cloudinary.image('fireworks.jpg').transformation(Transformation()
	.addTransformation("co_white,l_text:AlexBrush-Regular.ttf_100:Happy%20New%20Year/fl_layer_apply,g_north_west,x_30,y_30"));
```

```kotlin
cloudinary.image {
	publicId("fireworks.jpg")
	 overlay(Overlay.source(
	Source.text("Happy%20New%20Year",TextStyle("AlexBrush-Regular.ttf",100)) {
	 textColor(Color.WHITE)
	 }) {
	 position(Position() {
	 gravity(
	Gravity.compass(
	Compass.northWest()))
 offsetX(30)
 offsetY(30) })
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("fireworks.jpg", {transformation: [
  {color: "white", overlay: new cloudinary.TextLayer().fontFamily("ttf").fontSize(100).text("Happy%2520New%2520Year")},
  {flags: "layer_apply", gravity: "north_west", x: 30, y: 30}
  ]})
```

```react_native
import { source } from "@cloudinary/url-gen/actions/overlay";
import { text } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("fireworks.jpg").overlay(
  source(
    text(
      "Happy%20New%20Year",
      new TextStyle("AlexBrush-Regular.ttf", 100)
    ).textColor("white")
  ).position(
    new Position()
      .gravity(compass("north_west"))
      .offsetX(30)
      .offsetY(30)
  )
);
```

![Custom font overlay](https://res.cloudinary.com/demo/video/upload/w_1000/co_white,l_text:AlexBrush-Regular.ttf_50:Happy%2520New%2520Year/fl_layer_apply,g_north_west,x_30,y_30/new_year_fireworks.mp4 "thumb: w_500")

```nodejs
cloudinary.video("new_year_fireworks", {transformation: [
  {width: 1000, crop: "scale"},
  {color: "white", overlay: {font_family: "ttf", font_size: 50, text: "Happy%2520New%2520Year"}},
  {flags: "layer_apply", gravity: "north_west", x: 30, y: 30}
  ]})
```

```react
import { scale } from "@cloudinary/url-gen/actions/resize";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { text } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("new_year_fireworks.mp4")
  .resize(scale().width(1000))
  .overlay(
    source(
      text(
        "Happy%20New%20Year",
        new TextStyle("AlexBrush-Regular.ttf", 50)
      ).textColor("white")
    ).position(
      new Position()
        .gravity(compass("north_west"))
        .offsetX(30)
        .offsetY(30)
    )
  );
```

```vue
import { scale } from "@cloudinary/url-gen/actions/resize";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { text } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("new_year_fireworks.mp4")
  .resize(scale().width(1000))
  .overlay(
    source(
      text(
        "Happy%20New%20Year",
        new TextStyle("AlexBrush-Regular.ttf", 50)
      ).textColor("white")
    ).position(
      new Position()
        .gravity(compass("north_west"))
        .offsetX(30)
        .offsetY(30)
    )
  );
```

```angular
import { scale } from "@cloudinary/url-gen/actions/resize";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { text } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("new_year_fireworks.mp4")
  .resize(scale().width(1000))
  .overlay(
    source(
      text(
        "Happy%20New%20Year",
        new TextStyle("AlexBrush-Regular.ttf", 50)
      ).textColor("white")
    ).position(
      new Position()
        .gravity(compass("north_west"))
        .offsetX(30)
        .offsetY(30)
    )
  );
```

```js
import { scale } from "@cloudinary/url-gen/actions/resize";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { text } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("new_year_fireworks.mp4")
  .resize(scale().width(1000))
  .overlay(
    source(
      text(
        "Happy%20New%20Year",
        new TextStyle("AlexBrush-Regular.ttf", 50)
      ).textColor("white")
    ).position(
      new Position()
        .gravity(compass("north_west"))
        .offsetX(30)
        .offsetY(30)
    )
  );
```

```python
CloudinaryVideo("new_year_fireworks").video(transformation=[
  {'width': 1000, 'crop': "scale"},
  {'color': "white", 'overlay': {'font_family': "ttf", 'font_size': 50, 'text': "Happy%2520New%2520Year"}},
  {'flags': "layer_apply", 'gravity': "north_west", 'x': 30, 'y': 30}
  ])
```

```php
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Overlay;
use Cloudinary\Transformation\Source;
use Cloudinary\Transformation\Position;
use Cloudinary\Transformation\TextStyle;
use Cloudinary\Transformation\Gravity;
use Cloudinary\Transformation\Compass;

(new VideoTag('new_year_fireworks.mp4'))
	->resize(Resize::scale()->width(1000))
	->overlay(Overlay::source(
	Source::text("Happy%20New%20Year",(new TextStyle("AlexBrush-Regular.ttf",50)))
	->textColor(Color::WHITE)
	)
	->position((new Position())
	->gravity(
	Gravity::compass(
	Compass::northWest()))
->offsetX(30)
->offsetY(30))
	);
```

```java
cloudinary.url().transformation(new Transformation()
  .width(1000).crop("scale").chain()
  .color("white").overlay(new TextLayer().fontFamily("ttf").fontSize(50).text("Happy%2520New%2520Year")).chain()
  .flags("layer_apply").gravity("north_west").x(30).y(30)).videoTag("new_year_fireworks");
```

```ruby
cl_video_tag("new_year_fireworks", transformation: [
  {width: 1000, crop: "scale"},
  {color: "white", overlay: {font_family: "ttf", font_size: 50, text: "Happy%2520New%2520Year"}},
  {flags: "layer_apply", gravity: "north_west", x: 30, y: 30}
  ])
```

```csharp
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Width(1000).Crop("scale").Chain()
  .Color("white").Overlay(new TextLayer().FontFamily("ttf").FontSize(50).Text("Happy%2520New%2520Year")).Chain()
  .Flags("layer_apply").Gravity("north_west").X(30).Y(30)).BuildVideoTag("new_year_fireworks")
```

```dart
cloudinary.video('new_year_fireworks.mp4').transformation(Transformation()
	.addTransformation("w_1000/co_white,l_text:AlexBrush-Regular.ttf_50:Happy%20New%20Year/fl_layer_apply,g_north_west,x_30,y_30"));
```

```swift
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setWidth(1000).setCrop("scale").chain()
  .setColor("white").setOverlay("text:AlexBrush-Regular.ttf_50:Happy%2520New%2520Year").chain()
  .setFlags("layer_apply").setGravity("north_west").setX(30).setY(30)).generate("new_year_fireworks.mp4")
```

```android
MediaManager.get().url().transformation(new Transformation()
  .width(1000).crop("scale").chain()
  .color("white").overlay(new TextLayer().fontFamily("ttf").fontSize(50).text("Happy%2520New%2520Year")).chain()
  .flags("layer_apply").gravity("north_west").x(30).y(30)).resourceType("video").generate("new_year_fireworks.mp4");
```

```flutter
cloudinary.video('new_year_fireworks.mp4').transformation(Transformation()
	.addTransformation("w_1000/co_white,l_text:AlexBrush-Regular.ttf_50:Happy%20New%20Year/fl_layer_apply,g_north_west,x_30,y_30"));
```

```kotlin
cloudinary.video {
	publicId("new_year_fireworks.mp4")
	 resize(Resize.scale() { width(1000) })
	 overlay(Overlay.source(
	Source.text("Happy%20New%20Year",TextStyle("AlexBrush-Regular.ttf",50)) {
	 textColor(Color.WHITE)
	 }) {
	 position(Position() {
	 gravity(
	Gravity.compass(
	Compass.northWest()))
 offsetX(30)
 offsetY(30) })
	 }) 
}.generate()
```

```jquery
$.cloudinary.video("new_year_fireworks", {transformation: [
  {width: 1000, crop: "scale"},
  {color: "white", overlay: new cloudinary.TextLayer().fontFamily("ttf").fontSize(50).text("Happy%2520New%2520Year")},
  {flags: "layer_apply", gravity: "north_west", x: 30, y: 30}
  ]})
```

```react_native
import { scale } from "@cloudinary/url-gen/actions/resize";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { text } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("new_year_fireworks.mp4")
  .resize(scale().width(1000))
  .overlay(
    source(
      text(
        "Happy%20New%20Year",
        new TextStyle("AlexBrush-Regular.ttf", 50)
      ).textColor("white")
    ).position(
      new Position()
        .gravity(compass("north_west"))
        .offsetX(30)
        .offsetY(30)
    )
  );
```

### Custom font guidelines

* `.ttf`, `.otf` and `.woff2` font types are supported.
* Custom fonts must be uploaded as **raw, authenticated** files.
    > **TIP**:
>
> You can upload custom fonts via the Media Library by creating (or using an existing) signed [upload preset](upload_presets) where the **Delivery type** option in the preset is set as **Authenticated**. You can use this upload preset when uploading files to the Media Library by configuring it as the default **Media library upload preset** for **Raw** files.
>     ![Raw, authenticated upload preset](https://res.cloudinary.com/demo/image/upload/bo_1px_solid_gray/w_600/f_auto,dpr_2,q_auto/docs/raw_auth_text.png "width:600, with_code:false, with_url:false")
>     Alternatively, you can select the signed upload preset you create for custom fonts in the [Media Library upload widget](dam_upload_store_assets#media_library_upload_widget)'s **Advanced** settings while uploading assets, if that option is enabled for your account.
* If your custom font's public ID includes slashes, specify the public ID path using colons as separators. For example: `path1:path2:myfont.ttf`.
* Make sure to include the file extension when referencing the `public_id` of the raw file. The extension must be specified in lower-case letters.
* To make use of bold or italic font styles, upload separate font files for each emphasis style and specify the relevant file in the overlay transformation.
* A custom font is available only to the specific product environment where it was uploaded.
* Underscores are not supported in custom font names. When uploading the font as a raw file, make sure the `public_id` does not include an underscore.
* As with any asset you upload to Cloudinary, it is your responsibility to make sure you have the necessary license and redistribution rights for any custom fonts you use.

## Google Fonts

You can use any font available in the [Google Fonts](https://fonts.google.com/) library by appending `@google` to the font name in your text overlay:

`l_text:<font name>@google_<size>:<text string>`

For example, to overlay "Enjoy luxury" in white using the Gravitas One Google Font at size 80:

`co_white,l_text:Gravitas%20One@google_80:Enjoy%20luxury`

![Google Font text overlay on image](https://res.cloudinary.com/demo/image/upload/co_white,l_text:Gravitas%20One@google_80:Enjoy%20luxury/fl_layer_apply,x_-40,y_-90/docs/fine_hotel_room "thumb:c_scale,w_600/e_sharpen")

```nodejs
cloudinary.image("docs/fine_hotel_room", {transformation: [
  {color: "white", overlay: {font_family: "google", font_size: 80, text: "Enjoy%20luxury"}},
  {flags: "layer_apply", x: -40, y: -90}
  ]})
```

```react
import { source } from "@cloudinary/url-gen/actions/overlay";
import { text } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle";

new CloudinaryImage("docs/fine_hotel_room").overlay(
  source(
    text("Enjoy luxury", new TextStyle("Gravitas One@google", 80)).textColor(
      "white"
    )
  ).position(new Position().offsetX(-40).offsetY(-90))
);
```

```vue
import { source } from "@cloudinary/url-gen/actions/overlay";
import { text } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle";

new CloudinaryImage("docs/fine_hotel_room").overlay(
  source(
    text("Enjoy luxury", new TextStyle("Gravitas One@google", 80)).textColor(
      "white"
    )
  ).position(new Position().offsetX(-40).offsetY(-90))
);
```

```angular
import { source } from "@cloudinary/url-gen/actions/overlay";
import { text } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle";

new CloudinaryImage("docs/fine_hotel_room").overlay(
  source(
    text("Enjoy luxury", new TextStyle("Gravitas One@google", 80)).textColor(
      "white"
    )
  ).position(new Position().offsetX(-40).offsetY(-90))
);
```

```js
import { source } from "@cloudinary/url-gen/actions/overlay";
import { text } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle";

new CloudinaryImage("docs/fine_hotel_room").overlay(
  source(
    text("Enjoy luxury", new TextStyle("Gravitas One@google", 80)).textColor(
      "white"
    )
  ).position(new Position().offsetX(-40).offsetY(-90))
);
```

```python
CloudinaryImage("docs/fine_hotel_room").image(transformation=[
  {'color': "white", 'overlay': {'font_family': "google", 'font_size': 80, 'text': "Enjoy%20luxury"}},
  {'flags': "layer_apply", 'x': -40, 'y': -90}
  ])
```

```php
use Cloudinary\Transformation\Overlay;
use Cloudinary\Transformation\Source;
use Cloudinary\Transformation\Position;
use Cloudinary\Transformation\TextStyle;

(new ImageTag('docs/fine_hotel_room'))
	->overlay(Overlay::source(
	Source::text("Enjoy luxury",(new TextStyle("Gravitas One@google",80)))
	->textColor(Color::WHITE)
	)
	->position((new Position())->offsetX(-40)
->offsetY(-90))
	);
```

```java
cloudinary.url().transformation(new Transformation()
  .color("white").overlay(new TextLayer().fontFamily("google").fontSize(80).text("Enjoy%20luxury")).chain()
  .flags("layer_apply").x(-40).y(-90)).imageTag("docs/fine_hotel_room");
```

```ruby
cl_image_tag("docs/fine_hotel_room", transformation: [
  {color: "white", overlay: {font_family: "google", font_size: 80, text: "Enjoy%20luxury"}},
  {flags: "layer_apply", x: -40, y: -90}
  ])
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Color("white").Overlay(new TextLayer().FontFamily("google").FontSize(80).Text("Enjoy%20luxury")).Chain()
  .Flags("layer_apply").X(-40).Y(-90)).BuildImageTag("docs/fine_hotel_room")
```

```dart
cloudinary.image('docs/fine_hotel_room').transformation(Transformation()
	.addTransformation("co_white,l_text:Gravitas One@google_80:Enjoy luxury/fl_layer_apply,x_-40,y_-90"));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setColor("white").setOverlay("text:Gravitas%20One%40google_80:Enjoy%20luxury").chain()
  .setFlags("layer_apply").setX(-40).setY(-90)).generate("docs/fine_hotel_room")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation()
  .color("white").overlay(new TextLayer().fontFamily("google").fontSize(80).text("Enjoy%20luxury")).chain()
  .flags("layer_apply").x(-40).y(-90)).generate("docs/fine_hotel_room");
```

```flutter
cloudinary.image('docs/fine_hotel_room').transformation(Transformation()
	.addTransformation("co_white,l_text:Gravitas One@google_80:Enjoy luxury/fl_layer_apply,x_-40,y_-90"));
```

```kotlin
cloudinary.image {
	publicId("docs/fine_hotel_room")
	 overlay(Overlay.source(
	Source.text("Enjoy luxury",TextStyle("Gravitas One@google",80)) {
	 textColor(Color.WHITE)
	 }) {
	 position(Position() { offsetX(-40)
 offsetY(-90) })
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/fine_hotel_room", {transformation: [
  {color: "white", overlay: new cloudinary.TextLayer().fontFamily("google").fontSize(80).text("Enjoy%20luxury")},
  {flags: "layer_apply", x: -40, y: -90}
  ]})
```

```react_native
import { source } from "@cloudinary/url-gen/actions/overlay";
import { text } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle";

new CloudinaryImage("docs/fine_hotel_room").overlay(
  source(
    text("Enjoy luxury", new TextStyle("Gravitas One@google", 80)).textColor(
      "white"
    )
  ).position(new Position().offsetX(-40).offsetY(-90))
);
```

![Google Font text overlay on video](https://res.cloudinary.com/demo/video/upload/co_white,l_text:Gravitas%20One@google_80:Enjoy%20luxury/fl_layer_apply,g_north_east,x_40,y_40/docs/hotel_room.mp4 "thumb:c_scale,w_600")

```nodejs
cloudinary.video("docs/hotel_room", {transformation: [
  {color: "white", overlay: {font_family: "google", font_size: 80, text: "Enjoy%20luxury"}},
  {flags: "layer_apply", gravity: "north_east", x: 40, y: 40}
  ]})
```

```react
import { source } from "@cloudinary/url-gen/actions/overlay";
import { text } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("docs/hotel_room.mp4").overlay(
  source(
    text("Enjoy luxury", new TextStyle("Gravitas One@google", 80)).textColor(
      "white"
    )
  ).position(
    new Position()
      .gravity(compass("north_east"))
      .offsetX(40)
      .offsetY(40)
  )
);
```

```vue
import { source } from "@cloudinary/url-gen/actions/overlay";
import { text } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("docs/hotel_room.mp4").overlay(
  source(
    text("Enjoy luxury", new TextStyle("Gravitas One@google", 80)).textColor(
      "white"
    )
  ).position(
    new Position()
      .gravity(compass("north_east"))
      .offsetX(40)
      .offsetY(40)
  )
);
```

```angular
import { source } from "@cloudinary/url-gen/actions/overlay";
import { text } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("docs/hotel_room.mp4").overlay(
  source(
    text("Enjoy luxury", new TextStyle("Gravitas One@google", 80)).textColor(
      "white"
    )
  ).position(
    new Position()
      .gravity(compass("north_east"))
      .offsetX(40)
      .offsetY(40)
  )
);
```

```js
import { source } from "@cloudinary/url-gen/actions/overlay";
import { text } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("docs/hotel_room.mp4").overlay(
  source(
    text("Enjoy luxury", new TextStyle("Gravitas One@google", 80)).textColor(
      "white"
    )
  ).position(
    new Position()
      .gravity(compass("north_east"))
      .offsetX(40)
      .offsetY(40)
  )
);
```

```python
CloudinaryVideo("docs/hotel_room").video(transformation=[
  {'color': "white", 'overlay': {'font_family': "google", 'font_size': 80, 'text': "Enjoy%20luxury"}},
  {'flags': "layer_apply", 'gravity': "north_east", 'x': 40, 'y': 40}
  ])
```

```php
use Cloudinary\Transformation\Overlay;
use Cloudinary\Transformation\Source;
use Cloudinary\Transformation\Position;
use Cloudinary\Transformation\TextStyle;
use Cloudinary\Transformation\Gravity;
use Cloudinary\Transformation\Compass;

(new VideoTag('docs/hotel_room.mp4'))
	->overlay(Overlay::source(
	Source::text("Enjoy luxury",(new TextStyle("Gravitas One@google",80)))
	->textColor(Color::WHITE)
	)
	->position((new Position())
	->gravity(
	Gravity::compass(
	Compass::northEast()))
->offsetX(40)
->offsetY(40))
	);
```

```java
cloudinary.url().transformation(new Transformation()
  .color("white").overlay(new TextLayer().fontFamily("google").fontSize(80).text("Enjoy%20luxury")).chain()
  .flags("layer_apply").gravity("north_east").x(40).y(40)).videoTag("docs/hotel_room");
```

```ruby
cl_video_tag("docs/hotel_room", transformation: [
  {color: "white", overlay: {font_family: "google", font_size: 80, text: "Enjoy%20luxury"}},
  {flags: "layer_apply", gravity: "north_east", x: 40, y: 40}
  ])
```

```csharp
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Color("white").Overlay(new TextLayer().FontFamily("google").FontSize(80).Text("Enjoy%20luxury")).Chain()
  .Flags("layer_apply").Gravity("north_east").X(40).Y(40)).BuildVideoTag("docs/hotel_room")
```

```dart
cloudinary.video('docs/hotel_room.mp4').transformation(Transformation()
	.addTransformation("co_white,l_text:Gravitas One@google_80:Enjoy luxury/fl_layer_apply,g_north_east,x_40,y_40"));
```

```swift
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setColor("white").setOverlay("text:Gravitas%20One%40google_80:Enjoy%20luxury").chain()
  .setFlags("layer_apply").setGravity("north_east").setX(40).setY(40)).generate("docs/hotel_room.mp4")
```

```android
MediaManager.get().url().transformation(new Transformation()
  .color("white").overlay(new TextLayer().fontFamily("google").fontSize(80).text("Enjoy%20luxury")).chain()
  .flags("layer_apply").gravity("north_east").x(40).y(40)).resourceType("video").generate("docs/hotel_room.mp4");
```

```flutter
cloudinary.video('docs/hotel_room.mp4').transformation(Transformation()
	.addTransformation("co_white,l_text:Gravitas One@google_80:Enjoy luxury/fl_layer_apply,g_north_east,x_40,y_40"));
```

```kotlin
cloudinary.video {
	publicId("docs/hotel_room.mp4")
	 overlay(Overlay.source(
	Source.text("Enjoy luxury",TextStyle("Gravitas One@google",80)) {
	 textColor(Color.WHITE)
	 }) {
	 position(Position() {
	 gravity(
	Gravity.compass(
	Compass.northEast()))
 offsetX(40)
 offsetY(40) })
	 }) 
}.generate()
```

```jquery
$.cloudinary.video("docs/hotel_room", {transformation: [
  {color: "white", overlay: new cloudinary.TextLayer().fontFamily("google").fontSize(80).text("Enjoy%20luxury")},
  {flags: "layer_apply", gravity: "north_east", x: 40, y: 40}
  ]})
```

```react_native
import { source } from "@cloudinary/url-gen/actions/overlay";
import { text } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("docs/hotel_room.mp4").overlay(
  source(
    text("Enjoy luxury", new TextStyle("Gravitas One@google", 80)).textColor(
      "white"
    )
  ).position(
    new Position()
      .gravity(compass("north_east"))
      .offsetX(40)
      .offsetY(40)
  )
);
```

All other text overlay [styling parameters](transformation_reference#styling_parameters) are supported in combination with Google Fonts, including decoration, alignment, letter spacing, and line spacing.

### Google Fonts guidelines

* Font names are **case-sensitive** and must match exactly as listed on [Google Fonts](https://fonts.google.com/).
* When using the `@google` syntax, font weight must be specified as a **numeric value** (e.g. `400`, `700`) rather than a keyword such as `bold` or `light`. The numeric weight must be supported by the chosen font.
* To specify font size and font weight together, include the weight after the size, separated by an underscore. For example, to use Roboto at size 90 with a weight of 600:  
  `l_text:Roboto@google_90_600:Hello%20World`

## Predefined text templates

Instead of specifying the styling parameters every time you need to dynamically add a text overlay to an asset, you can use the public ID of a text image created with the [`text` method of the upload API](image_upload_api_reference#text_method). The same styles that were used to create the text image will also be dynamically applied to the text overlay. The default text string of the text image is also used unless you provide a new text string, which can be useful if you don't want the text string to appear in the URL, or if the text string is very long.

For example, you can create a text image of "Sample text string" in 82 point, red, Roboto bold font, and the public ID of `sample_text_style` as follows:

```multi
|ruby
result = Cloudinary::Uploader
.text("Sample text string",
  public_id: "sample_text_style",
  font_family: "Roboto", 
  font_size: 82,
  font_color: "red",
  font_weight: "bold")

|php_2
$result = $cloudinary->uploadApi()
->text("Sample text string", [
	"public_id" => "sample_text_style",
	"font_family" => "Roboto", 
	"font_size" => 82,
	"font_color" => "red", 
	"font_weight" => "bold"]);

|python
result = cloudinary.uploader
.text("Sample text string",
  public_id = "sample_text_style",
  font_family = "Roboto", 
  font_size = 82,
  font_color = "red",
  font_weight = "bold")

|nodejs
cloudinary.v2.uploader
.text("Sample text string",
  { public_id: "sample_text_style",
	font_family: "Roboto", 
	font_size: 82,
	font_color: "red", 
	font_weight: "bold" })
.then(result=>console.log(result));
         
|java
result = cloudinary.uploader
.text("Sample text string",
  ObjectUtils.asMap(
    "public_id", "sample_text_style",
	"font_family", "Roboto",
	"font_size", 82,
	"font_color", "red",
	"font_weight", "bold"));

|csharp
var textParams = new TextParams("Sample text string"){
  PublicId = "sample_text_style",
  FontFamily = "Roboto",
  FontSize = 82,
  FontColor = "red",
  FontWeight= "bold"};
var textResult = cloudinary.Text(textParams); 

|go
resp, err := cld.Upload.Text(ctx, uploader.TextParams{
        Text: "Sample text string",
		PublicID:   "sample_text_style",
		FontFamily: "Roboto",
		FontSize:   82,
		FontColor:  "red",
		FontWeight: "bold"})

|swift
let params = CLDTextRequestParams()
  .setPublicId("sample_text_style")
  .setFontFamily("Roboto")
  .setFontSize("82")
  .setFontColor("red")
  .setFontWeight(.bold)
let result = cloudinary.createManagementApi().multi("Sample text string", params: params)

|curl
curl https://api.cloudinary.com/v1_1/demo/image/text -X POST --data 'text=Sample%20text%20string&public_id=sample_text_image&font_family=Roboto&font_size=42&font_color=red&font_weight=bold&timestamp=173719931&api_key=614335564976464&signature=a788d68f86a6f868af'

|cli
cld uploader text "Sample text string" public_id="sample_text_style" font_family="Roboto" font_size=82 font_color="red" font_weight="bold"
```

This is the resulting text image:

You can then use the `sample_text_style` style in your text overlay, as follows:

!['Stylish text' added to image](https://res.cloudinary.com/demo/image/upload/w_500/l_text:sample_text_style:Flowers/fl_layer_apply,g_south/flowers.jpg)

```nodejs
cloudinary.image("flowers.jpg", {transformation: [
  {width: 500, crop: "scale"},
  {overlay: {public_id: "sample_text_style", text: "Flowers"}},
  {flags: "layer_apply", gravity: "south"}
  ]})
```

```react
import { scale } from "@cloudinary/url-gen/actions/resize";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { text } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("flowers.jpg")
  .resize(scale().width(500))
  .overlay(
    source(text("Flowers", "sample_text_style")).position(
      new Position().gravity(compass("south"))
    )
  );
```

```vue
import { scale } from "@cloudinary/url-gen/actions/resize";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { text } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("flowers.jpg")
  .resize(scale().width(500))
  .overlay(
    source(text("Flowers", "sample_text_style")).position(
      new Position().gravity(compass("south"))
    )
  );
```

```angular
import { scale } from "@cloudinary/url-gen/actions/resize";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { text } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("flowers.jpg")
  .resize(scale().width(500))
  .overlay(
    source(text("Flowers", "sample_text_style")).position(
      new Position().gravity(compass("south"))
    )
  );
```

```js
import { scale } from "@cloudinary/url-gen/actions/resize";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { text } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("flowers.jpg")
  .resize(scale().width(500))
  .overlay(
    source(text("Flowers", "sample_text_style")).position(
      new Position().gravity(compass("south"))
    )
  );
```

```python
CloudinaryImage("flowers.jpg").image(transformation=[
  {'width': 500, 'crop': "scale"},
  {'overlay': {'public_id': "sample_text_style", 'text': "Flowers"}},
  {'flags': "layer_apply", 'gravity': "south"}
  ])
```

```php
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Overlay;
use Cloudinary\Transformation\Source;
use Cloudinary\Transformation\Position;
use Cloudinary\Transformation\Gravity;
use Cloudinary\Transformation\Compass;

(new ImageTag('flowers.jpg'))
	->resize(Resize::scale()->width(500))
	->overlay(Overlay::source(
	Source::text("Flowers","sample_text_style"))
	->position((new Position())
	->gravity(
	Gravity::compass(
	Compass::south()))
	)
	);
```

```java
cloudinary.url().transformation(new Transformation()
  .width(500).crop("scale").chain()
  .overlay(new TextLayer().text("Flowers").publicId("sample_text_style")).chain()
  .flags("layer_apply").gravity("south")).imageTag("flowers.jpg");
```

```ruby
cl_image_tag("flowers.jpg", transformation: [
  {width: 500, crop: "scale"},
  {overlay: {public_id: "sample_text_style", text: "Flowers"}},
  {flags: "layer_apply", gravity: "south"}
  ])
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(500).Crop("scale").Chain()
  .Overlay(new TextLayer().Text("Flowers").PublicId("sample_text_style")).Chain()
  .Flags("layer_apply").Gravity("south")).BuildImageTag("flowers.jpg")
```

```dart
cloudinary.image('flowers.jpg').transformation(Transformation()
	.addTransformation("w_500/l_text:sample_text_style:Flowers/fl_layer_apply,g_south"));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(500).setCrop("scale").chain()
  .setOverlay("text:sample_text_style:Flowers").chain()
  .setFlags("layer_apply").setGravity("south")).generate("flowers.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation()
  .width(500).crop("scale").chain()
  .overlay(new TextLayer().text("Flowers").publicId("sample_text_style")).chain()
  .flags("layer_apply").gravity("south")).generate("flowers.jpg");
```

```flutter
cloudinary.image('flowers.jpg').transformation(Transformation()
	.addTransformation("w_500/l_text:sample_text_style:Flowers/fl_layer_apply,g_south"));
```

```kotlin
cloudinary.image {
	publicId("flowers.jpg")
	 resize(Resize.scale() { width(500) })
	 overlay(Overlay.source(
	Source.text("Flowers","sample_text_style")) {
	 position(Position() {
	 gravity(
	Gravity.compass(
	Compass.south()))
	 })
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("flowers.jpg", {transformation: [
  {width: 500, crop: "scale"},
  {overlay: new cloudinary.TextLayer().text("Flowers").publicId("sample_text_style")},
  {flags: "layer_apply", gravity: "south"}
  ]})
```

```react_native
import { scale } from "@cloudinary/url-gen/actions/resize";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { text } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("flowers.jpg")
  .resize(scale().width(500))
  .overlay(
    source(text("Flowers", "sample_text_style")).position(
      new Position().gravity(compass("south"))
    )
  );
```

!['Stylish text' added to video](https://res.cloudinary.com/demo/video/upload/w_500/l_text:sample_text_style:Flowers/fl_layer_apply,g_south/lotus_flower.mp4)

```nodejs
cloudinary.video("lotus_flower", {transformation: [
  {width: 500, crop: "scale"},
  {overlay: {public_id: "sample_text_style", text: "Flowers"}},
  {flags: "layer_apply", gravity: "south"}
  ]})
```

```react
import { scale } from "@cloudinary/url-gen/actions/resize";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { text } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("lotus_flower.mp4")
  .resize(scale().width(500))
  .overlay(
    source(text("Flowers", "sample_text_style")).position(
      new Position().gravity(compass("south"))
    )
  );
```

```vue
import { scale } from "@cloudinary/url-gen/actions/resize";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { text } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("lotus_flower.mp4")
  .resize(scale().width(500))
  .overlay(
    source(text("Flowers", "sample_text_style")).position(
      new Position().gravity(compass("south"))
    )
  );
```

```angular
import { scale } from "@cloudinary/url-gen/actions/resize";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { text } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("lotus_flower.mp4")
  .resize(scale().width(500))
  .overlay(
    source(text("Flowers", "sample_text_style")).position(
      new Position().gravity(compass("south"))
    )
  );
```

```js
import { scale } from "@cloudinary/url-gen/actions/resize";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { text } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("lotus_flower.mp4")
  .resize(scale().width(500))
  .overlay(
    source(text("Flowers", "sample_text_style")).position(
      new Position().gravity(compass("south"))
    )
  );
```

```python
CloudinaryVideo("lotus_flower").video(transformation=[
  {'width': 500, 'crop': "scale"},
  {'overlay': {'public_id': "sample_text_style", 'text': "Flowers"}},
  {'flags': "layer_apply", 'gravity': "south"}
  ])
```

```php
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Overlay;
use Cloudinary\Transformation\Source;
use Cloudinary\Transformation\Position;
use Cloudinary\Transformation\Gravity;
use Cloudinary\Transformation\Compass;

(new VideoTag('lotus_flower.mp4'))
	->resize(Resize::scale()->width(500))
	->overlay(Overlay::source(
	Source::text("Flowers","sample_text_style"))
	->position((new Position())
	->gravity(
	Gravity::compass(
	Compass::south()))
	)
	);
```

```java
cloudinary.url().transformation(new Transformation()
  .width(500).crop("scale").chain()
  .overlay(new TextLayer().text("Flowers").publicId("sample_text_style")).chain()
  .flags("layer_apply").gravity("south")).videoTag("lotus_flower");
```

```ruby
cl_video_tag("lotus_flower", transformation: [
  {width: 500, crop: "scale"},
  {overlay: {public_id: "sample_text_style", text: "Flowers"}},
  {flags: "layer_apply", gravity: "south"}
  ])
```

```csharp
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Width(500).Crop("scale").Chain()
  .Overlay(new TextLayer().Text("Flowers").PublicId("sample_text_style")).Chain()
  .Flags("layer_apply").Gravity("south")).BuildVideoTag("lotus_flower")
```

```dart
cloudinary.video('lotus_flower.mp4').transformation(Transformation()
	.addTransformation("w_500/l_text:sample_text_style:Flowers/fl_layer_apply,g_south"));
```

```swift
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setWidth(500).setCrop("scale").chain()
  .setOverlay("text:sample_text_style:Flowers").chain()
  .setFlags("layer_apply").setGravity("south")).generate("lotus_flower.mp4")
```

```android
MediaManager.get().url().transformation(new Transformation()
  .width(500).crop("scale").chain()
  .overlay(new TextLayer().text("Flowers").publicId("sample_text_style")).chain()
  .flags("layer_apply").gravity("south")).resourceType("video").generate("lotus_flower.mp4");
```

```flutter
cloudinary.video('lotus_flower.mp4').transformation(Transformation()
	.addTransformation("w_500/l_text:sample_text_style:Flowers/fl_layer_apply,g_south"));
```

```kotlin
cloudinary.video {
	publicId("lotus_flower.mp4")
	 resize(Resize.scale() { width(500) })
	 overlay(Overlay.source(
	Source.text("Flowers","sample_text_style")) {
	 position(Position() {
	 gravity(
	Gravity.compass(
	Compass.south()))
	 })
	 }) 
}.generate()
```

```jquery
$.cloudinary.video("lotus_flower", {transformation: [
  {width: 500, crop: "scale"},
  {overlay: new cloudinary.TextLayer().text("Flowers").publicId("sample_text_style")},
  {flags: "layer_apply", gravity: "south"}
  ]})
```

```react_native
import { scale } from "@cloudinary/url-gen/actions/resize";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { text } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("lotus_flower.mp4")
  .resize(scale().width(500))
  .overlay(
    source(text("Flowers", "sample_text_style")).position(
      new Position().gravity(compass("south"))
    )
  );
```

## Text layer flags

The text content for text layers is often supplied in real time by your application users or another external source. You may want to use the following flags to help handle these scenarios: 

* **fl_text_disallow_overflow** (images only): As mentioned in [layer overflow behavior](image_layer_placement#layer_overflow_behavior), you can control whether large image or text layers will result in expanding the size of the delivered image using the `fl_no_overflow` flag (images only). However, for text overlays on images, if you don't want long text to impact the expected delivery image size, but an unexpected trim might risk cutting off essential text, you can apply the `fl_text_disallow_overflow` flag, which will cause URLs with overflowing text layers to fail and return a 400 (bad request) error that you can check for and handle in your application. For more details and examples, see [fl_no_overflow](transformation_reference#fl_no_overflow) and [fl_text_disallow_overflow](transformation_reference#fl_text_disallow_overflow) in the _Transformation Reference_.
* **fl_text_no_trim**: By default, text layers are tightly trimmed on all sides. In some cases, especially if you add a border around the text, or you are using a gravity for your text layer that might place the text too close to the edge of the layer behind it, you can use the `fl_text_no_trim` flag to add a small amount of padding around the text overlay string.  For example: 
  ![Text with padding](https://res.cloudinary.com/demo/image/upload/co_yellow,l_text:Arial_150:Flowers,fl_text_no_trim/bo_6px_solid_red/fl_layer_apply/flower.jpg "thumb: w_250")

```nodejs
cloudinary.image("flower.jpg", {transformation: [
  {color: "yellow", overlay: {font_family: "Arial", font_size: 150, text: "Flowers"}, flags: "text_no_trim"},
  {border: "6px_solid_red"},
  {flags: "layer_apply"}
  ]})
```

```react
import { source } from "@cloudinary/url-gen/actions/overlay";
import { solid } from "@cloudinary/url-gen/actions/border";
import { text } from "@cloudinary/url-gen/qualifiers/source";
import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle";

new CloudinaryImage("flower.jpg").overlay(
  source(
    text("Flowers", new TextStyle("Arial", 150))
      .textColor("yellow")
      .transformation(
        new Transformation().addFlag("text_no_trim").border(solid(6, "red"))
      )
  )
);
```

```vue
import { source } from "@cloudinary/url-gen/actions/overlay";
import { solid } from "@cloudinary/url-gen/actions/border";
import { text } from "@cloudinary/url-gen/qualifiers/source";
import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle";

new CloudinaryImage("flower.jpg").overlay(
  source(
    text("Flowers", new TextStyle("Arial", 150))
      .textColor("yellow")
      .transformation(
        new Transformation().addFlag("text_no_trim").border(solid(6, "red"))
      )
  )
);
```

```angular
import { source } from "@cloudinary/url-gen/actions/overlay";
import { solid } from "@cloudinary/url-gen/actions/border";
import { text } from "@cloudinary/url-gen/qualifiers/source";
import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle";

new CloudinaryImage("flower.jpg").overlay(
  source(
    text("Flowers", new TextStyle("Arial", 150))
      .textColor("yellow")
      .transformation(
        new Transformation().addFlag("text_no_trim").border(solid(6, "red"))
      )
  )
);
```

```js
import { source } from "@cloudinary/url-gen/actions/overlay";
import { solid } from "@cloudinary/url-gen/actions/border";
import { text } from "@cloudinary/url-gen/qualifiers/source";
import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle";

new CloudinaryImage("flower.jpg").overlay(
  source(
    text("Flowers", new TextStyle("Arial", 150))
      .textColor("yellow")
      .transformation(
        new Transformation().addFlag("text_no_trim").border(solid(6, "red"))
      )
  )
);
```

```python
CloudinaryImage("flower.jpg").image(transformation=[
  {'color': "yellow", 'overlay': {'font_family': "Arial", 'font_size': 150, 'text': "Flowers"}, 'flags': "text_no_trim"},
  {'border': "6px_solid_red"},
  {'flags': "layer_apply"}
  ])
```

```php
use Cloudinary\Transformation\Overlay;
use Cloudinary\Transformation\Border;
use Cloudinary\Transformation\Source;
use Cloudinary\Transformation\TextStyle;

(new ImageTag('flower.jpg'))
	->overlay(Overlay::source(
	Source::text("Flowers",(new TextStyle("Arial",150)))
	->textColor(Color::YELLOW)
	->transformation((new Transformation())
	->addFlag(
	Flag::textNoTrim())
	->border(Border::solid(6,Color::RED)))
	));
```

```java
cloudinary.url().transformation(new Transformation()
  .color("yellow").overlay(new TextLayer().fontFamily("Arial").fontSize(150).text("Flowers")).flags("text_no_trim").chain()
  .border("6px_solid_red").chain()
  .flags("layer_apply")).imageTag("flower.jpg");
```

```ruby
cl_image_tag("flower.jpg", transformation: [
  {color: "yellow", overlay: {font_family: "Arial", font_size: 150, text: "Flowers"}, flags: "text_no_trim"},
  {border: "6px_solid_red"},
  {flags: "layer_apply"}
  ])
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Color("yellow").Overlay(new TextLayer().FontFamily("Arial").FontSize(150).Text("Flowers")).Flags("text_no_trim").Chain()
  .Border("6px_solid_red").Chain()
  .Flags("layer_apply")).BuildImageTag("flower.jpg")
```

```dart
cloudinary.image('flower.jpg').transformation(Transformation()
	.addTransformation("co_yellow,l_text:Arial_150:Flowers,fl_text_no_trim/bo_6px_solid_red/fl_layer_apply"));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setColor("yellow").setOverlay("text:Arial_150:Flowers").setFlags("text_no_trim").chain()
  .setBorder("6px_solid_red").chain()
  .setFlags("layer_apply")).generate("flower.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation()
  .color("yellow").overlay(new TextLayer().fontFamily("Arial").fontSize(150).text("Flowers")).flags("text_no_trim").chain()
  .border("6px_solid_red").chain()
  .flags("layer_apply")).generate("flower.jpg");
```

```flutter
cloudinary.image('flower.jpg').transformation(Transformation()
	.addTransformation("co_yellow,l_text:Arial_150:Flowers,fl_text_no_trim/bo_6px_solid_red/fl_layer_apply"));
```

```kotlin
cloudinary.image {
	publicId("flower.jpg")
	 overlay(Overlay.source(
	Source.text("Flowers",TextStyle("Arial",150)) {
	 textColor(Color.YELLOW)
	 transformation(Transformation {
	 addFlag(
	Flag.textNoTrim())
	 border(Border.solid(6,Color.RED)) })
	 })) 
}.generate()
```

```jquery
$.cloudinary.image("flower.jpg", {transformation: [
  {color: "yellow", overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(150).text("Flowers"), flags: "text_no_trim"},
  {border: "6px_solid_red"},
  {flags: "layer_apply"}
  ]})
```

```react_native
import { source } from "@cloudinary/url-gen/actions/overlay";
import { solid } from "@cloudinary/url-gen/actions/border";
import { text } from "@cloudinary/url-gen/qualifiers/source";
import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle";

new CloudinaryImage("flower.jpg").overlay(
  source(
    text("Flowers", new TextStyle("Arial", 150))
      .textColor("yellow")
      .transformation(
        new Transformation().addFlag("text_no_trim").border(solid(6, "red"))
      )
  )
);
```

  ![Text with padding](https://res.cloudinary.com/demo/video/upload/co_yellow,l_text:Arial_150:Flowers,fl_text_no_trim/bo_6px_solid_red/fl_layer_apply/lotus_flower.mp4 "thumb: w_250")

```nodejs
cloudinary.video("lotus_flower", {transformation: [
  {color: "yellow", overlay: {font_family: "Arial", font_size: 150, text: "Flowers"}, flags: "text_no_trim"},
  {border: "6px_solid_red"},
  {flags: "layer_apply"}
  ]})
```

```react
import { source } from "@cloudinary/url-gen/actions/overlay";
import { solid } from "@cloudinary/url-gen/actions/border";
import { text } from "@cloudinary/url-gen/qualifiers/source";
import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle";

new CloudinaryVideo("lotus_flower.mp4").overlay(
  source(
    text("Flowers", new TextStyle("Arial", 150))
      .textColor("yellow")
      .transformation(
        new Transformation().addFlag("text_no_trim").border(solid(6, "red"))
      )
  )
);
```

```vue
import { source } from "@cloudinary/url-gen/actions/overlay";
import { solid } from "@cloudinary/url-gen/actions/border";
import { text } from "@cloudinary/url-gen/qualifiers/source";
import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle";

new CloudinaryVideo("lotus_flower.mp4").overlay(
  source(
    text("Flowers", new TextStyle("Arial", 150))
      .textColor("yellow")
      .transformation(
        new Transformation().addFlag("text_no_trim").border(solid(6, "red"))
      )
  )
);
```

```angular
import { source } from "@cloudinary/url-gen/actions/overlay";
import { solid } from "@cloudinary/url-gen/actions/border";
import { text } from "@cloudinary/url-gen/qualifiers/source";
import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle";

new CloudinaryVideo("lotus_flower.mp4").overlay(
  source(
    text("Flowers", new TextStyle("Arial", 150))
      .textColor("yellow")
      .transformation(
        new Transformation().addFlag("text_no_trim").border(solid(6, "red"))
      )
  )
);
```

```js
import { source } from "@cloudinary/url-gen/actions/overlay";
import { solid } from "@cloudinary/url-gen/actions/border";
import { text } from "@cloudinary/url-gen/qualifiers/source";
import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle";

new CloudinaryVideo("lotus_flower.mp4").overlay(
  source(
    text("Flowers", new TextStyle("Arial", 150))
      .textColor("yellow")
      .transformation(
        new Transformation().addFlag("text_no_trim").border(solid(6, "red"))
      )
  )
);
```

```python
CloudinaryVideo("lotus_flower").video(transformation=[
  {'color': "yellow", 'overlay': {'font_family': "Arial", 'font_size': 150, 'text': "Flowers"}, 'flags': "text_no_trim"},
  {'border': "6px_solid_red"},
  {'flags': "layer_apply"}
  ])
```

```php
use Cloudinary\Transformation\Overlay;
use Cloudinary\Transformation\Border;
use Cloudinary\Transformation\Source;
use Cloudinary\Transformation\TextStyle;

(new VideoTag('lotus_flower.mp4'))
	->overlay(Overlay::source(
	Source::text("Flowers",(new TextStyle("Arial",150)))
	->textColor(Color::YELLOW)
	->transformation((new Transformation())
	->addFlag(
	Flag::textNoTrim())
	->border(Border::solid(6,Color::RED)))
	));
```

```java
cloudinary.url().transformation(new Transformation()
  .color("yellow").overlay(new TextLayer().fontFamily("Arial").fontSize(150).text("Flowers")).flags("text_no_trim").chain()
  .border("6px_solid_red").chain()
  .flags("layer_apply")).videoTag("lotus_flower");
```

```ruby
cl_video_tag("lotus_flower", transformation: [
  {color: "yellow", overlay: {font_family: "Arial", font_size: 150, text: "Flowers"}, flags: "text_no_trim"},
  {border: "6px_solid_red"},
  {flags: "layer_apply"}
  ])
```

```csharp
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Color("yellow").Overlay(new TextLayer().FontFamily("Arial").FontSize(150).Text("Flowers")).Flags("text_no_trim").Chain()
  .Border("6px_solid_red").Chain()
  .Flags("layer_apply")).BuildVideoTag("lotus_flower")
```

```dart
cloudinary.video('lotus_flower.mp4').transformation(Transformation()
	.addTransformation("co_yellow,l_text:Arial_150:Flowers,fl_text_no_trim/bo_6px_solid_red/fl_layer_apply"));
```

```swift
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setColor("yellow").setOverlay("text:Arial_150:Flowers").setFlags("text_no_trim").chain()
  .setBorder("6px_solid_red").chain()
  .setFlags("layer_apply")).generate("lotus_flower.mp4")
```

```android
MediaManager.get().url().transformation(new Transformation()
  .color("yellow").overlay(new TextLayer().fontFamily("Arial").fontSize(150).text("Flowers")).flags("text_no_trim").chain()
  .border("6px_solid_red").chain()
  .flags("layer_apply")).resourceType("video").generate("lotus_flower.mp4");
```

```flutter
cloudinary.video('lotus_flower.mp4').transformation(Transformation()
	.addTransformation("co_yellow,l_text:Arial_150:Flowers,fl_text_no_trim/bo_6px_solid_red/fl_layer_apply"));
```

```kotlin
cloudinary.video {
	publicId("lotus_flower.mp4")
	 overlay(Overlay.source(
	Source.text("Flowers",TextStyle("Arial",150)) {
	 textColor(Color.YELLOW)
	 transformation(Transformation {
	 addFlag(
	Flag.textNoTrim())
	 border(Border.solid(6,Color.RED)) })
	 })) 
}.generate()
```

```jquery
$.cloudinary.video("lotus_flower", {transformation: [
  {color: "yellow", overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(150).text("Flowers"), flags: "text_no_trim"},
  {border: "6px_solid_red"},
  {flags: "layer_apply"}
  ]})
```

```react_native
import { source } from "@cloudinary/url-gen/actions/overlay";
import { solid } from "@cloudinary/url-gen/actions/border";
import { text } from "@cloudinary/url-gen/qualifiers/source";
import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle";

new CloudinaryVideo("lotus_flower.mp4").overlay(
  source(
    text("Flowers", new TextStyle("Arial", 150))
      .textColor("yellow")
      .transformation(
        new Transformation().addFlag("text_no_trim").border(solid(6, "red"))
      )
  )
);
```

> **NOTE**: When placing a background behind text overlays (e.g., `l_text:Arial_100:Flowers,b_green`), Cloudinary automatically adds this padding, so this padding flag isn't necessary.

> **READING**:
>
> * [Layer syntax](layers): Learn the layer URL syntax and overlay types for images.

> * [Text layer options](image_text_layers): Text styling, color, multi-line text, and special characters.