Though global (as it applies to the root HTML element of the document), the approach described above overrides the font-family defined in Tailwind Preflight configuration but ensure it remains in your compiled CSS, when used.
Please note: in the last scenario above, the font-family applied to the HTML element of your project could contain duplicate font listings, if already exiting in the CSS properties of Tailwind's .font-sans utility class (that is the case for the three fonts used in the example above).
Let's say you want to use IBM Plex Sans Variable as your custom sans font, with the regular Tailwind CSS .font-family sans, without override, make use of the snippet below, then import the font into your project;
The Base fonts consist of three families; two families based on 12 point screen fonts (one serif and one sans serif family) named Base-12, and one family based on 9 point screen fonts named Base-9, consisting of a total of 24 individual faces.
Most Emigre fonts are available as part of your Creative Cloud subscription, which includes a single user desktop license and web font hosting as long as your subscription is active. If you require a multi user license, or prefer to self host web fonts, please continue with your purchase.
Emigre, Inc. is a digital type foundry based in Berkeley, California. Founded in 1984, coinciding with the birth of the Macintosh computer, the Emigre team, consisting of Rudy VanderLans and Zuzana Licko, with the addition of Tim Starback in 1993, were among the early adaptors to the new technology. (More...)
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.
You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:font-serif to apply the font-serif utility at only medium screen sizes and above.
By default, Tailwind provides three font family utilities: a cross-browser sans-serif stack, a cross-browser serif stack, and a cross-browser monospaced stack. You can change, add, or remove these by editing the theme.fontFamily section of your Tailwind config.
You can optionally provide default font-feature-settings and font-variation-settings for each font in your project using a tuple of the form [fontFamilies, fontFeatureSettings, fontVariationSettings ] when configuring custom fonts.
For convenience, Preflight sets the font family on the html element to match your configured sans font, so one way to change the default font for your project is to customize the sans key in your fontFamily configuration:
I've been tasked with making a powerpoint theme for the company I work for and one of the requirements is that it uses a font that comes standard with most computers. What are some of the built-in sans serif fonts that graphic designers respect and use more frequently?
Of the original "web-safe" (that is, as close to universal as you'll get on the Web) sans-serifs (Arial, Impact, Tahoma, Trebuchet MS, Verdana), Verdana tends to get the most love. It's well-designed and is designed to be readable on the screen. It was designed by Matthew Carter, a respected typeface designer, and the design itself is pretty original, so it doesn't get panned for its existence and history as much as Arial does. Also, MoMA added it to its design collection, calling it (and the others in the collection) "a milestone in the history of typography". A scientific study (funded by Microsoft, so take with a grain of salt) touted Verdana's readability, particularly at small sizes. It was one of the first fonts that was designed with readability on the screen particularly in mind, so it has a large x-height (good for seeing the lowercase letters) and is well-hinted. These advantages will become less relevant as pixel density increases, but they're good things to look for in a screen font for now.
Arial is almost universally panned by designers (see above link), Impact isn't practical outside of headlines, and even though Tahoma is more or less Verdana's skinny brother, it doesn't tend to draw as much praise. I've personally never minded Trebuchet as a choice, but it doesn't seem to be as common.
If you're using Office 2007 or later, the ClearType collection comes into play. Three sans-serifs are available: Calibri, Candara, and Corbel. Everything I've read about and them adds to my personal opinion - they're good fonts to use. Wikipedia told me that "Calibri won the TDC2 2005 award from the Type Directors Club under the Type System category."
c80f0f1006