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'">Adipisci aut eos consectetur rem.</h3>
<h3 style="font-family: 'IBM Plex Sans Italic'">Quis sunt debitis eos dolorem veniam.</h3>
<h3 style="font-family: 'IBM Plex Sans Bold'">Ut maiores nam et sed quisquam numquam dolore.</h3>
<h3 style="font-family: 'IBM Plex Sans Bold Italic'">Numquam ut occaecati sint in.</h3>
<h3 style="font-family: 'IBM Plex Sans Thin Regular'">Illum ullam qui et aliquid quos.</h3>
<h3 style="font-family: 'IBM Plex Sans ExtraLight Regular'">Harum laudantium hic animi et.</h3>
<h3 style="font-family: 'IBM Plex Sans Light Regular'">Ea amet reprehenderit blanditiis consequuntur et.</h3>
<h3 style="font-family: 'IBM Plex Sans Medium Regular'">Quaerat excepturi est sapiente deserunt et et.</h3>
<h3 style="font-family: 'IBM Plex Sans SemiBold Regular'">Vero sunt eum qui ea ab in in.</h3>
<h3 style="font-family: 'IBM Plex Sans Thin Italic'">Quidem error ipsa consequatur commodi.</h3>
<h3 style="font-family: 'IBM Plex Sans ExtraLight Italic'">Ut omnis repellendus non doloremque laudantium.</h3>
<h3 style="font-family: 'IBM Plex Sans Light Italic'">Ut illum quod soluta vel molestiae.</h3>
<h3 style="font-family: 'IBM Plex Sans Medium Italic'">Laborum adipisci sit occaecati.</h3>
<h3 style="font-family: 'IBM Plex Sans SemiBold Italic'">Possimus hic dolorem dolore aut mollitia et eum.</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