Got a 'How do I' question? Join 'Ask a Trainer' Monday to Friday, 11am to 4pm ET for instant help and pro tips!

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
  • Avatar

    Featured Article

    Use Sections to Build Email Campaigns Faster and Improve Engagement Rates

    Using Sections while designing your marketing email not only increases your own efficiency but helps you to deliver a more friendly, organized message. Check out some of the key benefits of using sections in email.

    See Article
  • Avatar

    Featured Thread

    Casual Conversations: What's your go-to playlist?

    If you listen to music while you work, share your playlist below so we can be inspired and maybe find some new music!

    View thread
  • Avatar

    Featured Thread

    Ready, Set, Send Reflections

    The Ready, Set, Send Challenge has finished! Let's reflect on the wins and accomplishments over the last six weeks.

    Join challenge
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

73% of SMBs express doubt that their marketing strategy is effective. Does this sound familiar? Read our Small Business Now Report to learn how you can tweak your strategy to see better results.

Go read our article
Upcoming Webinars
DEC 12
Ask Us Anything: Your Digital Marketing Questions Answered
2PM - 3PM EST