Change inline question font in distribution e-mail | XM Community
Solved

Change inline question font in distribution e-mail

  • 29 August 2018
  • 5 replies
  • 31 views

Badge +1
Hey guys. I'm trying to send a distribution e-mail that already includes the first question (an NPS question) inline. For some reason, when sent to business mailboxes, the table with the question changes the labels and numbers to times new roman, while mainting the title in Arial. Do I need to add some code for the headers and the options? Here is the CSS code, the part where the font changes to Times New Roman in bold:

<span style="font-size:13px;"><span style="font-family:arial,helvetica,sans-serif;">TEXT<br />
<table align="left" border="0" cellpadding="0" style="background-color:#F2F4F8;border:1px solid #D9DBDE;border-radius:3px;font-family:arial,sans-serif;max-width:600px;">
<tbody>
<tr>
<td style="font-size:15px;padding:16px 16px 16px 16px;">${q://QID6/QuestionText}</td>
</tr>
<tr>
<td style="padding:0 16px 4px 16px;">
<table border="0" cellpadding="0" cellspacing="0" style="color:#A5A5A5;font-size:13px;" width="100%">
<tbody>
<tr>
<td align="left">${q://QID6/ColumnLabel/0}</td>
<td align="right">${q://QID6/ColumnLabel/1}</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="padding:0 16px 16px 16px;">
<table border="0" cellpadding="0" cellspacing="0" style="text-align:center;" width="100%">
<tbody>
<tr>
<td style="font-size:18px;width:40px;border-radius:3px;background:#fff;border:1px solid #666;"><a href="${l://ChoiceLink/QID6/0}" style="display:block;text-decoration:none;color:#000000;background:#fff;line-height:40px;border-radius:3px;white-space:nowrap;">${q://QID6/ChoiceDescription/0}</a></td>
<td style="width:4px;height:40px"> </td>
<td style="font-size:18px;width:40px;border-radius:3px;background:#fff;border:1px solid #666;"><a href="${l://ChoiceLink/QID6/1}" style="display:block;text-decoration:none;color:#000000;background:#fff;line-height:40px;border-radius:3px;white-space:nowrap;">${q://QID6/ChoiceDescription/1}</a></td>
<td style="width:4px;height:40px"> </td>
<td style="font-size:18px;width:40px;border-radius:3px;background:#fff;border:1px solid #666;"><a href="${l://ChoiceLink/QID6/2}" style="display:block;text-decoration:none;color:#000000;background:#fff;line-height:40px;border-radius:3px;white-space:nowrap;">${q://QID6/ChoiceDescription/2}</a></td>
<td style="width:4px;height:40px"> </td>
<td style="font-size:18px;width:40px;border-radius:3px;background:#fff;border:1px solid #666;"><a href="${l://ChoiceLink/QID6/3}" style="display:block;text-decoration:none;color:#000000;background:#fff;line-height:40px;border-radius:3px;white-space:nowrap;">${q://QID6/ChoiceDescription/3}</a></td>
<td style="width:4px;height:40px"> </td>
<td style="font-size:18px;width:40px;border-radius:3px;background:#fff;border:1px solid #666;"><a href="${l://ChoiceLink/QID6/4}" style="display:block;text-decoration:none;color:#000000;background:#fff;line-height:40px;border-radius:3px;white-space:nowrap;">${q://QID6/ChoiceDescription/4}</a></td>
<td style="width:4px;height:40px"> </td>
<td style="font-size:18px;width:40px;border-radius:3px;background:#fff;border:1px solid #666;"><a href="${l://ChoiceLink/QID6/5}" style="display:block;text-decoration:none;color:#000000;background:#fff;line-height:40px;border-radius:3px;white-space:nowrap;">${q://QID6/ChoiceDescription/5}</a></td>
<td style="width:4px;height:40px"> </td>
<td style="font-size:18px;width:40px;border-radius:3px;background:#fff;border:1px solid #666;"><a href="${l://ChoiceLink/QID6/6}" style="display:block;text-decoration:none;color:#000000;background:#fff;line-height:40px;border-radius:3px;white-space:nowrap;">${q://QID6/ChoiceDescription/6}</a></td>
<td style="width:4px;height:40px"> </td>
<td style="font-size:18px;width:40px;border-radius:3px;background:#fff;border:1px solid #666;"><a href="${l://ChoiceLink/QID6/7}" style="display:block;text-decoration:none;color:#000000;background:#fff;line-height:40px;border-radius:3px;white-space:nowrap;">${q://QID6/ChoiceDescription/7}</a></td>
<td style="width:4px;height:40px"> </td>
<td style="font-size:18px;width:40px;border-radius:3px;background:#fff;border:1px solid #666;"><a href="${l://ChoiceLink/QID6/8}" style="display:block;text-decoration:none;color:#000000;background:#fff;line-height:40px;border-radius:3px;white-space:nowrap;">${q://QID6/ChoiceDescription/8}</a></td>
<td style="width:4px;height:40px"> </td>
<td style="font-size:18px;width:40px;border-radius:3px;background:#fff;border:1px solid #666;"><a href="${l://ChoiceLink/QID6/9}" style="display:block;text-decoration:none;color:#000000;background:#fff;line-height:40px;border-radius:3px;white-space:nowrap;">${q://QID6/ChoiceDescription/9}</a></td>
<td style="width:4px;height:40px"> </td>
<td style="font-size:18px;width:40px;border-radius:3px;background:#fff;border:1px solid #666;"><a href="${l://ChoiceLink/QID6/10}" style="display:block;text-decoration:none;color:#000000;background:#fff;line-height:40px;border-radius:3px;white-space:nowrap;">${q://QID6/ChoiceDescription/10}</a></td>
</tr>
</tbody>

</table>
</td>
</tr>
</tbody>
</table>

<p><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<span style="font-size:13px;"><span style="font-family:arial,helvetica,sans-serif;">TEXT<br />
<br />
TEXT</span></span><br />
<br />
<img height="112" src="https://survey.eu.qualtrics.com/CP/Graphic.php?IM=IM_2nKOA86HGI14Se9" style="width: 250px; height: 112px;" width="250" />
icon

Best answer by TomG 29 August 2018, 20:54

View original

5 replies

Userlevel 7
Badge +27
Add the `font-family:arial,sans-serif;` style to the inner `<table>` (second table) element.
Badge +1
@TomG sorry for the questoin, I'm not really an avid CSS programmer; but where should I add the font-family, and does it need to be preceded by anything else?
Userlevel 7
Badge +27
> @GabrielRibeiro said:
> @TomG sorry for the questoin, I'm not really an avid CSS programmer; but where should I add the font-family, and does it need to be preceded by anything else?

Change this:
```
<table border="0" cellpadding="0" cellspacing="0" style="color:#A5A5A5;font-size:13px;" width="100%">
```
to this:
```
<table border="0" cellpadding="0" cellspacing="0" style="color:#A5A5A5;font-size:13px;font-family:arial,sans-serif;" width="100%">
```
And this:
```
<table border="0" cellpadding="0" cellspacing="0" style="text-align:center;" width="100%">
```
to this:
```
<table border="0" cellpadding="0" cellspacing="0" style="text-align:center;font-family:arial,sans-serif;" width="100%">
```
Badge +1
@TomG unfortunately that didn't work. Is there any reason why it would be changing to Times New Roman automatically on outlook?
Userlevel 7
Badge +27
I think Times New Roman is the default font. You can try styling the td and a tags. Try one or two before doing them all.

Leave a Reply