Community
Products
Confluence
Questions
font imported from HTML changed when used in Confluence

font imported from HTML changed when used in Confluence

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

1 answer

0 votes

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

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

@Shannon S Thanks for the reply!!!! I have added the code here

HTML CODE:

!DOCTYPE HTML>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>CSS Menus</title>
  <link rel="stylesheet" type="text/css" href="assets/menus.css">
 </head>
 <body>
  <header>
   <a class="logo" href="#"><span>Everyday Things</span></a>
   <nav>
    <ul>
     <li><a href="#">Calendar</a>
      <ul>
       <li><a href="#">ADAS H & S Calendar</a></li>
       <li><a href="#">Team Calendar</a></li>
      </ul>
     </li>
     <li><a href="#">Our Team</a></li>
     
     <li><a href="#">Work Instructions</a>
      <ul>
       <li><a href="#">Pre - Processing</a>
        <ul>
         <li><a href="#">HERE True</a></li>
         <li><a href="#">First Generation</a></li>
        </ul>
       </li>
       <li><a href="#">Processing</a>
        <ul>
         <li><a href="#">HERE True</a></li>         
         <li><a href="#">First Generation</a></li>
         <li><a href="#">Montly Global DFP Runs</a></li>
        </ul>
       </li>
       <li><a href="#">Post - Processing</a>
        <ul>
         <li><a href="#">Monthly</a></li>
         <li><a href="#">Quarterly</a></li>
        </ul>
       </li>
      </ul> 
     </li>
     <li><a href="#">Python Scripts</a></li>
    </ul>
   </nav>
  </header>  
  <article>
   <div>
    <h1>abc:</h1>
    <p></p>
    <p></p>
    <p></p>
   </div>
  </article>
  <aside>
   <div>
    <h3> </h3>
    <p> </p>
   </div>
  </aside>
  
 </body>
</html>

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; width: auto; }


@media 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; }

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

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

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Forums

Product Q&A

Community resources

Support

Top groups

Community resources

Support

Learn

Community resources

Support

Events

Community resources

Support

font imported from HTML changed when used in Confluence

1 answer

Suggest an answer

Was this helpful?

Thanks!

TAGS

Atlassian Community Events