|
Reference number: CH000072
Changing the type of font displayed on web page.
Issue:Changing the type of font displayed on web page.
Solution:CSS
The recommended method changing the font color is using
CSS. Below are two different
methods of doing this with CSS.
Using it once
If you plan on changing the font only once on the web page use
the below example. In the below example we're changing all the text
contained within the <span></span> tags to the Courier font using
#0066CC as the blue color.
<span style="font-family : Courier;color: #0066CC;">This text is
Courier blue</span>
Plan on using it more than once or on multiple pages
If you plan on using this font, color, or other font properties
more than once we suggest following the below steps.
In the <head></head> portion of your web page add code similar to
the below example. In this example we're creating a style called
.courier, which is using the courier font with the color #005CB9. A
listing of these color codes and examples can be found on our color codes page.
<style type="text/css">
.courier {
font-family: Courier;
color: #005CB9;
}
</style> |
Once defined this style can be used anywhere in your page by using
either of the below examples. In the first example everything
contained within the paragraph (<p> </p>) would be courier and blue as defined in the above example. With the second example only the
TEST part of the line contained within the <span> would be courier
and blue.
<p class="courier">Test</p>
This is a <span class="courier">TEST</span> |
A font style can also be defined in an external .css file as
shown in the below example.
.courier {
font-family: Courier;
color: #005CB9;
} |
Once the above has been placed into a .css file, call the .css
file by using a command similar to the below example in your
<HEAD></HEAD> portion of your web page. In the below example we've
called our .css file basic.css. Once this is in your code you can
use the same above example to turn text courier and blue within any of your
web pages that contain this code. If at any time in the future you
wish to change the properties you'll only need to change the code
within the .css file.
| <link rel="stylesheet" type="text/css" href="http://www.example.com/basic.css"> |
Font tag
Although this HTML tag is
deprecated it can still be used and may be necessary to be used
with some online services. When using the FONT tag, you must include the face attribute, which is the name of the
font
to be used. In the below example, we're using the Courier font.
| <font color="#005CB9"
face="courier">This is a special font</font> |
Remember that when changing the font to be displayed, if the user visiting your web page does
not have the font you are using, the font will be viewed as the default font.
Example:
This is a special font Additional information:
- See our color codes page for a
complete listing of HTML color codes and examples of what each
color code looks like.
- Information about adjusting the website body font can be
found on document CH000067.
|
