如何将@ font-face用作Manrope字体？

问题描述

我需要在电子邮件模板中使用自定义字体，@font-face似乎是唯一可行的选择。

模板的先前版本中有ProximaNova

@font-face {
    font-family: ProximaNova;
    src: url(https://cdn.auth0.com/fonts/proxima-nova/proximanova-regular-webfont-webfont.eot);
    src: url(https://cdn.auth0.com/fonts/proxima-nova/proximanova-regular-webfont-webfont.eot?#iefix) format('embedded-opentype'),url(https://cdn.auth0.com/fonts/proxima-nova/proximanova-regular-webfont-webfont.woff) format('woff');
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: ProximaNova;
    src: url(https://cdn.auth0.com/fonts/proxima-nova/proximanova-semibold-webfont-webfont.eot);
    src: url(https://cdn.auth0.com/fonts/proxima-nova/proximanova-semibold-webfont-webfont.eot?#iefix) format('embedded-opentype'),url(https://cdn.auth0.com/fonts/proxima-nova/proximanova-semibold-webfont-webfont.woff) format('woff');
    font-weight: 600;
    font-style: normal
}

现在我需要用Manrope https://fonts.google.com/specimen/Manrope?sidebar.open=true&selection.family=Manrope替换它，但是在@font-face中没有说明如何使用它。

解决方法

您可以从Google下载Manrope字体系列zip，解压缩Manrope-VariableFont_wght.ttf文件并将其放在您的css文件夹中。然后只需在样式表中添加：

@font-face {
    font-family: 'manrope';
    src: url('Manrope-VariableFont_wght.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

font-face fonts