How do I modify CSS for a single Confluence Cloud page?

I'm trying to draft brand guidelines and ideally would like the page to be stylised in the recommended font styling. I'm using Confluence Cloud, and have noted that CSS is generally not allowed, according to https://confluence.atlassian.com/confcloud/restricted-functions-in-confluence-cloud-734070955.html.

However, I have noticed that if I use the default {style} macro and add:

body {
    font-family: "Open Sans", sans-serif;
}
.wiki-content, .wiki-content p, .wiki-content table, .wiki-content tr, .wiki-content td, .wiki-content th, .wiki-content ol, .wiki-content ul, .wiki-content li {
    font-family: "Open Sans", sans-serif;
}
h1 {
	font-weight: 300;
}
.monospace {
    font-family: "Roboto Mono", monospace;
}

and at the beginning I import the following font:

https://fonts.googleapis.com/css?family=Open+Sans|Roboto+Mono, so:

2222.png

and

1111.png

then the preview looks beautiful:

3333.png

As soon as one saves though, it returns back to normal.

4444.png

Does anyone know why this is happening/does anyone know how else to insert CSS?

1 answer

1 accepted

2 votes
Stephen Deutsch Community Champion Nov 11, 2016

Hi Jimmy,

It appears that the Confluence Macro parser engine converts all quotation marks (") to html quote strings ("), which aren't read properly by the browser. I tried removing the quotes around all of the font names, and it appeared to work, at least in Chrome. It's not ideal but maybe it will work for you too.

Works like a charm in both Firefox and Chrome smile Thanks!

Suggest an answer

Log in or Sign up to answer
How to earn badges on the Atlassian Community

How to earn badges on the Atlassian Community

Badges are a great way to show off community activity, whether you’re a newbie or a Champion.

Learn more
Community showcase
Posted Jul 10, 2018 in Confluence

We want to see the templates you've created in Confluence!

Hi Community, Jessica here from the Confluence Product Marketing team!  July’s community challenge is all about sharing pictures  — and as an extension of our first post on what ...

849 views 23 12
Join discussion

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you