font imported from HTML changed when used in Confluence
Asked by abhi kanojia:

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


Answers:
author: Shannon S
body: 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](https://confluence.atlassian.com/doc/styling-fonts-in-confluence-174751968.html)

Regards,

Shannon

comments: author: abhi kanojia
body: [@Shannon S](/t5/user/viewprofilepage/user-id/510046) 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; }
```


author: Shannon S
body: 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


Tags: atl-adm