7 replies
  • WEB DESIGN
  • |
I am trying to change the font of the text of my site:

Quit Smoking Cigarettes | Stop Smoking Forever

Just like another thread that I had a question about HTML, I thought that I can come here and ask again since I am not 100% good in stuff like this.

How do I change this and what text font design should I use.

Tal
#changing #font #text
  • Profile picture of the author Thomas Frank
    This is best done through CSS.

    I'll just give you an example: Say you have some text in an <h2> tag, like this:

    Code:
    <h2>Quit Smoking Now</h2>
    If you want to change the font properties, you can use either an inline style, an embedded css section in your page, or an external style sheet. I'll show you an example of an inline style. Here's how to change your heading to be red with a Georgia font.

    Code:
    <h2 style="color: #FF0000; font-family: Georgia, serif;">Quit Smoking Now</h2>
    Note that #FF0000 is a hexidecimal representation of the color red.
    {{ DiscussionBoard.errors[3453461].message }}
  • Profile picture of the author Brian Lett
    Hi Tal,

    Just to clarify, are you trying to change the color (colour, since you are from Canada), or the actual font style? Also, what program are you using to do this?

    Brian
    {{ DiscussionBoard.errors[3453481].message }}
    • Profile picture of the author talfighel
      Originally Posted by Brian Lett View Post

      Hi Tal,

      Just to clarify, are you trying to change the color (colour, since you are from Canada), or the actual font style? Also, what program are you using to do this?

      Brian
      Sorry, the FONT STYLE of the text on the whole website.

      Tal
      {{ DiscussionBoard.errors[3453535].message }}
  • Profile picture of the author Thomas Frank
    Tal,

    The CSS font-style property refers to whether the text is normal or italic. Is this what you're trying to do? Or are you trying to change the font as you would in Microsoft Word?

    If you wanted to change the font style of your entire webpage, you'd go up into the head section of your HTML and add something like this:

    Code:
    <style type="text/css">
    
    p, h1, h2, h3, h4, h5, h6, ul, ol, span { font-style: italic; }
    
    </style>
    {{ DiscussionBoard.errors[3453581].message }}
  • Profile picture of the author Brian Lett
    Actually, Thomas laid out my question in a more accurate manner than I did. What he asked was essentially what I was attempting to ask.
    {{ DiscussionBoard.errors[3453674].message }}
  • Profile picture of the author Thomas Frank
    For just a bit more clarification on how to edit your font properties, I'll go over each of the properties a little more.

    Essentially, there are six properties you can play with when it comes to your fonts. They are:
    1. font-family
    2. font-size
    3. font-style
    4. font-variant
    5. font-weight
    6. color

    Font-family is the property you'd use when trying to change the font as you would in Word or Powerpoint. It allows you to specify the font family you'd like to use (such as Times New Roman, Georgia, or Arial), as well as whether it'll be serif or sans-serif. Serif fonts have the little curls and related things on the letters, while sans-serif fonts are much more blocky and lack those curls.

    Font-size obviously changes the size of the text. There are two ways to go about specifying font size - relatively or absolutely. You can do it relatively by using settings such as x-small, small, medium, large, x-large, etc. Otherwise you can specify the size absolutely in pixels or ems.

    Font-style lets you set your text to normal, italic, or oblique (pretty much the same as italic)

    Font-variant specifies whether or not the text uses small-caps font. I never use this.

    Font-weight refers to the boldness of the text.

    Obviously, color refers to the color of the text. There are a few pre-defined colors in CSS (red, blue, black, orange, etc), but to really get specific you need to use hex codes.

    As to your question on what would be a good font to use, it's really up to you; however, you should take a look at this list of web-safe fonts when choosing.
    {{ DiscussionBoard.errors[3453737].message }}
  • Profile picture of the author talfighel
    I did some testing and editing and I must say that it looks a lot nicer now.

    Thanks guys. I appreciate it.

    Learned something new today.

    Tal
    {{ DiscussionBoard.errors[3453746].message }}

Trending Topics