Ask coding questions

← Back to all posts
Font from another file
TheImagin33r (28)

I want to use my font in css font format. but how do i get it to use the file as the font type? I have the file. Its a .ttf file and should work all i need to do is get the css thingy to use the font. how do i do this?

eankeen (2173)


to start off, i would recommend converting your .tff font file into a more web-friendly format such as .woff or woff2 using a conversion tool (i like to use (fontsquirrel)[]), although this isn't strictly necessary

after you convert and upload that to your repl, then you can add it to your stylesheet with css. the crucial part being, you use the @font-face at-rule

@font-face {
        font-family: 'Baloo Bhai';
        src: url('fonts/baloobhai-regular.woff2') format('woff2'),
             url('fonts/baloobhai-regular.woff') format('woff'),
             url('fonts/baloobhai-regular.tff') format('truetype');

so when the browser 'imports' in the font, it tries to import the 'woff2' first, then the 'woff', then the 'truetype' format of the font. this is good because woff2 has better compression and will load faster relative to the other formats

then, in your css, you can just use it like any other font

h1 {
    font-family: 'Baloo Bhai'

i made an example using the baloo bhai font in this repl

hope i was able to help :)

AndrewRoloff (1)

Thank you! I can now make a mental illness joke in times new bastard!