- This topic has 5 replies, 2 voices, and was last updated 3 years, 3 months ago by
.
-
Posts
-
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.
Customer Support
Hi Rohan,
Have you followed all the steps here including adding the @font-face rules?: https://docs.generatepress.com/article/adding-local-fonts/
Using @font-face for Google fonts right. How can I get it for “HK Grotesk”?
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-faceAlso 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
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;}
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”.
- You must be logged in to reply to this topic.
