Adjusting fonts using Custom CSS

[Alicja Mostowik]

Hello All,

I was trying to change the font family in the Viewport Custom CSS section, no luck, unfortunately.

Can anyone please help? I am a definite beginner with CSS, managed to create a stylesheet for Confluence Server; however, now I'm forced to use the Cloud version and the Scroll Viewport seemed to be a great solution to adjust page styling. Sadly, the old stylesheet doesn't seem to work, and I had no success in creating any CSS code that would affect the displayed font.

Has any of you tried something like this? 

Would be really grateful for any help.

Best regards,

Alicja Mostowik

[David Majninger (K15t)]

Hi Alicja,

great to hear about users migrating their theme from Server to Cloud!

While I am no expert on CSS myself, I've seen some Viewport user use custom CSS code like this:

@import url("https://fonts.googleapis.com/css?family=<your-font>");

body,

main * {

  font-family: <your-font> !important;

}

This is aiming at pretty much everything and a problem that might need to be addressed is that some of the symbols used in the Help Center theme (like the magnifying glass in the search bar) are technically symbol font letters, so maybe it's worth creating exceptions for these ones.

Let me know if this helps you,

Cheers,

David

[Alicja Mostowik]

Hello David,

Thank you for the solution, it worked! I've tried this tag but without the "main *" and "!important" parts, so maybe that was the factor.

Would you also have any insight as to whether it is possible to adjust table formatting in the Viewport?

I've tried this, but it doesn't seem to have any effect on the table formatting:

table, 

tr {

  font-size: 12px;

  color: #696969;

  margin-left: auto; 

  margin-right: auto;

  page-break-inside: avoid;

  caption-side: bottom

}

th {

  background-color: #0057a7;

  color: #ffffff;

  font-size: 12px;

  font-weight: bold;

  line-height: 150%;

  vertical-align: middle;

}

As for moving from Server to Cloud--it certainly has its advantages, security being one of essential factors, but it terms of formatting and adjusting to CI requirements, it is nowhere near the Server version--I am speaking, of course, of the Confluence itself, not the Scroll extensions, as these simply save the Cloud version from being absolutely useless:)

Thank for your help!

Best regards,

Alicja Mostowik

[David Majninger (K15t)]

Hi Alicja, 

I'm glad my response was helpful.

Regarding the table styling examples you've provided, I think the issue is the same as with the initial font one, so maybe it's worth to quickly look at some foundational CSS concepts. With custom CSS injection, you're not writing CSS from scratch here, but rather adding to what our base theme already provides. The cascading nature of CSS kind of assumes that there are frequently multiple applicable styles for any element, so it decides to use the most specific one. Thus, when writing custom CSS, you need to not only make sure your code is valid, it also needs to be more specific than the theme CSS, so it can "come out on top" it when it's evaluated.

Here's some more info on CSS specificity: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

With the code you provided specifically, you can inspect the element in the browser and see if your styles are applied. For the th, they look like this:

The strikethrough ones are valid, but are overridden by more specific styles, so in order for them to apply, you need to make them more specific. An easy option is to just add the "!important" at the end of a statement, as I have done with the background-color above. This is generally not a great approach when writing CSS, but for the purposes of custom CSS, it's acceptable.

Let me know if that's helpful.

Cheers,

David