Kevin Powell - Community•2y ago

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•2y ago

https://tenor.com/view/mando-way-mandalorian-star-wars-this-is-the-way-gif-18467372

Tenor

Mannix•2y ago

nope what seems to be confusing to you?

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•2y ago

path in src is probably wrong

Jochem•2y ago

the path needs to be relative to where the css file is stored

winniffyOP•2y ago

yes, thank you guys. corrected the path and it worked.

Gaming

Programming

easiest way to add custom font to html/css