Roboto Bold not displaying correctly in Outlook

FirstNameL029140
Campaign Collaborator
0 Votes

I've set my headlines in my Constant Contact emails to use Roboto Bold. Any of my contacts using web-browser email clients see the correct Bold font. But Outlook displays it as a Regular weight. Poking through the HTML code, I see Constant Contact includes only Roboto Regular. @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;} Could it work to also include Italic, Bold, and Bold Italic explicitly? Something like this? @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2'); } @font-face { font-family: 'Roboto'; font-style: italic; font-weight: 400; src: local('Roboto-Italic'), src: url(https://fonts.gstatic.com/s/roboto/v27/KFOkCnqEu92Fr1Mu51xIIzIXKMny.woff2) format('woff2'); } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; src: local('Roboto-Bold'), src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmWUlfBBc4AMP6lQ.woff2) format('woff2'); } @font-face { font-family: 'Roboto'; font-style: italic; font-weight: 700; src: local('Roboto-BoldItalic'), src: url(https://fonts.gstatic.com/s/roboto/v27/KFOjCnqEu92Fr1Mu51TzBic6CsTYl4BO.woff2) format('woff2'); }

3 REPLIES 3
William_A
Administrator
0 Votes

Hello @FirstNameL029140 ,

 

Is it just Outlook that's not displaying the font correctly, or is it other email programs as well? Keep in mind, not all email programs and devices have access to all font types, so even if the font selection looks correct in your Previews and some test sends, it may be forced into a more generic one on other recipients' email programs and devices.


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
William A
Community & Social Media Support
FirstNameL029140
Campaign Collaborator
0 Votes

It's a known issue with Outlook.

 

Any browser-based email client, like Gmail, handle Web fonts just fine. Even Outlook for iOS displays it correctly.

 

It looks like Outlook desktop (mac or windows) needs to be explicitly told about all the weights used in any Web font.

 

Using @font-face, Constant Contact includes the reference to Roboto Normal, so Outlook displays Roboto Normal correctly. But if a block of text uses Roboto Bold, Outlook displays it as Normal.

 

I've read some discussion online that explicitly including @font-face inclusions for Roboto Italic, Bold, and Bold Italic should help Outlook display them correctly.

 

Have any of Constant Contact's developers explored this? It would open up a lot more design options involving Web fonts.

William_A
Administrator
0 Votes

To my knowledge no, and I'm not finding anything in our system for us making this kind of change to our email templates' coding since the issue is squarely with how Outlook is built to read emails compared to other email programs. The custom code editor is the only email builder available in our system for formatting the code yourself, so the normal email builder would likely still suffer from this quirk of Outlook.


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
William A
Community & Social Media Support
Updates
Just Getting Started?

We’re here to help you grow. With how-to tutorials, courses, getting-started guides, videos and step-by-step instructions to start and succeed with Constant Contact.

Start Here
Upcoming Webinars
May 01
Constant Contact Community Walkthrough and Demo
2PM - 3:00 PM EST