Issue
Changing the font type 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
fontto 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