Add a font selector for title

[JulesL2]

Hi,

We could image to let the user choose a font from a list of fonts using FontProperties.family to get a name for each font.

This piece of code creates a menu where each button is labelled with font's name and its font is itself.

from nicegui import ui

fonts = [
    'Arial',
    'Verdana',
    'Helvetica',
    'Times New Roman',
    'Courier New',
    'Georgia',
    'Palatino',
    'Garamond',
    'Bookman',
    'Comic Sans MS'
]

sample_text = "This is some text"
with ui.row():
    preview = ui.label(sample_text).style(f'font-family: {fonts[0]}; font-size: 18px; margin-left: 20px')

    button = ui.button(fonts[0]).props('outline flat').classes('bg-white text-black w-48 justify-start').style('border: 1px solid #ddd; border-radius: 4px;')

    with button:
        ui.icon('arrow_drop_down').classes('ml-auto')

    with ui.menu() as menu:
        with ui.column().classes('no-wrap'):
            for font in fonts:
                def create_click_handler(selected_font):
                    def handler():
                        button.text = selected_font
                        preview.style(f'font-family: {selected_font}')
                        menu.close()
                    return handler
                ui.button(font) \
                    .props('flat no-caps text-left') \
                    .classes('w-48') \
                    .style(f'font-family: {font}; padding: 8px 16px;') \
                    .on('click', create_click_handler(font))
ui.run()

[JulesL2]

I did create something more robust with the dropdown buttons feature of nicegui in #95

We could extend this choice to stats font too