How to Define an Arial Font in CSS
If you post on your own blog or website, you may want to change certain elements of the format. While there are a lot of programs available to help you build a website, if you just want to do something simple like change the font of your written work from a serif font to the more readable Arial, getting your hands dirty with a little CSS can be the perfect solution.
Other People Are Reading
Instructions
-
-
1
Open the HTML code you would like to edit and look under the section at the top labeled <head> for the code <style type="text/css">. If you are working with a blank page and want to write all the code from scratch, enter in <head> and <style type="text/css">, hitting the "Enter" key after each tag.
-
2
Beneath the <style type="text/css"> header, copy and paste the following into a blank line:
p.sansserif{font-family:Arial}
If "p.sansserif" is already defined here, simply replace it.
-
-
3
Press the "Enter" key. Type "</style>", "</head>" and "<body>" if you are writing the code for your page from scratch, hitting enter after each tag. Navigate to below the "<body>" tag if you are working with already written html.
-
4
Find the text that you would like to change to Arial if you are working with prewritten code.
-
5
Type in the following before any text you would like to have in Arial font:
<p class="sansserif">
-
6
Type "</p>" at the end of the text you would like to have in Arial. Press "Enter" and type in "</body>" and "</html>" if you are writing the text from scratch, hitting "Enter" after each.
-
1
Tips & Warnings
Use quotation marks when working with a font name that is more than one word; for example, font-family: "Times New Roman."
Add additional text types when you define your CSS under the <style type="text/css"> header, in case the type you want to have appear isn't supported by your site visitor's web browser, by entering in additional font names in order of most to least preferred, as in the following example:
p.sansserif{font-family:Arial,Helvetica,sans-serif;}
Whenever editing web code, make sure to save a copy of the original .html file in a text document so you can revert to it if something goes wrong.
