Open in app

Sign in

Write

Sign in

Dynamics 365 Marketing & Fonts — The complete guide

András Fördős
11 min readMar 24, 2023

--

Update (2023.09): Dynamics 365 Marketing has been renamed to Dynamics 365 Customer Insights — Journeys, but all below info is still valid, happy reading!

Let’s clear the water first! Dynamics 365 Marketing is still weirdly mistaken by many for the old Dynamics Marketing module, even though it has been launched back in 2018 as a separate application with way stronger capabilities for marketing automation and still has continuous growth. You will need to be aware of the basics if you want to keep up, so check out the official docs if need to.

Now, that this is out of the way, we can focus on fonts being used in your content! Skip ahead to the respective chapter that you are interested in:

  1. OOB — the default fonts of Dynamics 365 Marketing
  2. Web fonts — use third party providers like Google or Adobe
  3. Anything — Add and use your own custom fonts
  4. POC — “I don’t trust you, show me a prototype”
  5. Technicalities — any black belt details, such as font formats, email clients, etc..

But. before all,

How are fonts rendered?

A painless question, aimed just to introduce the basics of this topic, yet, it could easily drag us down the rabbit hole.

To avoid that, in an over-simplified way:

  • Your content (text) and style (font to use) is managed by you, stored on a web server. Let’s name them instructions (what to show, how to show)
  • Your target audience uses various devices (laptop, phone, smart fridge) to browse the web, which have locally some fonts installed either by default or by the users themselves
  • Your target audience uses various applications (web browsers, email clients, …) to check your content. These systems have the purpose to understand your instructions and turn them into a visual representation on the device

There can be additional parties involved, such as Dynamics 365 Marketing, which stands between you and the web server, boosting you with a better content creation experience, but don’t mind that for now.

Think of this as an analogy for cooking: chefs (you) write recipes, store them in cookbooks (web server), and on the other end Sam (browser) tries to cook them, at home (device). You probably already see the issue: What if some ingredients are not available at the home of the reader? There are mainly 4 options:

  1. The chef writes only recipes with the most common ingredients (water and potato). Alternatively, the chef provides options: preferred components and their generic alternatives (lemon instead of Australian Finger lime)
  2. The chef adds some extra paragraphs to the cookbook describing locations and services (local eco farms) where Sam can find the needed ingredients
  3. The chef treasures all the Sams and includes a small box of the special spices (Tahitian vanilla beans) in the package of the cookbook, so the dish can be cooked exactly as it should
  4. Sam simply does not care and just uses whatever can be found at home or what his own ideas dictate

There is actually a fifth variation: the chefs cook themselves the dishes and send the full steaming pot by post to Sam, instead of cookbooks. Please don’t try to send all of your text contents as JPG files. Please. For the other 3 options, find below the related numbered chapters!

https://twitter.com/Overcookedgame

1. What is OOB?

Dynamics 365 Marketing can be used in multiple ways to create content, that will reach your customers: emails, forms, pages. To make things reusable and organized, you have also the possibility to create templates for all of these — which you should!

As of now — 2023. March— the platform comes with 10 fonts to choose from to style your texts. These fonts are so called web-safe fonts, meaning they come with a very high probability of being already installed on all of your readers devices, and so, will render your text mostly as you intended:

Arial, Comic Sans MS, Courier New, Georgia, Lucida Sans Unicode, Segoe UI, Tahoma, Times New Roman, Trebuchet MS, Verdana

2. Okay, give me more!

The above may suffice in most cases, given Arial and friends are still the leading (statistics vary, but commonly point them above 60% share) gang on the block, however you might have your own vision and needs.

This part is nicely covered by many others, such as Matt Wittemann (see references at the end) — so in short:

  1. Find a web font in a public library (Google Fonts, fontlibrary.org, …)
  2. (optional) Resolve license/legal questions if needed
  3. Copy the provided embed code (the html <link> or <style> tag)
  4. Switch to HTML editor in Dynamics 365 Marketing on your content
  5. Embed the copied snippet
  6. (optional) Enable the new font for the designer too, to make it available for marketeers without touching HTML. More details: LINK

3. But how can I go full custom?

I get it, you are still here because “what if we have our own custom typeface, as part of our brand identity?” — maybe not the best time to start the “you talked about fonts so far, what is a typeface?” conversation..

Based on community forums and feedback from colleagues this is the spot where people get lost, however, if you have followed me through the first chapters, you are basically at the doorstep of the final solution.

You either already have a Content space (maybe CMS?) separate from your webpage or marketing tool, or you will need to set one up, as you just need a place where you can store files (font files) and make them publicly available on the internet. No, not https://tmpfiles.org

The catch is, that public does not only mean, that you can dial up its URL in your browser without password. True, that is needed, but it also has to cater for CORS rules (here you can grab and ask your closest IT person or helpline), as modern browsers simply don’t allow asking for resources from different places (domains) for security reasons.

So:

  1. store your font(s) under a publicly available link —check that you can reach it without password in a private browser window
  2. make sure that the link or its domain allows cross-origin requests (CORS) — ask your IT guy or test with https://geekflare.com/tools, look for the Access-Control-…-… headers
  3. use your font URL same way as you would with Google Fonts, see previous chapter

4. A step-by-step Proof of Concept

Ok, nice to see this all written down, but does it actually work in real life? Time to do a POC from complete scratch, that you can replay yourself!

Let’s see the setup:

  1. I have my custom personal font (selected Big Party for the experiment), for sure not yet installed on your or my device. Feel free to choose any other, though, preferred WOFF or WOFF2 format
  2. My Dynamics 365 Marketing installation will be brand new without any customization, so let’s register a trial without any additional set up
  3. My end user experience will be verified through imitating a public facing website with JSFiddle. Again, can be any other solutions, this is simply the quickest one for me

Make my font available — skip if you already have a CMS

  • Download the font file to my laptop (BigParty.woff2)
  • Since I don’t own a CMS system, I need a way to publicly store it on the internet. I choose my free Azure credits: Azure Blob Storage
  • Log in to http://portal.azure.com
  • Create new Storage Account resource (blob) named “andraspublicfont” with public access level set to Blob, and within it a Container named “fonts”
  • On the Storage Account, open the Resource Sharing (CORS) menu, and add a record for origin * and method GET (note: if this would not be a prototype, CORS would need to be taken more seriously)
  • Navigate to the Container, and upload the BigParty.woff2 file. Click on it and copy the shareable URL link

Create my marketing form

  • Open Dynamics 365 Marketing and navigate to Outbound / Marketing Forms
  • Create a new empty Landing page type form just with the Email field, named “Simple Form”
  • Switch editor to HTML, and add following snippet right at the start of the <style> tag: @font-face { font-family: "Big Party"; src: url(url-from-azurestorage) format("woff2"); }
     Replace both url and format, based on your own link and font file
  • Add this additional line straight at the top, after the <form> tag: <meta type="xrm/designer/setting" name="additional-fonts" datatype="font" value="Big Party">
  • Switch editor back to designer mode, add a text element at top, and notice, that while styling you can now choose Big Party as a font. Do it!
  • Save, review in Preview mode, and go live

Embed my form on the internet

  • Under Form Hosting tab, add new Form Page
  • Copy the embed snippet Host it as a script, and in a browser navigating to https://jsfiddle.net web page, add it to the top left box (HTML). Click RUN
  • On bottom right box (Result), you can see first a loading spinner, then the error message, that the domain is not enlisted in Dynamics
  • (optional) On bottom right box, right click and select Inspect. Then switch to console mode, and type in location.hostname to verify what is the full domain context of this webpage. It is fiddle.jshell.net
  • Back in Dynamics, under Form Hosting tab on the form record, click Go to all domains to review enabled domain settings
  • Create a new domain record by clicking through the wizard: domain name is fiddle.jshell.net, while only check box for External form hosting, not for email. At final page just click Save&Close without Verify
  • Wait around 5–10 minutes, then run again the snippet on JSFiddle, enjoying the amazingness of the custom font in your form, on the web!

5. Technicalities and black belt topics

Email does not work!

You have spent considerable minutes digesting my post, set up everything as suggested, all looks perfect in the Dynamics preview… but then comes the shock — the received email is in Times New Roman, everything was a lie!

The problem is actually not how you did things, but rather how the email has been received and read by your audience. Unfortunately most of the email clients (Gmail, Outlook, Yahoo, ..) don’t support web fonts at the moment, or they implement some weird half solutions.

You can only do 2 things: know your audience (what email client do they use, will this really be an issue) and prepare to define fallbacks (what other web-safe font or font family should be used in case of problems). Litmus does a very nice summary on this topic and possibilities that can you do: LINK.

OTF/TTF/WOFF - the world of font file extensions

For historical reasons, arguably there are more file formats to represent a font, than pasta types in Italian cuisine: ttf, woff, afm, woff2, pfb, otf, svg, eot, pcf, …

You might wonder, does it matter which one you use in your marketing content? Your company only has TTF available? The perfect font you found on Adobe has only OTF format, can you still use it?

Well, yes and no. The main things to consider is quality, performance (some of these formats are considerably smaller or larger than others) and compatibility: some browsers and especially their versions are very picky!

I would say — if you have the possibility — aim for a WOFF2 or WOFF file — as that covers most modern systems, but you can also use the CSS @font-face syntax to add multiple formats for the same font, catering for literally everyone. Find a nice summary here: LINK

<link> or <style> tag, what to use?

Great question — especially if you are from the marketing world not knowing code — why are there indeed multiple ways to add web fonts to your content? Why does Google provide both a <link> tag and an @import snippet? Why are some of the above examples referring @font-face? Which is the best, if any?

The thoughts to consider are compatibility (some systems, usually around emails don’t like the link and import), performance and your technical skills — but you always should use just one of these methods!

See, @font-face is actually the syntax meant to load a font, while <link> and @import are rather just a help to reference a CSS file — in this case containing the @font-face rules — making it possible to maintain your font definitions separated from the actual email or form content. This leads to a neater code in your content and easier future updates, especially if you have multiple fonts, but comes with the price to store the referenced CSS rules also somewhere publicly available. Also, remember, to directly use the @font-face rule, you have to know the exact URL to the font file itself!

When going down the road of @import and <link>, your concern is performance and user experience: the former only loads the fonts after the full HTML of the content is loaded, while the latter blocks the rendering of your content until the font is loaded, making this relevant when your font files are large.

Thank you for reading, let me know in comments, if some common aspect is missing here, or tag me on LinkedIn within one of your newest marketing communications to make sure I can brag about your beautiful custom web fonts in action!

References

Dynamics 365
Marketing
Fonts
Marketing Automation
Custom

--

--

András Fördős

Written by András Fördős

67 Followers

All CV, code and important links: https://bio.link/andrasfordos

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams