IBM Plex Sans Font Family

Use "IBM Plex Sans" font as a Webfont

You can create beautiful websites with great typography using the @font-face kit of IBM Plex Sans font. Webfont and @font-face supported all up-to-date browsers can use comfortably.

@font-face is very easy to use, click here to download IBM Plex Sans webfont kit. The following example will guide you to the css and html codes.

Ensuring the maximum cross browser typography support, WOFF (Web OpenFont Format) works with all up-to-date browsers. You can check the versions by clicking here.

Using this font on your website is your own legal responsibility. You can check the license information of the font.

@font-face kit

@font-face {
    font-family: 'IBM Plex Sans Regular';
    font-style: normal;
    font-weight: normal;
    src: local('IBM Plex Sans Regular'), url('IBMPlexSans-Regular.woff') format('woff');
}
@font-face {
    font-family: 'IBM Plex Sans Italic';
    font-style: normal;
    font-weight: normal;
    src: local('IBM Plex Sans Italic'), url('IBMPlexSans-Italic.woff') format('woff');
}
@font-face {
    font-family: 'IBM Plex Sans Bold';
    font-style: normal;
    font-weight: normal;
    src: local('IBM Plex Sans Bold'), url('IBMPlexSans-Bold.woff') format('woff');
}
@font-face {
    font-family: 'IBM Plex Sans Bold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('IBM Plex Sans Bold Italic'), url('IBMPlexSans-BoldItalic.woff') format('woff');
}
@font-face {
    font-family: 'IBM Plex Sans Thin Regular';
    font-style: normal;
    font-weight: normal;
    src: local('IBM Plex Sans Thin Regular'), url('IBMPlexSans-Thin.woff') format('woff');
}
@font-face {
    font-family: 'IBM Plex Sans ExtraLight Regular';
    font-style: normal;
    font-weight: normal;
    src: local('IBM Plex Sans ExtraLight Regular'), url('IBMPlexSans-ExtraLight.woff') format('woff');
}
@font-face {
    font-family: 'IBM Plex Sans Light Regular';
    font-style: normal;
    font-weight: normal;
    src: local('IBM Plex Sans Light Regular'), url('IBMPlexSans-Light.woff') format('woff');
}
@font-face {
    font-family: 'IBM Plex Sans Medium Regular';
    font-style: normal;
    font-weight: normal;
    src: local('IBM Plex Sans Medium Regular'), url('IBMPlexSans-Medium.woff') format('woff');
}
@font-face {
    font-family: 'IBM Plex Sans SemiBold Regular';
    font-style: normal;
    font-weight: normal;
    src: local('IBM Plex Sans SemiBold Regular'), url('IBMPlexSans-SemiBold.woff') format('woff');
}
@font-face {
    font-family: 'IBM Plex Sans Thin Italic';
    font-style: normal;
    font-weight: normal;
    src: local('IBM Plex Sans Thin Italic'), url('IBMPlexSans-ThinItalic.woff') format('woff');
}
@font-face {
    font-family: 'IBM Plex Sans ExtraLight Italic';
    font-style: normal;
    font-weight: normal;
    src: local('IBM Plex Sans ExtraLight Italic'), url('IBMPlexSans-ExtraLightItalic.woff') format('woff');
}
@font-face {
    font-family: 'IBM Plex Sans Light Italic';
    font-style: normal;
    font-weight: normal;
    src: local('IBM Plex Sans Light Italic'), url('IBMPlexSans-LightItalic.woff') format('woff');
}
@font-face {
    font-family: 'IBM Plex Sans Medium Italic';
    font-style: normal;
    font-weight: normal;
    src: local('IBM Plex Sans Medium Italic'), url('IBMPlexSans-MediumItalic.woff') format('woff');
}
@font-face {
    font-family: 'IBM Plex Sans SemiBold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('IBM Plex Sans SemiBold Italic'), url('IBMPlexSans-SemiBoldItalic.woff') format('woff');
}

sample html

<h3 style="font-family: 'IBM Plex Sans Regular'">Consequatur eos doloremque quam.</h3>
<h3 style="font-family: 'IBM Plex Sans Italic'">Eligendi error ipsum doloribus ducimus et.</h3>
<h3 style="font-family: 'IBM Plex Sans Bold'">Illo adipisci est officiis labore.</h3>
<h3 style="font-family: 'IBM Plex Sans Bold Italic'">Atque ut fugit quo autem officia est.</h3>
<h3 style="font-family: 'IBM Plex Sans Thin Regular'">Tenetur laudantium modi beatae possimus.</h3>
<h3 style="font-family: 'IBM Plex Sans ExtraLight Regular'">Quod et nemo neque qui molestias quisquam aut.</h3>
<h3 style="font-family: 'IBM Plex Sans Light Regular'">Laudantium eligendi necessitatibus sint est.</h3>
<h3 style="font-family: 'IBM Plex Sans Medium Regular'">Aut quo natus eos nihil.</h3>
<h3 style="font-family: 'IBM Plex Sans SemiBold Regular'">Ad magnam commodi esse tempore explicabo.</h3>
<h3 style="font-family: 'IBM Plex Sans Thin Italic'">Aut reprehenderit modi labore numquam.</h3>
<h3 style="font-family: 'IBM Plex Sans ExtraLight Italic'">Rem modi ipsa nihil.</h3>
<h3 style="font-family: 'IBM Plex Sans Light Italic'">Molestiae sequi dolorem laborum.</h3>
<h3 style="font-family: 'IBM Plex Sans Medium Italic'">Ut eveniet in porro molestias ducimus autem est.</h3>
<h3 style="font-family: 'IBM Plex Sans SemiBold Italic'">Quia qui ipsam doloribus aut qui quas.</h3>

Preview

License

IBM Plex⢠is the new corporate typeface for IBM worldwide and an open source project developed by the IBM Brand & Experience team (BX&D). Plex is an international typeface family designed to capture IBMâs brand spirit and history, and to illustrate the unique relationship between mankind and machineâa principal theme for IBM since the turn of the century. The result is a neutral, yet friendly Grotesque style typeface that balances design with the engineered details that make Plex⢠distinctly IBM. The family includes a Sans, Sans Condensed, Mono, and Serif and has excellent legibility in print, web and mobile interfaces. Plexâs three designs work well independently, and even better together. Use the Sans as a contemporary compadre, the Serif for editorial storytelling, or the Mono to show code snippets. The unexpectedly expressive nature of the italics give you even more options for your designs. To contribute to the project, visit github.com/IBM/plex

Copyright 2018 IBM Corp. All rights reserved.

http://scripts.sil.org/OFL