Skip to content
← Back to Community
Font from another file
Profile icon
TheImagin33r

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?

Voters
Profile icon
JoshOrmido
Profile icon
FinleyScott1
Profile icon
duckplucky
Profile icon
christiecadette
Profile icon
TheImagin33r
Comments
hotnewtop
Profile icon
hyperupcall

hi!

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)[https://www.fontsquirrel.com/tools/webfont-generator]), 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 :)

Profile icon
LanceKirkpatric

@eankeen
I was curious if you could share what the font files look like when opened. Mine currently haven't been able to be implemented into my site. This is what my current font file looks like when opened.
Screenshot 2021-10-20 1.49.19 PM

Profile icon
TheImagin33r

h

Profile icon
AndrewRoloff

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