12 {{ upvoteCount | shortNum }}
12 {{ upvoteCount | shortNum }}

Hi, how do you change the font of your website using CSS?

by Tristan Lee
7 replies
  • WEB DESIGN
    • |
Can somebody help me out with this?
#change #css #font #website
  • Profile picture of the author yufengyesup
    what kind of font you want to change to?
    try:
    h1 {font-family: arial, verdana, sans-serif;}
    {{ DiscussionBoard.errors[868415].message }}
  • Profile picture of the author Tristan Lee
    I want to change it to Calibri font, the one in Microsoft Word 2007? Is this possible?
    {{ DiscussionBoard.errors[870702].message }}
  • Profile picture of the author JohnDaniel
    The basic thing to would be to add:

    body{
    font-family:Calibri, Verdana, sans-serif;
    }

    ... to your css.

    But keep in mind that the Calibri font is not readily available in other systems like mac osx, and linux unix, so the Calibri font will be replaced with Verdana in this case.
    {{ DiscussionBoard.errors[871069].message }}
    • Profile picture of the author cakdesigns
      Originally Posted by JohnDaniel View Post

      The basic thing to would be to add:

      body{
      font-family:Calibri, Verdana, sans-serif;
      }

      ... to your css.

      But keep in mind that the Calibri font is not readily available in other systems like mac osx, and linux unix, so the Calibri font will be replaced with Verdana in this case.
      you can use css3 wont work on older browers also remember fonts users can set there own font all the way across the bored in there os if they want.
      find the font put it in a folder with your style.css
      put this at the top of your css
      @font-face {
      font-family: "calibri";
      src: url(fonts/calibri.ttf) format("truetype");

      then you can call it like john shows
      {{ DiscussionBoard.errors[871779].message }}
  • Profile picture of the author Tristan Lee
    I've tried both of these methods and it didn't work.

    I opened up notepad and inserted this...

    body{
    font-family:Calibri, Verdana, sans-serif;
    }

    ...then I saved it as style2.css but it didn't work. So I sent on to try method two which was opening notepad and inserting this...

    @font-face {
    font-family: "calibri";
    src: url(fonts/calibri.ttf) format("truetype");
    body{
    font-family:Calibri, Verdana, sans-serif;
    }

    ...then I saved it as style2.css but it didn't work... I used XSitePro2 by the way. Does anyone know what code I need to put in to make Calibri work? Thank you.
    {{ DiscussionBoard.errors[874094].message }}
  • Profile picture of the author promo_guy
    Tristan

    This may be a stupid question but did you change your stylesheet in your header accordingly?

    ie <link rel="stylesheet" type="text/css" href="http://www.yourdomain.com/style2.css" /> kind of thing?

    I'm sure you thought of this but thought I'd ask just in case? Also, perhaps your browser isn't rendering Calibri thus is defaulting to Verdana (or sans-serif)?
    {{ DiscussionBoard.errors[874332].message }}
  • Profile picture of the author cakdesigns
    Tristan where did you put the font? for that
    @font-face to work you must point to the font in the style folder hence the url(font/calibri.ttf) youll have to find the file on your computer and copy it into your web directory and point to it
    {{ DiscussionBoard.errors[874972].message }}

Trending Topics