Skip to main content

www.loom.com


We've received reports of Intercom's chat widget causing issues with with some of our font styles on our website. This has so far only shown itself in Chrome.

 

It appears the injected style tag has a font-face, h1-h6, and button styles that are not scoped to the widget allowing it to bleed over affecting the host page.

 

Below I have attached the problematic CSS that is injected when the chat widget is opened. Additionally, here is a screen recording of the issue: https://www.loom.com/share/25a90ef7ee50477a98b202fa13b82c73/p>

 

@font-face { font-family: intercom-font; font-display: swap; src: url("https://js.intercomcdn.com/fonts/proximanova-regular.a7942249.woffquot;) format("woff"); }@font-face { font-family: intercom-font; font-display: swap; src: url("https://js.intercomcdn.com/fonts/proximanova-semibold.46e3f047.woffquot;) format("woff"); font-weight: bold; }@font-face { font-family: intercom-font; font-display: swap; src: url("https://js.intercomcdn.com/fonts/proximanova-regular-italic.053a1112.woffquot;) format("woff"); font-style: italic; }@font-face { font-family: intercom-font; font-display: swap; src: url("https://js.intercomcdn.com/fonts/proximanova-semibold-italic.660bf63e.woffquot;) format("woff"); font-weight: bold; font-style: italic; }html { font: 100% / 1 intercom-font, "Helvetica Neue", "Apple Color Emoji", Helvetica, Arial, sans-serif; letter-spacing: normal; text-align: left; text-align-last: initial; text-decoration: none; text-indent: 0px; text-shadow: none; text-transform: none; box-sizing: content-box; -webkit-font-smoothing: antialiased; }button, textarea, input, iframe { font-family: intercom-font, "Helvetica Neue", "Apple Color Emoji", Helvetica, Arial, sans-serif; font-size: 100%; font-style: normal; letter-spacing: normal; font-stretch: normal; font-variant: normal; font-weight: normal; text-align: left; text-align-last: initial; text-decoration: none; text-indent: 0px; text-shadow: none; text-transform: none; margin: 0px; padding: 0px; background-color: transparent; background-image: none; border: none; border-radius: 0px; box-sizing: content-box; line-height: inherit; color: inherit; min-width: 0px; }a { font-family: intercom-font, "Helvetica Neue", "Apple Color Emoji", Helvetica, Arial, sans-serif; font-size: 100%; font-style: normal; letter-spacing: normal; font-stretch: normal; font-variant: normal; font-weight: normal; text-align: left; text-align-last: initial; text-decoration: none; text-indent: 0px; text-shadow: none; text-transform: none; line-height: inherit; }p { margin: 0px; padding: 0px; }h1, h2, h3, h4, h5, h6 { font-family: intercom-font, "Helvetica Neue", "Apple Color Emoji", Helvetica, Arial, sans-serif; font-size: 100%; font-style: normal; letter-spacing: normal; font-stretch: normal; font-variant: normal; font-weight: normal; text-align: left; text-align-last: initial; text-decoration: none; text-indent: 0px; text-shadow: none; text-transform: none; margin: 0px; padding: 0px; line-height: inherit; }ol, ul, li { font-family: intercom-font, "Helvetica Neue", "Apple Color Emoji", Helvetica, Arial, sans-serif; font-size: 100%; font-style: normal; letter-spacing: normal; font-stretch: normal; font-variant: normal; font-weight: normal; text-align: left; text-align-last: initial; text-decoration: none; text-indent: 0px; text-shadow: none; text-transform: none; margin: 0px; padding: 0px; display: block; }li { display: list-item; }b, strong { font-weight: 700; }b > i, strong > i, b > em, strong > em, i > b, i > strong, em > b, em > strong { font-weight: bold; font-style: italic; }textarea, input { cursor: text; }textarea::selection, input::selection { background-color: rgb(179, 212, 252); }textarea::-webkit-input-placeholder, input::-webkit-input-placeholder { font-family: intercom-font, "Helvetica Neue", "Apple Color Emoji", Helvetica, Arial, sans-serif; font-size: 100%; font-style: normal; letter-spacing: normal; font-stretch: normal; font-variant: normal; font-weight: normal; text-align: left; text-align-last: initial; text-decoration: none; text-indent: 0px; text-shadow: none; text-transform: none; background-color: inherit; color: inherit; }textarea::placeholder, input::placeholder { font-family: intercom-font, "Helvetica Neue", "Apple Color Emoji", Helvetica, Arial, sans-serif; font-size: 100%; font-style: normal; letter-spacing: normal; font-stretch: normal; font-variant: normal; font-weight: normal; text-align: left; text-align-last: initial; text-decoration: none; text-indent: 0px; text-shadow: none; text-transform: none; background-color: inherit; color: inherit; }input[type="checkbox"], input[type="radio"] { cursor: default; }pre { font-family: intercom-font, "Helvetica Neue", "Apple Color Emoji", Helvetica, Arial, sans-serif; font-size: 100%; font-style: normal; letter-spacing: normal; font-stretch: normal; font-variant: normal; font-weight: normal; text-align: left; text-align-last: initial; text-decoration: none; text-indent: 0px; text-shadow: none; text-transform: none; margin: 0px; padding: 0px; }img { height: auto; }a, a *, a span, button, button *, button span, input[type="submit"], input[type="reset"] { cursor: pointer; }:focus { outline: none; }a:link, a:visited, a:hover, a:active { color: inherit; background: transparent; text-shadow: none; }#intercom-container-body { overflow: hidden; }#intercom-container-body.intercom-container-body-no-margin { margin: 0px; }a, a:visited, .intercom-anchor { color: rgb(242, 98, 38); cursor: pointer; }a:hover, .intercom-anchor:hover { color: rgb(216, 73, 13); }a:active, .intercom-anchor:active { color: rgb(168, 56, 10); }@media not all {
.intercom-launcher { background: black; border: 1px solid white; }
[role="button"], button { border: 1px solid white !important; background: black !important; color: white !important; }
[role="button"]:hover, button:hover, [role="button"]:focus, button:focus, [role="button"]:active, button:active { border: 1px solid white !important; background: black !important; color: white !important; }
[role="button"] *, button * { color: white !important; }

 

3 replies

Eric Fitz
Employee
Forum|alt.badge.img+5
  • Employee
  • 1630 replies
  • February 9, 2022

Hey there @preston h​, did you mean to post this on your own profile, instead of in the Q&A section?


  • Author
  • New Participant
  • 4 replies
  • February 9, 2022

@eric f11​ correct. Is there a way to move the post or do I need to recreate it?


Eric Fitz
Employee
Forum|alt.badge.img+5
  • Employee
  • 1630 replies
  • February 10, 2022

You'll need to manually recreate it.


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings