The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS @font-face

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #27566

    Could someone explain to me in detail how @font-face works. I know how to write the CSS code but don’t understand where the fonts are stored how to access them. Do you have to upload them yourself? Do you link to an online font library?
    If you load the fonts yourself, do you just load the entire folder with printer and screen fonts? Can you use all font formats?

    This may be simpler than I am making it, but I am confused about this.




    Basically, "@" imports an external file so u could use this statement for importing stylesheets such as:


    So ur basically loading the font of your choice onto the users computer so they can view your website with the specified font :)

    Not all browsers support @font-face tho so i would use it as a future-proof method but would still use image-replacement techniques aswell, i’d suggest image-replacement as sIFR is hefty to load up. There are however pros and cons. If you use sIFR then if flashplayer isn’t enabled the user will still see the correct font if @font-face is used, it just wont render nicely.


    You can also do this:
    Toss the .ttf file or whatever kind it is into one of your folders, the very highest is the easiest. Label the font whatever you want (ex. SuperCoolFont) and attach it to the body or wherever you want the font to apply to. Then next do the @font-face. Make the font-family the same as the body or wherever you put it. Then do the src with the url and the address to your site. You have to type in the full address I believe. Make sure the url links to the proper folder of where the font file is and with the proper name and extension and it will do everything else for you. As an added note, even with properly purchased fonts, it is illegal to add a copyrighted font to your page without the consent of the owners.

    body {
    font-family: ‘SuperCoolFont’;

    @font-face {
    font-family: ‘SuperCoolFont’;
    src: url(

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.