[Support request] I want to use my own Custom Font

[Rohan Verma]

Hello
, I am trying to use the HK Grotesk font. I have downloaded all of the font variants (woff2 >> 400, 500, 700) and uploaded the fonts to media with the code snippet. However, when I add HK Grotesk to Typography, it is not working. Is there something I am missing? Could you please offer assistance?

I followed some tutorials but nothing worked so currently using Custom Font plugin to show the font. But I want to use the font without any plugins.

[Fernando]

Hi Rohan,

Have you followed all the steps here including adding the @font-face rules?: https://docs.generatepress.com/article/adding-local-fonts/

[Rohan Verma]

Using @font-face for Google fonts right. How can I get it for “HK Grotesk”?

[Fernando]

For none Google Font fonts, you would need to create your own @font-face rules.
Here is an article that may assist you: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

Also see: https://css-tricks.com/snippets/css/using-font-face-in-css/

There are also several tools online that can do @font-face generation like this one: https://www.fontsquirrel.com/tools/webfont-generator

[Rohan Verma]

Yes fontsquirrel generated this @font-face

/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on February 7, 2023 */

@font-face {
font-family: ‘hk_groteskmedium’;
src: url(‘hkgrotesk-medium-webfont.woff2’) format(‘woff2’),
url(‘hkgrotesk-medium-webfont.woff’) format(‘woff’);
font-weight: normal;
font-style: normal;

}

@font-face {
font-family: ‘hk_groteskregular’;
src: url(‘hkgrotesk-regular-webfont.woff2’) format(‘woff2’),
url(‘hkgrotesk-regular-webfont.woff’) format(‘woff’);
font-weight: normal;
font-style: normal;

}

@font-face {
font-family: ‘hk_groteskbold’;
src: url(‘hkgrotesk-bold-webfont.woff2’) format(‘woff2’),
url(‘hkgrotesk-bold-webfont.woff’) format(‘woff’);
font-weight: normal;
font-style: normal;

}

@font-face {
font-family: ‘hk_groteskbold_italic’;
src: url(‘hkgrotesk-bolditalic-webfont.woff2’) format(‘woff2’),
url(‘hkgrotesk-bolditalic-webfont.woff’) format(‘woff’);
font-weight: normal;
font-style: normal;

}

@font-face {
font-family: ‘hk_groteskitalic’;
src: url(‘hkgrotesk-italic-webfont.woff2’) format(‘woff2’),
url(‘hkgrotesk-italic-webfont.woff’) format(‘woff’);
font-weight: normal;
font-style: normal;

}

[Fernando]

Great! Now, you can add that through Appearance > Customize > Additional CSS. Make sure the source of the font files is updated. You can get the URL in the Media Library. Example: https://share.getcloudapp.com/z8uleqwq

With that, you can now use the font family names you’ve added like “hk_groteskmedium”.

[Author]

Posts