-
Notifications
You must be signed in to change notification settings - Fork 106
Excluding Font Using Webpack
If you would like to use Red Hat fonts instead of Overpass, simply add the class .pf-m-redhat-font to an element that wraps your application (ideally <html> or <body>) to adopt the CSS changes that introduce the Red Hat fonts into PatternFly.
If you only want to include one version of our font in your Webpack bundle, you'll have to configure Webpack to not resolve a certain version of our fonts since both are included using a url() in both our SASS and CSS. This is easiest to do using a null-loader rule.
To only exclude old Overpass fonts, use the following rule:
{
// Resolve to an empty module for overpass fonts included in SASS files.
// This way file-loader won't parse them. Make sure this is BELOW
// rule(s) that handle font files.
test: /overpass-.*\.(woff2?|ttf|eot|otf)(\?.*$|$)/,
loader: 'null-loader',
},
Make sure to exclude the font from existing font loaders as well:
{
test: /\.(png|jpg|jpeg|gif|svg|woff2?|ttf|eot|otf)$/,
exclude: /overpass-.*\.(woff2?|ttf|eot|otf)(\?.*$|$)/
}
To exclude newer Red Hat fonts, use the following rule:
{
// Resolve to an empty module for overpass fonts included in SASS files.
// This way file-loader won't parse them. Make sure this is BELOW
// rule(s) that handle font files.
test: /RedHatDisplay-.*\.(woff2?|ttf|eot|otf)(\?.*$|$)/,
loader: 'null-loader',
},
Make sure to exclude the font from existing font loaders as well:
{
test: /\.(png|jpg|jpeg|gif|svg|woff2?|ttf|eot|otf)$/,
exclude: /RedHatDisplay-.*\.(woff2?|ttf|eot|otf)(\?.*$|$)/
}