I am trying to add a particular non web safe font to a html signature with Helvetica as the back up font. I have tried all different variations of naming the font in the code (HKGrotesk-Regular, HK Grotesk Regular, HKGrotesk etc) but I cannot get it to work in my browser even though the font is installed on my Mac. Note: I know this font won't show in most computers but the client has asked for it. My question is what do I call the font in the code or is there another reason it is not working?
<table>
<tr>
<td colspan="3" style="font-family: 'HKGrotesk-Regular', serif; font-size: 9px; line-height: 12px">
<span style="font-size: 11px; font-weight: bold; line-height: 14px">First Name</span><br>
Job Title
</td>
</tr>
</table>
Though the font is installed in your computer, the HTML document can not render it to the webpage. To achieve this, you will have to download the web front font. I found a website that has the font - https://www.cufonfonts.com/font/hk-groteks. Once the download is complete, make sure these font files have an extension ".woff". Then you will have to use the following code in the in your main CSS file -
@font-face {
font-family: 'HK Grotesk Regular';
font-style: normal;
font-weight: normal;
src: local('HK Grotesk Regular'), url('HKGrotesk-Regular.woff')
format('woff');
}
The above code should go before your table element for this to work.
Regards,
Vijay.