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; }inputptype="checkbox"], inputptype="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, inputptype="submit"], inputptype="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, rrole="button"]:focus, button:focus, srole="button"]:active, button:active { border: 1px solid white !important; background: black !important; color: white !important; }
role="button"] *, button * { color: white !important; }