KPC
Kevin Powell - Community•2y ago
winniffy

easiest way to add custom font to html/css

what's the easiest way to add a non-google font to your html/css files? i've got the font family files downloaded to my computer already. the font squirrel font kit generator method seems confusing to me, is there an easier way?
6 Replies
Mannix
Mannix•2y ago
Mannix
Mannix•2y ago
nope what seems to be confusing to you?
winniffy
winniffyOP•2y ago
@font-face {
    font-family: 'clash_display_variablebold';
    src: url('clashdisplay-variable-webfont.woff2') format('woff2'),
         url('clashdisplay-variable-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

.hero_header-text {
    color: #fff;
    font-family: 'clash_display_variablebold';
}
@font-face {
    font-family: 'clash_display_variablebold';
    src: url('clashdisplay-variable-webfont.woff2') format('woff2'),
         url('clashdisplay-variable-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

.hero_header-text {
    color: #fff;
    font-family: 'clash_display_variablebold';
}
@mannix_ after uploading the folder generated from font-squirrel and using this in my styles, it doesn't work
Mannix
Mannix•2y ago
path in src is probably wrong
Jochem
Jochem•2y ago
the path needs to be relative to where the css file is stored
winniffy
winniffyOP•2y ago
yes, thank you guys. corrected the path and it worked.

Did you find this page helpful?