Font Family Apple-system
Henoch Holverson
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. -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.
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 -base-article-have-different-styling-between-jira-and-confluence-937892035.html
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.
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.
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.
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.
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.
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.
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.
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)
Anglica, 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).
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.
This particular text has the font-family set to : "SF Pro Text", "SF Pro Icons", system, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", "Ubuntu", "Cantarell", "Fira Sans", sans-serif. I assume that I don't have SF* fonts, so the first thing that loads is the system font, which is rendered as above. Indeed, if I change any font to system, it becomes this pixelated one:
The question in my head was: why yet another way to specify a generic font family? My mental model for fonts in CSS has always been: specify a couple specific fonts, then provide fallbacks to generic fonts. So if you wanted the system to use its sans-serif font, why not have that be your font declaration, i.e. sans-serif?
In CSS, you have the font-family property and then a value, which according to the spec can be a or a . A family name would be something like Helvetica while a generic name would be something like sans-serif. Once you have one or more family family/generic names declared, the browser tries to map every character of text to one of the fonts specified:
A user agent iterates through the list of family names until it matches an available font that contains a glyph for the character to be rendered. This allows for differences in available fonts across platforms and for differences in the range of characters supported by individual fonts.
Note: [these] must always map to at least one matched font face. However, no guarantee is placed on the character coverage of that font face. Therefore, the font [these are] mapped to may not end up being used for all content.
A generic font family is a font family which has a standard name (as defined by CSS), but which is an alias for an existing installed font family present on the system...Different generic font families may map to the same used font.
Generic font families are intended to be widely implemented on many platforms, unlike arbitrary s which are usually platform-specific names. [Generic families] are expected to map to different fonts on different platforms.
User agents should provide reasonable default choices for the generic font families, that express the characteristics of each family as well as possible, within the limits allowed by the underlying technology. User agents are encouraged to allow users to select alternative faces for the generic font families.
So how does one know what something like system-ui means on each platform? I suppose that would just take research. Research that I cannot do because I do not have the device inventory to do so (or, honestly, the time or desire). But it would be nice if there was a dictionary of this somewhere, i.e.
On platforms which do not support -apple-system, the browser will simply fall back to the next item in the font-family fallback list. This provides a great way to make sure all your users get a great experience, regardless of which platform they are using.
There are currently discussions in the w3c regarding standardizing this value so authors could simply specify system. However, these discussions have not reached consensus, so WebKit prefixes this value.
Going beyond the system font, iOS has dynamic type behavior, which can provide an additional level of fit and finish to your content. These text styles identify more than simply a particular font family; instead, they represent an entire style, including size and weight. These styles are therefore characterized by values given to the more-general font CSS property. The supported values are:
I am trying to add a font-family to my web page but for some reason its not working I added the font files into the resources (and set the targeted directory) added the font face to my style sheet like so
You can find the Apple SF Pro font family here. It's Apple's System font, and can also be used as a Modern Sans font or for animating any Apple related design use cases (e.g. UI design on Apple platforms, that's why it's important this gets fixed)
System fonts: Free, look pretty darn good as they match the OS, and no download time required! They are used by GitHub, Bootstrap, Medium, Ghost, Booking.com (read their system font story), and even your WordPress dashboard. In my personal opinion system fonts look slightly better on macOS versus Windows.
Avoid chaining critical requests 4 chains found
The Critical Request Chains below show you what resources are loaded with a high priority. Consider reducing the length of chains, reducing the download size of resources, or deferring the download of unnecessary resources to improve page load. Learn more.