# Available fonts for plotting inside Plotly/PlotlyJS

**URL:** <https://discourse.julialang.org/t/available-fonts-for-plotting-inside-plotly-plotlyjs/89074>\
**Category:** General Usage\
**Tags:** plotlyjs\
**Created:** [October 21, 2022, 4:25pm UTC](https://discourse.julialang.org/t/available-fonts-for-plotting-inside-plotly-plotlyjs/89074 "2022-10-21T16:25:12Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![ellocco](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/ellocco/32/31331_2.png) [@ellocco](https://discourse.julialang.org/u/ellocco)\
**Post date:** [October 21, 2022, 4:25pm UTC](https://discourse.julialang.org/t/available-fonts-for-plotting-inside-plotly-plotlyjs/89074/1 "2022-10-21T16:25:12Z")

</div>

Is there a way to figure out which fonts are available that can be used for PlotlyJS-plots?

---

<div class="post-metadata">

**Author:** ![empet](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/empet/32/221303_2.png) [@empet](https://discourse.julialang.org/u/empet)\
**Post date:** [October 21, 2022, 8:18pm UTC](https://discourse.julialang.org/t/available-fonts-for-plotting-inside-plotly-plotlyjs/89074/2 "2022-10-21T20:18:23Z")

</div>

[https://plotly.com/julia/reference/layout/#layout-font](https://plotly.com/julia/reference/layout/#layout-font)

---

<div class="post-metadata">

**Author:** ![ellocco](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/ellocco/32/31331_2.png) [@ellocco](https://discourse.julialang.org/u/ellocco)\
**Post date:** [October 24, 2022, 9:33am UTC](https://discourse.julialang.org/t/available-fonts-for-plotting-inside-plotly-plotlyjs/89074/3 "2022-10-24T09:33:22Z")

</div>

Thanks!  
My hope was: that a command might exists that shows beside the available fonts also the related available typefaces of these fonts.  
The way I see it, it makes sense to trial out, if for a specific font, variable typefaces exist.  
Below my example to investigate available fonts under `PlotlyJS`:

```julia
using PlotlyJS
# --------------------------------------------------------------------------------------------------------------------------
# --- font examples
# --- available fonts: https://plotly.com/julia/reference/layout/#layout-font
# --- line-type /-mode: https://plotly.com/python/line-charts/#line-charts-with-markers
# --- styling markers: https://plotly.com/python/marker-style/
# --- annotions: https://plotly.com/python/text-and-annotations/
# --- HTML text formatting: https://www.w3schools.com/html/html_formatting.asp
# --------------------------------------------------------------------------------------------------------------------------
x1_ = 0.3 .* ones(10)
x2_ = 0.7 .* ones(10)
y_ = collect(range(0.9, step = -0.1, stop = 0.0))
plt_trace_1 = PlotlyJS.scatter(; x = x1_, y = y_, name = "trace1", mode = "markers")
plt_trace_2 = PlotlyJS.scatter(; x = x2_, y = y_, name = "trace2", mode = "markers", marker_symbol = "diamond", marker_size = 15)

plt_annotations = []
push!(plt_annotations, attr(; x = x1_[1], y = y_[1], 
    text = "1.) Courier New, monospace (left, bottom)",
    xanchor = "left",
    yanchor = "bottom",
    font_family = "Courier New, monospace",
    showarrow = true))
push!(plt_annotations, attr(; x = x1_[2], y = y_[2], 
    text = "2.) <i>Courier New, italic (center, bottom)</i>",
    xanchor = "center",
    yanchor = "bottom",
    font_family = "Courier New, condensed",
    showarrow = true))
push!(plt_annotations, attr(; x = x1_[3], y = y_[3], 
    text = "3.) Raleway, sans-serif (right, bottom)",
    xanchor = "right",
    yanchor = "bottom",
    font_family = "Raleway, sans-serif",
    showarrow = true))

push!(plt_annotations, attr(; x = x1_[4], y = y_[4], 
    text = "4.) Raleway, monospace (left, center)",
    xanchor = "left",
    yanchor = "center",
    font_family = "Raleway, monospace",
    showarrow = true))
push!(plt_annotations, attr(; x = x1_[5], y = y_[5], 
    text = "5.) Arial, monospace (center, center)",
    xanchor = "center",
    yanchor = "center",
    family = "Arial, monospace",
    showarrow = true))
push!(plt_annotations, attr(; x = x1_[6], y = y_[6], 
    text = "6.) Arial, sans-serif (right, center)",
    xanchor = "right",
    yanchor = "center",
    font_family = "Arial, sans-serif",
    showarrow = true))

push!(plt_annotations, attr(; x = x1_[7], y = y_[7], 
    text = "7.) Balto (left, top)",
    xanchor = "left",
    yanchor = "top",
    family = "Balto",
    showarrow = true))
push!(plt_annotations, attr(; x = x1_[8], y = y_[8], 
    text = "8.) Droid Sans (center, top)",
    xanchor = "center",
    yanchor = "top",
    font_family = "Droid Sans",
    showarrow = true))
push!(plt_annotations, attr(; x = x1_[9], y = y_[9], 
    text = "9.) Droid Sans, monospace (right, top)",
    xanchor = "right",
    yanchor = "top",
    font_family = "Droid Sans, monospace",
    showarrow = true))

push!(plt_annotations, attr(; x = x1_[10], y = y_[10], 
    text = "10.) Droid Serif (right, top)",
    xanchor = "right",
    yanchor = "top",
    font_family = "Droid Serif",
    showarrow = true))

# --- 2nd column: ----------------------------------------------------------------------------------------------------------
    push!(plt_annotations, attr(; x = x2_[1], y = y_[1], 
    text = "11.) Droid Sans Mono (left, bottom)",
    xanchor = "left",
    yanchor = "bottom",
    font_family = "Droid Sans Mono",
    showarrow = true))
push!(plt_annotations, attr(; x = x2_[2], y = y_[2], 
    text = "12.) Gravitas One (center, bottom)",
    xanchor = "center",
    yanchor = "bottom",
    font_family = "Gravitas One",
    showarrow = true))
push!(plt_annotations, attr(; x = x2_[3], y = y_[3], 
    text = "13.) Gravitas One, sans-serif (right, bottom)",
    xanchor = "right",
    yanchor = "bottom",
    font_family = "Gravitas One, sans-serif",
    showarrow = true))

push!(plt_annotations, attr(; x = x2_[4], y = y_[4], 
    text = "14.) Gravitas One, monospace (left, center)",
    xanchor = "left",
    yanchor = "center",
    font_family = "Gravitas One, monospace",
    showarrow = true))
push!(plt_annotations, attr(; x = x2_[5], y = y_[5], 
    text = "15.) Old Standard TT (center, center)",
    xanchor = "center",
    yanchor = "center",
    family = "Old Standard TT",
    showarrow = true))
push!(plt_annotations, attr(; x = x2_[6], y = y_[6], 
    text = "16.) Open Sans (right, center)",
    xanchor = "right",
    yanchor = "center",
    font_family = "Open Sans",
    showarrow = true))

push!(plt_annotations, attr(; x = x2_[7], y = y_[7], 
    text = "17.) Overpass (left, top)",
    xanchor = "left",
    yanchor = "top",
    family = "Overpass",
    showarrow = true))
push!(plt_annotations, attr(; x = x2_[8], y = y_[8], 
    text = "18.) PT Sans Narrow (center, top)",
    xanchor = "center",
    yanchor = "top",
    font_family = "PT Sans Narrow",
    showarrow = true))
push!(plt_annotations, attr(; x = x2_[9], y = y_[9], 
    text = "19.) Raleway (right, top)",
    xanchor = "right",
    yanchor = "top",
    font_family = "Raleway",
    showarrow = true))

push!(plt_annotations, attr(; x = x2_[10], y = y_[10], 
    text = "20.) PT Sans Narrow, monospace (right, top)",
    xanchor = "right",
    yanchor = "top",
    font_family = "PT Sans Narrow, monospace",
    showarrow = true))

plt_layout = PlotlyJS.Layout(;
    xaxis_range = [0.0, 1.0],
    xaxis_constrain = "domain",
    yaxis_range = [-0.1, 1.0],
    annotations = plt_annotations,
)

# PlotlyJS.relayout!(plt_hdl, showlegend = false,)
plt_hdl = PlotlyJS.Plot([plt_trace_1, plt_trace_2], plt_layout)

println(plt_hdl.layout.annotations[20][:font][:family])
println(plt_annotations[20][:font_family])

```

Interesting is also the `Plotly` example for  
[Text Font as an Array - Styling Each Text Element](https://plotly.com/python/text-and-annotations/)  
it includes also examples for `typesets` and an additional `font`