Online chart has different formatting

[vkshiro]

I made a bar chart in Jupyter Notebook using Python and it works fine. However, when I look at the chart online, the formatting is different (hover text is there, font is different, etc).
Here’s my code: (not sure how to make code look right on here, but obviously the indentation is wrong)
data = [go.Bar(x = scores,
y = phrases,
orientation = ‘h’,
text = bar_text,
textposition = ‘inside’,
insidetextfont = dict(
size = 30,
color = ‘white’
),
opacity =.7,
marker = dict(
color =’#E41B17’,
line = dict(
color =’#000000’,
width = 1),
),
)]
layout = dict(
width = 600,
font = dict(family = ‘PT Sans Narrow’),
yaxis = dict(
showgrid = False,
showticklabels = False
),
xaxis=dict(title=’% Likelihood Phrase in Right Headlines’)
)

fig = go.Figure(data=data, layout=layout)
py.iplot(fig, filename='right_headlines')

And here it is online:
https://plot.ly/~VanessaVanG/15/

What’s also strange is the font is correct in the preview box on my files page.

[jmmease]

Hi @vkshiro,

Do you think it could be an issue with sizing? When I visit the link, here’s the figure I see:

If I zoom into 200% (or resize the browser to much smaller), here’s what I get:

.

It looks to me like this is the correct font, but perhaps it’s a little bolder than the image you’re showing.

-Jon

[vkshiro]

That’s odd–when I visit it, and when I resize the window, the font is still serif font–not the sans serif (which is what it should be) that you see. (I do understand that when it’s a large chart, the font size looks smaller inside the bars but the font should be sans serif!)

Here’s the screenshot from online:

[vkshiro]

I’ve viewed this in Chrome and Edge with the same results.

[jmmease]

Hmm, I’m not really sure how to diagnose font issues like this. Have you experimented with other fonts? Do any of them show up for you online?
-Jon