Kevin Powell - Community•15mo 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•15mo ago

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

Tenor

Mannix•15mo ago

nope what seems to be confusing to you?

winniffy•15mo 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•15mo ago

path in src is probably wrong

Jochem•15mo ago

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

winniffy•15mo ago

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

Gaming

Programming

easiest way to add custom font to html/css