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

Question

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?

4444.png

3333.png

2222.png

1111.png

Stephen Deutsch · Accepted Answer

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.