Home » Internet » Web Designing » How To Use Custom Fonts On Your Website With CSS

How To Use Custom Fonts On Your Website With CSS



Update

With Google fonts it’s even easier to use custom fonts on your website. Although if you want to use the fonts that are not available on Google fonts you still have to follow the method described below, but if you can find a font of your liking on the above-mentioned Google link, then it becomes much easier.

Browse through various font categories. Once you have found the font that you want to use on your website or blog, you will find a small button (hover your cursor over various buttons to find out which one) labeled “Quick use”.

On the subsequent page you may have to scroll a bit down to find out instructions that allow you to use that particular font. There will be two bits of code. The first one you will have to put in the header area of your website or blog. If you scroll down further, they also tell you how to use the same font as the CSS style.

The old blog post proceeds…

With CSS (Cascading Style Sheets) you can use custom fonts on your website. Normally your visitors can only see the fonts that are already installed on their computers. So if you use a font that is not installed on your website visitor’s computer then his or her browser will show some other font that is there on the computer. That’s why when you are defining a font for an element (such as <p>) you often specify multiple fonts so that if your preferred font is not available your CSS file should use the available alternatives.

Conventional way of using custom fonts for headings and logos etc. is creating the text in a graphic editor and then using the image file. From the perspective of SEO this is not appropriate; you must use text as much as possible.

Now there is a way around in CSS that lets you use custom fonts, downloadable fonts on your website. You can download the font of your preference, let’s say cool_font.ttf, and upload it to your remote server where your blog or website is hosted.

Then from within your CSS file (or wherever you are defining your styles) you have to refer to that custom font in the following manner:

@font-face {
	font-family: cool_font;
	src: url('cool_font.ttf');
}

After that you can use it just like a normal CSS declaration:

p.custom_font{
	font-family: cool_font; /* no .ttf */
}

This way you can use as many custom fonts as you feel like on your website.

As you can notice in the comments section, this method of using custom fonts on your website doesn’t work with Internet Explorer (but of course!). Please refer to this link in order to know how you can make it work in IE too.

130 thoughts on “How To Use Custom Fonts On Your Website With CSS

  1. Sarah

    Thank you so much!

    I don’t understand why every other answer to using custom fonts that I find either says it’s impossible or makes it super difficult. I’ve designed so many sites around the crappy pre-installed fonts and it’s this simple?! Cheers!

  2. admin Post author

    Things are as easy and difficult as we make them out. I think some people make things appear difficult just to sound important.

  3. Prabakar

    thank u so much
    this coding is working well
    but this codes are not working in internet explorer why this problem

  4. summi

    mehndi
    impressions

    That’s what I have right now in my website for the title. I have the font Cataneo BT installed on my server as a .ttf file, but I don’t think I referenced it right, so it shows up as times new roman on alot of computers. But when I tried to add the src to it, it still didn’t work. So I don’t think I know where to add it in the html the right way. I’m not a website person at all, I just made it for a side business. If anyone knows how to reference the font, just let me know!

    p.s. I’m using webstarts.com if that matters. And as far as I know, the source for the .ttf file is “http://www.mehndi-impressions.com/uploads/cataneo_bt.ttf” but I could even be wrong on that one.

  5. Rob

    I used the following code and it shows up in safari and chrome but not firefox 3.6.3. Any ideas?
    @font-face {
    font-family: “MyAmaze”;
    src: url(customFonts/amazr.ttf);
    }
    p.customfont { font-family: “MyAmaze”; }

  6. Pingback: Her pc de ayn

  7. Anonymous

    Can someone explain to me? :D What part should i add in css and what to html file? Where to define that font?

  8. css

    @font-face {
    font-family: “Alexandra”;
    src: url(“Alexandra”), url(“Alexandra.ttf”) format(“truetype”);
    }

  9. Rakesh

    Hi,

    Is it work for IE browsers? i am using custom font for my new project it has to be compatible for IE6, 7, 8, Firefox, Chrome, Safari, Opera

  10. Sarah Watts Post author

    Hello Rakesh.

    In the end of the post I’ve mentioned a link where you can find information on how to make it compatible with IE :-)

  11. Jimmy

    Hi Guys,

    I’m trying to display font on wordpress website and I’m using custom indian font to display.

    I copied font into public_html folder and add following code but still no luck. any help please!!

    code i add in style.css:

    @font-face {
    font-family: Guj_Regular_SULEKH;
    src: url(‘Guj_Regular_SULEKH.ttf’);
    }

    p.custom_font{
    font-family: Guj_Regular_SULEKH; /* no .ttf */
    }

  12. Sarah Watts Post author

    Hello Jimmy.

    In wordpress you’ll have to upload the custom fonts in your current theme folder, something like
    /wp-content/themes/current-theme

  13. jimmy

    Ms. Sarah Watts,

    Thanks for your quick response. I’ve added following code in my style.css and it works on firefox and chrome.

    I’ve also converted ttf to eot,using http://ttf2eot.sebastiankippe.com and updated in my theme folder but its not showing in IE. can you guide pls?

    @font-face {
    font-family: “Guj_Regular_SULEKH”;
    src: url(‘http://www.samvadprakashan.com/Guj_Regular_SULEKH.eot’);
    src: url(‘http://www.samvadprakashan.com/Guj_Regular_SULEKH.ttf’);
    src: local(Guj_Regular_SULEKH), url(‘Guj_Regular_SULEKH.ttf’) url(‘Guj_Regular_SULEKH.eot’) format(‘opentype’);
    }
    p { font-family: Guj_Regular_SULEKH }

    Thanks and vbr,

  14. jimmy

    Hey guys, it work like charm in all browsers. I really don’t know how to thank you all contributor.

    Thanks to Sarah and all. hv a good one.

  15. bdunn

    The font I am wanting on my site works great when I am looking at the pages on my local machine. But when I upload to the server, it goes back to the default times font. Any ideas?

  16. Aditya Bajaj

    Thank you so much this is the best way of using customs fonts without limiting bandwith usage

  17. Aditya Bajaj

    have you put the actual font file somewhere on your ftp server the link in the first css should also point to it.

    All the best

  18. Free_agent

    Hello,

    I am an absolute beginner and I cant get this code to work for me! I have a few embarrassing questions so if anyone can help that would be awesome!

    1. Can I paste the @font-face code ANYWHERE in my CSS document? If not, where should it go?

    2. With this part of the code src: url('cool_font.ttf'); do I type in the url address of where my font is located where it says url or keep the code exactly as it is with my font name in brackets?

    3. After this has been completed how do I apply this font? I have tried applying it to a heading but the heading keeps defaulting to another font.

    Any help is appreciated.

  19. subhramani

    1. This can go anywhere in your CSS file.

    2. The font should be in the same directory as your CSS file (to reduce headaches).

    3. Once you put the font in the same directory as our CSS file, just mention the font name and not the whole URL.

    4. Even I cant get it to work. Hahahah! :-D

  20. Pingback: Adding Custom Fonts In CSS | BigRobby.com

  21. Pingback: Which Font Style - Graphic Design Forums: UK forums for graphic designers

  22. Jaeggi Roger

    IE use the .eot Fonts Type

    @font-face {
    font-family: “Droid Serif”;
    src: url(DroidSerif-Regular.eot);

  23. Ctcmiami

    Is it possible to attatch the custom fonts to any other html tags… for example can I use the

    or <font> tag (or any other tag for that matter),  instead of, or alongside the

    tag???

    </font>

  24. thesophist

    Hello!  Thank you for the great tutorial!  I was wondering, are there some font types that cannot be used?  I am attempting to use “Bank Gothic” on my site and I have loaded the font pack into the site folder and properly addressed it in my master CSS sheet, but it won't load in my browsers (Chrome, FF, Safari) nor Dreamweaver's live view.  Here is the section of my CSS:

    @font-face { font-family: BankGothic; src: url('fonts/BankGothic');}@font-face { font-family: BrushScript; src: url('fonts/BrushScriptStd.otf');}

    On a side-note, Brush Script is working fine.  I think the problem is that the font pack I have for Bank Gothic is a font suitcase and has no extension, but I am unsure what extension to put into my CSS to get it to load.  Thanks!

  25. Pingback: Sava fonta pievienošana | Janis-Rullis-IT

  26. Pingback: how can i set a custom font in aspx .NET ? - Programmers Goodies

  27. nd

    thanx for this informationi developed a websitehttp://www.nidiots.co.inso suggest the font for this web site

  28. Alok12f

    I am using this type of font : Gelder Sans Book
    but only work in IE and not working in other browser .

  29. ktbsayrelax

    Awesome, but I've tried this twice for two different custom fonts and it won't work on the second font? hmmm …

  30. andrew

    Everyone seems to have it working on every browser (and firefox) but it doesn't work with firefox for me. I even got it working with IE. Can someone help please

  31. shiduoaa

    Thanks for your guide! It's quite difficult to figure out which font-family I should modify since there are many font-family.

  32. Maneksh V.Thomas

    Hello,
    Liked your post. The link led me to the article to use with IE but it does not work with IE9 as expected. So I had to use a work around. Thought I'd put it up just in case you will like to update ur article with it. Infact this seems to work with everything.The Idea is that I declare both Fonts with separate names and attach them as a font family.

    @font-face{
    font-family: myFont;
    src: url('myFont.ttf');
    }

    @font-face{
    font-family: myFontEI;
    src: url('myFont.eot');
    }

    Then Attach it as a font family like so…

    font-family: myFont, myFontEI;

    Hope it helps… :)

  33. AndyM

    FOR PEOPLE WHO CAN'T SEEM TO GET THIS WORKING:

    try putting the css and font files in THE SAME FOLDER as the html…. it worked for me!

  34. Sonic Producer

    Thanks, this is exactly what I was looking for, but I'm still having some trouble getting it to work in IE. Since so many people online use IE, cross-compatibility is really important.

  35. Pingback: Hiển thị font chữ chuẩn và không chuẩn trên trang web | Lập trình web | Wordpress | jQuery | PHP | CSS

  36. Pingback: How To Use Custom Fonts On Your Website With CSS » Web Design

  37. Sallosalla

    function ae_detect_ie()
    {
        if (isset($_SERVER['HTTP_USER_AGENT']) && 
        (strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== false))
            return true;
        else
            return false;
    }
     

  38. Susan

    I used this method for a while but then I found this WP theme generator called Lubith which has a great typography extension. over 400 fonts to choose from and no trouble with compatibility or copyright issues. I get my design in no time with no code and time spent on the web searching and downloading fonts.

  39. Pingback: Led Tvs | Under Counter TV

  40. Pingback: web font to css | code@butterflybone

  41. Nich

    Do you have to worry about font copyright? (for example; if I upload a font from a friends computer that I have not purchased myself. Could I get in trouble?)

  42. Shreddy Mcfretshredder

    so, im trying to get this to work on my WAMP server.. funny thing, it's touch and go on my computer for working.. i made a site a while back where one font worked and another wouldn't. and for my new site i'm making, nothing i do will make the code work.. :/  this is what i have(note: my main page is linking the css as well as the font im trying to change):

    this is in the CSS
    @font-face { font-family: Cronos; src: url('C:wamp….cronos.ttf')  format:('truetype'); } p {   font-family: Cronos;    font-size: 24; }
    this is in my index:
    <div class=”column” id=”center”>
    </div>
    and this is in my homeInfo.php:
    <table align=”left”> <tbody><tr> <td>

    This is a test. CRONOS

    <hr>

    </td> </tr> <tr> <td><font size=”5″> This is a test. CRONOS</font> <hr> </td> </tr> <tr> <td> in multiple table data spots. </td> </tr> </tbody></table>

    for me the part with the

    doesn't change font compared to the one right under it. I've checked by having photoshop with the word CRONOS open on it and the site's text looks nothing like it..

    I know I'm doing something wrong, someone please point out the obvious thing that im doing wrong because I cannot see it. >.<

  43. Jay

    lots of people use it. when designing a site you need to make sure it functions the same over many browers. not just IE, firefox, and safari. 

  44. Simeon Prince

    why people still using IE? I know that as web designers we must maintain the same appearance in all browsers, but come on… who still uses IE anyway? since they are always late with the web standards. I don't use windows as much anymore, but when I do, the very first software I install is Google Chrome. then I can get on with my work. as for my main os, I use Linux Mint, we have chrome and firefox.

  45. Pingback: yachtclubshipstore.com | Your Questions About Theatermania

  46. wizarddesign

    Thanks, it was helpful, we did it on persian fonts like this:

    @font-face { font-family:'Nazanin'; src:url('../fonts/BNAZANIN.TTF') format('truetype') ,url('../fonts/BNAZANIN.eot') format('embedded-opentype'),url('../fonts/BNAZANIN.svg') format('svg'),url('../fonts/BNAZANIN.woff') format('woff');}

    and its working !

  47. Pingback: How To Use Custom Fonts On Your Website With CSS | Tejash H Shah

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>