OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Is there a way for Outlook Web client to respect font-family and font-size? Pasted content is converted to Aptos 12pt, drag and drop does not

  • Thread starter Thread starter Aden
  • Start date Start date
A

Aden

Guest
My work has a signature block generator web page that staff enter their details into, click copy, and paste their signature into Outlook. Branding CSS is added to the signature through both CSS selectors and inline style attributes with JS, and copying is done using the JS Clipboard API.

This works great for Outlook desktop version 2308 but recently Microsoft has updated Outlook for Web and pasting the signature on this platform no longer works. Using Chrome Version 125.0.6422.142

The following element is styled as Calibri 11pt.

Code:
<div style="font-family:Calibri,Helvetica,sans-serif; font-size:11pt;">
    <span style="font-family:Calibri,Helvetica,sans-serif; font-size:11pt;">
       Test
    </span>
</div>

Copying the element and pasting it into Web Outlook changes it to:

Code:
<div style="font-family:Aptos,Aptos_EmbeddedFont,Aptos_MSFontService,Calibri,Helvetica,sans-serif; font-size:12pt;">
    <span>
       Test
    </span>
</div>

Web Outlook is forcing the pasted signature to use font-family and font-size Aptos 12pt respectively.

Alternatively, selecting the element with your cursor and dragging it into Web Outlook retains all styling with no problems.


  • Changing the default message format font has no effect on this.


  • Using !important has no effect.


  • Changing how the JavaScript copies the signature? Since drag and drop is working as copy and paste is expected to work, is there any hacky way to make the clipboard API in JS work similar to dragging and dropping the signature? I have tried using blob and ClipboardItem objects (and any other methods I can find), but cannot get pasting to behave the same as drag and drop.


  • Web Outlook is cleansing the signature on paste? If this is the case I can't imagine there will be any fix as Microsoft are forcing Aptos on pasted contents.

<p>My work has a signature block generator web page that staff enter their details into, click copy, and paste their signature into Outlook. Branding CSS is added to the signature through both CSS selectors and inline style attributes with JS, and copying is done using the JS Clipboard API.</p>
<p>This works great for <code>Outlook desktop version 2308</code> but recently Microsoft has updated <code>Outlook for Web</code> and pasting the signature on this platform no longer works. Using <code>Chrome Version 125.0.6422.142</code></p>
<p>The following element is styled as Calibri 11pt.</p>
<pre><code><div style="font-family:Calibri,Helvetica,sans-serif; font-size:11pt;">
<span style="font-family:Calibri,Helvetica,sans-serif; font-size:11pt;">
Test
</span>
</div>
</code></pre>
<p>Copying the element and pasting it into Web Outlook changes it to:</p>
<pre><code><div style="font-family:Aptos,Aptos_EmbeddedFont,Aptos_MSFontService,Calibri,Helvetica,sans-serif; font-size:12pt;">
<span>
Test
</span>
</div>
</code></pre>
<p>Web Outlook is forcing the pasted signature to use <code>font-family</code> and <code>font-size</code> Aptos 12pt respectively.</p>
<p><strong>Alternatively, selecting the element with your cursor and dragging it into Web Outlook retains all styling with no problems.</strong></p>
<ul>
<li><p>Changing the default message format font has no effect on this.</p>
</li>
<li><p>Using <code>!important</code> has no effect.</p>
</li>
<li><p><strong>Changing how the JavaScript copies the signature?</strong> Since drag and drop is working as copy and paste is expected to work, is there any hacky way to make the clipboard API in JS work similar to dragging and dropping the signature? I have tried using <code>blob</code> and <code>ClipboardItem</code> objects (and any other methods I can find), but cannot get pasting to behave the same as drag and drop.</p>
</li>
<li><p><strong>Web Outlook is cleansing the signature on paste?</strong> If this is the case I can't imagine there will be any fix as Microsoft are forcing Aptos on pasted contents.</p>
</li>
</ul>
 
Top