Upload Text Trouble - Custom Font

Prasanna

I'm trying to upload a text on a blank canvas to obtain it's height and width. The text uses a custom font that I've uploaded using the media library. The problem arises whenever I make the request on Postman I receive an image that looks like a default font. I'm assuming the width and height are also not correct either.

Postman Request Body:

Received from Cloudinary:

What I expected to be received:

I'm more than happy to provide more details if needed!

Cloudinary_John_H

Hi Prasanna,

Thanks for reaching out. Can you provide the final Cloudinary URL that is providing the output that doesn't match your expectations?

I took a quick look at our docs here to come up with this answer:

https://cloudinary.com/documentation/layers#custom_fonts

https://support.cloudinary.com/hc/en-us/articles/203352832-What-is-the-list-of-supported-fonts-for-text-overlay-transformation-

Sample from our docs:

https://res.cloudinary.com/demo/image/upload/co_white,l_text:AlexBrush-Regular.ttf_100:Happy%2520New%2520Year%25202022%2520/fl_layer_apply,g_north_west,x_30,y_30/fireworks.jpg

Sample in your account:

https://res.cloudinary.com/dsspsmrxw/co_green,l_text:ModernBohemianScript-Regular.ttf_100:Freddy/fl_layer_apply/blankCanvas.png

A few notes - your blank image that you tried testing with initially doesn't appear to be blank:

https://res.cloudinary.com/dsspsmrxw/image/text/v1700690217/blankCanvas.png

Also, when I copied the URL for this asset, it looks to be in a folder called "image/text/", which makes it hard to apply transformations. I reuploaded the same asset to your root directory to complete my example above.

Hopefull,y that example and the docs show how to build these types of custom font assets.

Please let me know if you have any further questions.

Prasanna

No worries, this is the url I get as a response:(https://res.cloudinary.com/dsspsmrxw/image/text/v1700761671/blankCanvas.png).

I'm able to get the font working on the Transformation URL API like you've shown (Transformation URL Example), but I can't seem to get it to show up on the upload API.

The blankCanvas.png is a base png, I was using the upload API to upload text onto it with the goal of obtaining the height and width of said text. I'm still learning using both the Upload API and the Transformation URL API aha.

Hope that clears things up!

johnr

Hi Prasanna,

It requires 3 steps to achieve the outcome you want.

1) Upload ModernBohemianScript-Regular.ttf

2) Upload blankCanvas.png

3) Modify the URL of blankCanvas.png to apply a transformation that will overlay the word `Freddy` using the font `ModernBohemianScript-Regular.ttf`

The upload call for `blankCanvas.png` will return the URL in the response. This URL will deliver the original asset. As your intention is to overlay the text to your canvas, you need to apply transformations to it.

Here is the transformed URL (as John mentioned earlier, the blankCanvas is not blank at all):

https://res.cloudinary.com/dsspsmrxw/image/upload/l_text:ModernBohemianScript-Regular.ttf_100:Freddy/blankCanvas.png

This is the transformation applied:

`l_text:ModernBohemianScript-Regular.ttf_120:Freddy` - this transformation will overlay the text `Freddy` to the image `blankCanvas.png` using your custom font and set the font size to 120.

You can get this URL with transformations programmatically in several ways. The easiest one would be to splice the URL and insert the transformation.

If you want to keep using REST API, you can generate the URL by calling the Explicit API (https://cloudinary.com/documentation/image_upload_api_reference#explicit). This API is used to apply action to an already existing asset. For your use case, you want to apply a transformation to an existing asset `blankCanvas`.  

Please see the attached screenshot for reference.

Hope this helps!

Prasanna

Thanks for the reply!

1. I have uploaded the font "ModernBohemianScript-Regular.ttf"
2. I attempt to upload the text "Freddy". This is where I'm having trouble with the font showing up. (I'm realizing I'm calling the resulting uploaded file blankCanvas.png, and I'm not referring to a file called blankCanvas.png. It might be best to ignore the name, I just want to upload the text using the upload API.)
3. I'm able to have the font show up on a URL transformation so that's not a problem for me. I also was able to accomplish this using the Explicit API you mentioned. The problem is, I'm not able to obtain the height and width of the text using this method.

My focus is just the 2nd point, I'm not sure if I explained it properly. I'm trying to upload just a text using a certain font. In this case, I'm trying to upload the name Freddy with the font 'ModernBohemianScript-Regular.ttf", the goal being that I receive the resulting height and width of that text interpreted by Cloudinary.

This is what I'm using as a reference. (https://cloudinary.com/documentation/image_upload_api_reference#text).

Zachary

Hi there,

Can you please try uploading the font as authenticated raw file and please let me know if you are still having issues?

See this quick guide:

https://cloudinary.com/product_updates/custom_fonts

Prasanna

Thanks for the reply!

I used postman to upload the custom font as an authenticated raw file as the link suggests.

I get this as a response

It seems to exist in the Media Library.

But when I retry the upload text request I get the same result.

Result:

Image:

Tom

Hi @Prasanna ,

Thanks for waiting. 

Just a quick update to say we are checking this further and it's possible that custom fonts are not supported when generating an image from a textual string.

I do not have an ETA but will update you as soon as we know more.

Please let me know if you have any other questions or queries.

Kind Regards,

Thomas

Prasanna

Hi @Tom

No worries! Let me know if you have any more information about this! I'll see if there's any workarounds for what I'm trying to accomplish.

Best Regards,

Prasanna Thuraisingam

Prasanna

However, I am wondering if this would be possible on the transformation URL API. The steps would be the following:

• Upload a single name/word (The name would be variable)
• Crop down to the boundaries of said name (Cropping down to the bounding box)
• Using the resulting image to find the height and width of that name

Let me know if my use case make sense!

DannyFromCloudinary

Hi again, @Prasanna .

At this time, custom fonts aren't supported in the text method, so the workaround you've proposed above isn't likely to work

We have raised this internally, so hopefully in the next few days we'll have some more answers and can update the thread here.

We'll be in touch when we can :)

Kind regards,

-Danny

DannyFromCloudinary

Hey @Prasanna .

It seems this requires a not-insignificant amount of work to resolve, so the internal ticket may be open for some time. Unfortunately, I can't provide an ETA, but once we have an update, we will be sure to share it with you.

Kind regards,

-Danny