nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

How to change the font in PDF Style Sheet

jainil trivedi

Hello,

I want to change the header font of the PDF.

To implement the change:

The stylesheet is implemented into the PDF Space Export Header section. The stylesheet is as below:

<table width=100%>
<tr>
<td width=100%>
<img style="float:left" src="download/attachments/7676432/Sterlit%20logo_4.png" alter="header image" />
</td>
<td width=100% >
<!--span style="float:right;font-family: arial;font-size: 16px;font-weight: bold;">User Guide EliteAAA-V6.10.0</span-->
<span style="float:right; font-family: Times New Roman,Calibri,Helvetica,sans-serif;font-size:16px;font-weight:bold;color:black">EliteAAA-V6.10.0</span>
</td>
</tr>
</table

In span tag of HTML, there are multiple fonts configured, but it only applies Calibri.

The CSS where body section is implemented is as below:

body { 
margin: 0;  
padding: 0;  
font-family: ConfluenceInstalledFont, Helvetica, Arial, sans-serif;  
}

I have questions regarding the same:

Is it mandatory to configure all the fonts? Because I have tried by implementing multiple font styles, but it does not consider any font.
Why can't we configure single font-style?

Accepted answers

All comments

Shannon S

Hi Jainil,

Can you please clarify exactly what you're looking to see on your page?

From my understanding, you want your header to have a specific font in Confluence, but you mentioned it's only applying one font.

Please provide me with an example of how your header should look vs what it's doing instead. I see the way you've applied your font-family is using a fall-back method, so if the Confluence Installed Font works, then it should stop there and not apply any of the other listed fonts.

Regards,

Shannon

jainil trivedi

Hi Shannon,

I want a header with the image on the left-hand side and a text on the Right-Hand side. The image is working perfectly. But while applying text, it is considering the default text i.e Times New Roman. I am applying the CSS as

<td width=100%>
<span style="font-family: Arial">Testing</span>
</td>
</tr>
</table>
<hr/>

It is not working. The text is not displayed in Arial.

Shannon S

Hi Jainil,

The code you're providing is HTML and not part of a CSS Stylesheet, so can you just confirm exactly where you are putting it?

As for CSS in the PDF export, have a look at Advanced PDF Export Customizations:

By default, Confluence provides Times New Roman, Helvetica or Courier fonts for use in PDF exports. You can use your own fonts for PDF exports by declaring them in a @font-face CSS rule in your PDF Stylesheet.

The following CSS rule example shows how to declare the Consolas font and apply it to some elements for your PDF export:
CSS - PDF STYLESHEET
@font-face { src: url(file:///usr/share/fonts/Consolas.ttf); -fs-pdf-font-embed: embed; } .code pre, .preformatted pre, tt, kbd, code, samp { font-family: Consolas, monospace; font-size: 9pt; }
The font path specified in the CSS must be the path to the font on the Confluence server.

Regards,

Shannon

jainil trivedi

Hi Shannon,

Thanks for the help. I will try the same.

Regards,

Jainil

Marta Finazzi

Good morning,

Is it possible to view the fonts in Arial family when the document is exported to Word and PDF? The viewing of the fonts is completely different when working on Confluence and when the document is exported to Word and PDF. How can I solve it?

Thanks!

Marta

Shannon S

Marta,

You have to refer to the font externally in your PDF Export CSS, or upload the font as I let Jainil know about earlier.

Can you let me know if you're having trouble with that?

Regards,
Shannon

Marta Finazzi

Hi, Shannon,

Thank you so much for your help. I'm not able to refer the Arial font in my PDF Export CSS. Could you explain me the right steps to do so, please? I'm sure I have to go to "Confluence administration" > Global PDF Stylesheet > but then I get lost. Or maybe I'm absolutely wrong...

Thanks in advance!

Regards,

Marta

Shannon S

Marta,

You can either set a global PDF CSS layout, or space-based.

Have a look at this: Customize Exports to PDF

To reference Arial, you need to use the method in Advanced PDF Export Customizations that I let Jainil know about:

<span>@font-face</span> <span>{</span> <span>src</span><span>:</span> <span>url(file:///usr/share/fonts/Arial.ttf)</span><span>;</span> <span>-fs-pdf-font-embed</span><span>:</span> embed<span>;</span> <span>}</span> <span>.code pre, .preformatted pre, tt, kbd, code, samp</span> <span>{</span> <span>font-family</span><span>:</span> Consolas, monospace<span>;</span> <span>font-size</span><span>:</span> <span>9pt</span><span>;</span> <span>}</span>

You'll need to link to your specific Arial font on your computer, and this wouldn't work for other users if their computer doesn't have the font in the same location.

Otherwise, you can upload it using the process at Create a PDF in another language and refer to it in your CSS as ConfluenceInstalledFont.

Regards,

Shannon

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Find more posts tagged with

confluence