font imported from HTML changed when used in Confluence

Question

The font of the text changed when i write the code in HTML macro of confluence. The same code when run in normal browser, the font size, type and color is same as desired.

What needs to be done so that the font doesn't change??

P.S : I have used CSS for formatting and kept the CSS file in the same page in CSS macro in confluence

Shannon S · Answer

So both of these code blocks are being stored in your HTML macro in Confluence?

It looks like you want to use sans-serif?

Can you show us what the browser looks like on a normal page vs a Confluence page so I can see the issue?

Note that I'm not a professional and I only know the basics of HTML and CSS so I will try to help you the best I can.

Shannon

abhi kanojia · Answer

@Shannon S Thanks for the reply!!!! I have added the code here HTML CODE: !DOCTYPE HTML> CSS Menus

Everyday Things

abc:

CSS CODE: body { color: #777; font-size: 16px; font-family: sans-serif; margin: 0; padding: 0; } h1 { margin: 0px 0px 1em 0px; color: #076d6f; font-size: 1.7em; } h3 { margin: 0px 0px 1.5em 0px; color: #339999; font-size: 1.1em; font-weight: normal; letter-spacing: 2px; text-transform: uppercase; } a { color: #00a2ff; text-decoration: none; } header{ height: 450px; background: #eee url("banner.jpg") no-repeat center; margin-bottom: 50px; background-size: cover; position: relative; } header a.logo { position: absolute; display: block; width: 154px; height: 57px; background: url("logo.jpg") no-repeat 0; background-size: contain; z-index: 1; top: 15px; left: 20px; } header a.logo span { display: none; } article { width: 70%; float: left; margin-bottom: 75px; } article div { padding: 0px 40px 0px 40px; border-right: 1px solid #555; } aside { width: 30%; float: left; } aside div { padding: 0px 40px 0px 40px; } nav { background-color: rgba(0,0,0,.6); position: relative; padding: 45px 0px 0px 180px; } nav ul { list-style: none; margin: 0; padding: 0; } nav ul::after { content: ''; display: block; clear: both; } nav ul li:hover { background-color: rgba(0,102,102,.8); } nav ul li:hover > ul { display: block; } nav ul li a { display: inline-block; color: #fff; padding: 10px 20px; text-decoration:none; width: 125px; } nav ul li a:hover{ background-color: #339999 } nav ul ul { display: none; position: absolute; background-color: rgba(0,102,102,.8); } nav ul ul li { position: relative; } nav ul ul ul { left:100%; top: 0; } /* top level*/ nav > ul { padding-left: 35px; } nav > ul > li { float: left; } nav > ul > li > a { padding: 10px 20px 15px 20px; widthmedia screen and (max-width: 750px) header a.logo { width: 120px; height: 44px; } article { width: 100%; float: none; margin-bottom: 40px; } article div { margin: 0px 40px; padding: 0px 0px 30px 0px; border-right: none; border-bottom: 1px solid #555; } aside { width: 100%; float: none; }

Shannon S · Answer

Abhi,

Can you show us what CSS code you're using in Confluence that isn't working?

Have a look here for more information:

* Styling Fonts in Confluence

Regards,

Shannon