Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Can I import Plex glyphs with Carbon?

See original GitHub issue

Summary

We recently ran into an issue on the “Let’s Create” rebrand on IBM.com: https://www.ibm.com/lets-create/

On Safari, the design team noticed that the curly arrow glyph ↷, which appears on many new pages, does not render correctly in Safari.

We were able to fix this by adding the following to the <head>:

<link
      rel="stylesheet"
      href="//1.www.s81c.com/common/carbon/plex/plex-full.css"
/>

The only downside to this approach is that the font is loaded again. We are also using the following in the SCSS like so:

@import "~@carbon/type/scss/font-face/mono";
@import "~@carbon/type/scss/font-face/sans";
@include carbon--font-face-mono();
@include carbon--font-face-sans();

What is the best-practice approach to including glyphs on IBM.com?

Relevant information

Name and organization

Alex Motzenbecker alex.motzenbecker@ogilvy.com IBM/Ogilvy

Code of Conduct

I agree to follow this project’s Code of Conduct
I checked the current issues for duplicate issues

Issue Analytics

State:
Created 2 years ago
Comments:5 (5 by maintainers)

Top GitHub Comments

2reactions

kennylamcommented, Mar 30, 2022

@mstudio @proeung New issue #8661 created to track this bug.

1reaction

proeungcommented, Mar 29, 2022

@kennylam Yay! Looks like the two imports that you’ve suggested are working correctly on Safari. See CodeSandbox example - https://codesandbox.io/s/xenodochial-chandrasekhar-75cn7m

I’ll update the documentation of this component so that adopters like AEM can use the proper plex imports to show the correct glyphs! Thanks, @kennylam!

Top Results From Across the Web

Typography

Typography can help create clear hierarchies, organize information ... Use the Carbon type package to leverage IBM Plex across your product.

carbon/v11.md at main

In v11, this is available through @carbon/styles/index.scss which can be directly imported with @use by writing out: @use '@carbon/styles';.

05 Specs | IBM Plex

With four subfamilies, eight weights, two styles (roman & italic), and 100 Languages, IBM Plex® can do just about anything you need it...

Typography

Carbon uses the open-source typeface IBM Plex. It has been carefully designed to meet IBM's needs as a global technology company and reflect...

Google Fonts: IBM Plex Sans

Plex's three designs work well independently, and even better together. Use the Sans as a contemporary compadre, the Serif for editorial storytelling, or...