Change font size and font color

Using Streamlit
1

I want to change the font color and size of the text written in cv2.imshow. Please tell the code… how to tackle this problem asap.
@randyzwitch

2

@randyzwitch please reply to my query asap !!!

3

Hi @UjjwalG,

Thank you for your patience :balloon:

It is not possible to change the color and font size of cv2 window titles. However, you can:

  1. Use st.markdown above your image to provide a title with the font family, size, and color of your choice and
  2. Display opencv2 images within your Streamlit app via st.image(image, channels="BGR")

Here is an example of how to do it, based on your code:

import streamlit as st
import cv2
import numpy as np

filename = "cat.png"
img = cv2.imread(filename, 1)
image = np.array([img])

original_title = '<p style="font-family:Courier; color:Blue; font-size: 20px;">Original image</p>'
st.markdown(original_title, unsafe_allow_html=True)
st.image(image, channels="BGR")

new_title = '<p style="font-family:sans-serif; color:Green; font-size: 42px;">New image</p>'
st.markdown(new_title, unsafe_allow_html=True)
st.image(image, channels="BGR")

Here’s the resulting output:

cv2-size-color
cv2-size-color1916×1056 99.5 KB

Hope this helps :grinning_face_with_smiling_eyes:

Happy Streamlit-ing! :balloon:
Snehan

2 Likes
5

Hello Snehan, is there anyway to set the font color of the label of a component like st.text_input?

3 Likes
7

If you’re looking to change component label/title font size, check out this discussion.

8

We now have a built-in feature to use colored text in st.write, st.markdown, st.header, etc (also works in widget labels!):

st.markdown("This is black and :red[this is red!]")

You can use the colors blue, green, orange, red, violet, gray/grey, and rainbow in the same way. See also the docstring of the body parameter. There’s no built-in way to chang the font size currently.