You're on the right track by modifying the msdyn_EmailRTEconfig_referenceonly.js file and uploading your TTF as a web resource. However, there are a few key steps and considerations that need to be in place for your custom font to appear and render correctly in the Rich Text Editor (RTE) for emails in Dynamics 365 Customer Insights - Journeys (and potentially other areas using the same RTE).
Here's a breakdown of the process and potential troubleshooting steps:
1. Correctly Modifying msdyn_EmailRTEconfig_referenceonly.js:
The way you add custom fonts to the RTE configuration involves updating the fontFamily array. Ensure your modification is syntactically correct. It should look something like this:
(function () {
if (typeof (CKEDITOR) !== 'undefined') {
CKEDITOR.config.font_names =
'Arial/Arial, Helvetica, sans-serif;' +
'Comic Sans MS/Comic Sans MS, cursive;' +
'Courier New/Courier New, Courier, monospace;' +
'Georgia/Georgia, serif;' +
'Lucida Sans Unicode/Lucida Sans Unicode, Lucida Grande, sans-serif;' +
'Tahoma/Tahoma, Geneva, sans-serif;' +
'Times New Roman/Times New Roman, Times, serif;' +
'Trebuchet MS/Trebuchet MS, Helvetica, sans-serif;' +
'Verdana/Verdana, Geneva, sans-serif;' +
'Your Custom Font Name/Your Custom Font Name;'; // Add your font here
}
})();
Important Considerations for the Configuration File:
- Case Sensitivity: Ensure the "Your Custom Font Name" you add here exactly matches the
font-family name you'll use in your CSS (explained in step 3).
- No Spaces in Font Family Name (Recommended): While spaces might work in some contexts, it's generally safer to use hyphenated or camel-cased names for your custom font family in both the configuration and CSS. For example,
Your-Custom-Font.
- Clear Cache: After modifying and saving the web resource, make sure to clear your browser's cache (Ctrl+Shift+Delete or Cmd+Shift+Delete) and perform a hard refresh (Ctrl+F5 or Cmd+Shift+R) in Dynamics 365.
2. Uploading the TTF File as a Web Resource:
You've already done this, which is correct. Your TTF file needs to be accessible by the browser.
3. Making the Font Available via CSS:
The browser needs to know how to render your custom font. This is done using CSS @font-face rule. You need to create another web resource (of type CSS) to define this rule.
- Create a CSS Web Resource:
- Go to Settings > Customization > Customize the System > Web Resources.
- Click New.
- Enter a Name (e.g.,
custom_font_style.css).
- Enter a Display Name (e.g.,
Custom Font Style).
- For Type, select Style Sheet (CSS).
- In the Text Editor, add the following CSS rule, replacing the placeholders with your actual values:
@font-face {
font-family: 'Your Custom Font Name'; /* Must match the name in the JS config */
src: url( ../WebResources/new_yourcustomfont.ttf') format('truetype ); /* Adjust the path to your TTF web resource */
/* You can add font-weight and font-style properties here if needed */
}
Explanation of the CSS:
font-family: 'Your Custom Font Name';: This defines the name you'll use in your CSS to apply this font. This must exactly match the name you added in msdyn_EmailRTEconfig_referenceonly.js.
src: url( ../WebResources/new_yourcustomfont.ttf') format('truetype );:
url( ../WebResources/new_yourcustomfont.ttf'): This specifies the path to your TTF web resource. You need to replace new_yourcustomfont.ttf with the actual file name of your TTF web resource. The ../WebResources/ part is crucial for referencing web resources.
format('truetype'): This indicates the format of your font file.
- Save and Publish the CSS web resource
4. Referencing the CSS Web Resource in the Email Editor Configuration:
The key step you might be missing is telling the Rich Text Editor to load your custom CSS web resource. This is done by modifying the CKEDITOR.config.contentsCss property in the msdyn_EmailRTEconfig_referenceonly.js file.
Modify your msdyn_EmailRTEconfig_referenceonly.js to include the contentsCss configuration:
(function () {
if (typeof (CKEDITOR) !== 'undefined') {
CKEDITOR.config.font_names =
'Arial/Arial, Helvetica, sans-serif;' +
'Comic Sans MS/Comic Sans MS, cursive;' +
'Courier New/Courier New, Courier, monospace;' +
'Georgia/Georgia, serif;' +
'Lucida Sans Unicode/Lucida Sans Unicode, Lucida Grande, sans-serif;' +
'Tahoma/Tahoma, Geneva, sans-serif;' +
'Times New Roman/Times New Roman, Times, serif;' +
'Trebuchet MS/Trebuchet MS, Helvetica, sans-serif;' +
'Your Custom Font Name/Your Custom Font Name;'; // Add your font here
CKEDITOR.config.contentsCss = [
'contents.css', // Default CSS (keep this)
'../WebResources/custom_font_style.css' // Path to your custom CSS web resource
];
}
})();
Important Notes for Referencing CSS:
contents.css: Make sure you keep the default contents.css in the array. This provides the base styling for the RTE content.
- Correct Path: Replace
'../WebResources/custom_font_style.css' with the correct relative path to your CSS web resource. Use the name of your CSS web resource (e.g., custom_font_style.css).
5. Clear Cache and Test:
After making these changes:
- Save and Publish both the JavaScript and CSS web resources.
- Clear your browser's cache (Ctrl+Shift+Delete or Cmd+Shift+Delete).
- Perform a hard refresh in Dynamics 365 (Ctrl+F5 or Cmd+Shift+R).
- Open the email editor (or the area where the Rich Text Editor for the description is used).
- Check the font family dropdown list. Your "Your Custom Font Name" should now appear.
- Select your custom font and try typing. The text should render in your custom font (if the browser can successfully load the TTF file).
Troubleshooting Steps:
- Verify Paths: Double-check the paths to your TTF file in the CSS (
url(...)) and the CSS file in the JavaScript (contentsCss). Ensure the web resource names are correct.
- Font Format Support: Ensure the TTF format is widely supported by web browsers. While generally well-supported, you might consider providing other formats (like WOFF or WOFF2) for broader compatibility by adding multiple
src entries in your @font-face rule.
- Browser Developer Tools: Use your browser's developer tools (usually F12) to inspect the "Console" for any errors related to loading the CSS or font file. Check the "Network" tab to see if the TTF and CSS web resources are being loaded successfully (HTTP status 200).
- Case Sensitivity: Re-verify that the font family name in the JavaScript, CSS (
font-family), and how you might try to use it in inline styles (though referencing via the dropdown is the goal) all match exactly in terms of casing.
- Permissions: Ensure that users have sufficient permissions to access the web resources.
By following these steps precisely, you should be able to successfully add your custom font to the Rich Text Editor in Dynamics 365. Remember that the key is to correctly configure both the JavaScript to include the font name in the dropdown and the CSS to make the font file available to the browser for rendering.
