Knowledge base articles have different fonts in service management and confluence

[Alexandra Bobrow (Instech)]

When viewing a knowledge base article in Jira Service Management and the same article in Confluence, the font-family used in Confluence is a sans serif font while the font in Jira Service Management is a serif font (Times New Roman).

I found this article referring to the exact problem I am experiencing, but it says it is only applicable to Server and not Cloud. https://confluence.atlassian.com/jirakb/knowledge-base-article-have-different-styling-between-jira-and-confluence-937892035.html

Since it is not possible to change the CSS for KB articles in JSM, it would be great if the font styling could either be manually changed or at least be the same in both systems. The buttons in JSM are currently all in a sans serif font so it looks messy when the article text is all in serif. Is this an issue or is this intended behavior? Will CSS functionality be coming to Cloud anytime soon? Thanks.

UPDATE: It looks like this issue mainly occurs when viewing a KB article in JSM from a location within Europe (physically or VPN), as the font displayed is fine when viewing the website from the US. However, not all European users experience this issue.

[Angélica Luz · Accepted solution]

Hello Alexandra,

Thank you for reaching out to Atlassian Community!

Testing on my local site, I checked the font family of the portal and from Confluence are basically the same:

Portal (when viewing an article):

font-family: -apple-system, BlinkMacSystemFont, ‘Segoe UI’, ‘Roboto’, ‘Oxygen’, ‘Ubuntu’, ‘Fira Sans’, ‘Droid Sans’, ‘Helvetica Neue’, sans-serif;

Confluence page:

font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, “Roboto”, “Noto Sans”, “Ubuntu”, “Droid Sans”, “Helvetica Neue”, sans-serif;

I wasn't able to see much difference between the page in Confluence and the Customer portal. 

I understand that it has its differences because it's different products, but currently, it's not possible to change the font and style.

There are feature requests suggesting improvements for that:

• Ability to have the JIRA Look and Feel on Customer Portal
• Enable custom css for JIRA Service Desk

Please, click on vote and watch to receive updates about the features.

Kind regards,
Angélica

[Alexandra Bobrow (Instech)]

Hi Angélica, if what you are saying is correct, that the fonts should be the same then what I am seeing is a bug.

I just checked Confluence and customer portal on both a mac with safari and chrome, and on a pc in chrome and edge, and incognito mode, and all show the same mistake. The font shown in Confluence is the same as in your example, a sans-serif font, but when viewing an article in the customer portal the font is changed to the serif font Times New Roman. This is the same error as in https://confluence.atlassian.com/jirakb/knowledge-base-article-have-different-styling-between-jira-and-confluence-937892035.html

Is it possible for someone to look into this? This article says it does not relate to Cloud, but I have Cloud and this issue is occurring. Thanks.

[Alexandra Bobrow (Instech)]

Just a few days ago, like January 28th, this is what the customer portal (jira service management) looked like.

[Alexandra Bobrow (Instech)]

This is what it looks like today. So something has happened within the past few days.

[Michael Tanser]

We're having the exact same problem on Cloud. I created the page in Confluence and added it to the KB - when I view it through the portal, it looks as it should. But if anyone else looks at it in portal from their pc, it's all in Times New Roman. Would be very keen to find a fix for this please, thank you.

[Alexandra Bobrow (Instech)]

That's interesting that you see the same font but others don't. If you clicked the link in my post you will see that Atlassian say they currently do not know why this is happening and that they are not looking to fix it, but this was in reference to the issue being found in Server, not Cloud. Thinking of creating a bug for this. 

[Michael Tanser]

I just tried opening the page on my pc using a different browser - Chrome (the browser I used to create) is still showing it how it should for me, but on Safari and on my mobile phone it's Times New Roman. From a customer experience perspective, that's not the easiest or nicest font to read - and it throws out the layout in some places. Very frustrating.

[Alexandra Bobrow (Instech)]

It would be one thing if everything in Jira Service Management was a serif font like Times New Roman, which would not look great but at least it would be uniform... but currently the buttons are all sans-serif and the headings are all sans-serif, it is only the body text of an article which is serif (TNR). There is plenty of UX research showing that it is easier to read sans-serif fonts on digital devices whereas it is easier to read serif fonts on paper, so the obvious solution is to fix the error and revert back to a sans-serif font for everything.

[Alexandra Bobrow (Instech)]

Another one of my colleagues checked and he says that for us only we see Times New Roman, but that customers see it correctly.

EDIT: I logged in with a guest account, like a customer would without Microsoft single sign on, and I also see Times New Roman.

[Michael Tanser]

Hmm... our customers are required to log into Atlassian to be able to view portal content. Would that mean they would be affected by the bug?

[Alexandra Bobrow (Instech)]

Not sure. Create a new customer with your private email for example and test it.

[Angélica Luz]

Hi @Alexandra Bobrow (Instech) and @Michael Tanser,

Thank you for sharing more details and tests. 

I tested here using admin and customer only account on Mac (Chrome and Firefox), Windows 10 (Chrome and Edge), and on my Android mobile (Chrome), but I wasn’t able to replicate this issue. 

There is another thread here in the community that mentions the exact same error and the customer shared the link to an article in their portal, but it worked fine for me. 

It seems that it can be related to some network issue, so it would be great if you could test using another computer on another network. 

Kind regards,
Angélica

[Alexandra Bobrow (Instech)]

As previously mentioned, my colleague on another network at a different location than me was able to replicate the issue. When logged in as an admin, he saw Times New Roman. When logged in as a customer he saw the correct sans-serif font. EDIT: For me, regardless of whether I log in as an admin or customer, the issue happens for regardless of browser or computer type, even in incognito/private mode.

I was also able to recreate the issue within confluence: when adding the child macro to an article, the text shown in the preview window is Times New Roman. When clicking done, the child macro appears in correct sans-serif font (in Confluence) once published. Previously the text shown in the preview window was also sans-serif.

[Angélica Luz]

Thank you, @Alexandra Bobrow (Instech). I'm sorry that I didn't realize that you already said that. 

Are you and your team using VPN?

Would you mind sharing with us the location of the VPN you are connected to?

This is the other thread I mentioned and for them, it happens only when connected to a VPN in Europe, so it's important to check if it happens in a specific region. 

Also, it would be important to check if there is no policy on your company that might be preventing the fonts to be downloaded.

[Alexandra Bobrow (Instech)]

No worries. I am not using a VPN. I see the error when using my normal home network both on my work laptop (lenovo pc) and on my 2 personal computers (mac and dell linux). Also see the error using my work iPhone on a 4G network. I log in with Microsoft single sign on whereas customers just log in with normal email. I will be at my office tomorrow and check if the same thing happens on their network. I am also located in Europe. I only experienced this issue as of a few days ago.

EDIT: Regardless of whether I am logging in as an admin or as a customer the issue occurs.

[Alexandra Bobrow (Instech)]

I wrote this in the other discussion: Both confluence and Jira Service Management use sans-serif for their websites. However the text from a confluence article when shown in JSM is being displayed in an iframe with no css styling for fonts. Even though the Confluence and JSM websites have css font styles of sans-serif, the iframe is unable to inherit styling from it.

[Florian Weiss]

Thank you for analyzing the issue further. As I mentioned in my own thread which was posted on the same day as yours we also experience this problem. (I closed my own thread and redirected people to this one so we have a common place to evaluate this)

What I can confirm (see screenshots in https://community.atlassian.com/t5/Jira-Service-Management/Service-Portal-Articles-appear-in-Times-New-Roman/qaq-p/1599185?utm_campaign=&utm_content=post&utm_medium=email&utm_source=atlcomm#U1601544) is that the location effects the font styling. (accessing from the US results in the correct display of fonts, accessing from Europe results in Times New Roman. Both times I was NOT logged on)

[Alexandra Bobrow (Instech)]

Florian, I edited the text of this post with an update about locations. Thanks for that piece of information. I am not using a VPN but am in Europe and have this issue. 

Angélica, I am now at the office using yet another network and still having the same issue. Once again, this issue is always there regardless of network (have not tried VPN outside of Europe) or computer or browser. The issue occurs for me regardless of whether or not I am logged in as admin (with Microsoft single sign on) or as a customer (with normal email).

[Angélica Luz]

Thank you for all the updates and details.

I escalated this internally and mentioned the details and the threads.

My teammates that are based in Amsterdam were also able to replicate the issue. I’m in Brazil and I connected to a VPN in Europe but it still works fine for me. 

Once I have updates, I’ll post them here.

[Angélica Luz]

Hello everyone,

I created a bug ticket for our dev team to check:

• Knowledge base articles are showing in Times New Roman for users in Europe

Most of our developers are based in Australia, so it will take a little while for them to see this, but I’ll keep an eye on it and update here. 

Please, click on “This affects my team” and also watch the bug.

I added the link to this thread as an internal comment, but feel free to share any other details in the comments.

[Nick Chaggar]

@Angélica Luz 

Hello, I am seeing the same issue for myself and I am in the US. The Editable article has the regular font but the published article is completely different font (second image). Please advise, thanks.

1. First Image - editable version in confluence. 

2. Second Image - published version. 

[Angélica Luz]

Hello @Nick Chaggar,

Welcome to Community!

I saw your comment on the bug ticket and I’m glad that the issue was resolved by clearing the cache. 

@Alexandra Bobrow (Instech), @Florian Weiss @Michael Tanser:

Our dev team rolled out a fix (about 9 hours ago), can you please check if the issue is still happening?

Thank you!

Kind regards,
Angélica

[Florian Weiss]

I can confirm that the behavior is back to the intended one. (correct font)

Confirmed with Firefox (85.0.2, standard page refresh) and Chrome (Version 88.0.4324.150, refresh with client side cache clear)

Thank you @Angélica Luz 

[Alexandra Bobrow (Instech)]

I can also confirm that the KB articles in Service Management are showing the expected behaviour. Tested in Chrome as admin and Edge as customer and did not clear the cache or cookies.

[Brent Willems]

I just noticed this issue a few hours ago, luckily I found this discussion! I cleared my browser cache (Chrome) and the issue went away. Thx, everyone!