You can change the fonts in your WordPress theme for style or readability purposes. Font design experts use simple font variations to achieve amazing design results. You can use fonts to separate headlines from body text (or widget headlines and text from the main content) to be less distracting.
| Font Properties | Common Values | CSS Examples |
|---|---|---|
| font-family | Georgia, Times, serif | body {font-family: Georgia; serif;} |
| font-size | px, %, em | body {font-size: 14px;} |
| font-style | italic, underline | body {font-style: italic;} |
| font-weight | bold, bolder, normal | body {font-weight: normal} |
Font family
The web is actually kind of picky about how it displays fonts, as well as what kind of fonts you can use in the font-family property. Not all fonts display correctly on the web. To be safe, here are some commonly used font families that display correctly in most browsers:
Serif fonts: Times New Roman, Georgia, Garamond, and Bookman Old Style
Sans-serif fonts: Verdana, Arial, Tahoma, and Trebuchet MS
Serif fonts have little tails, or curlicues, at the edges of letters. (This text is in a serif font.) Sans-serif fonts have straight edges and are devoid of any fancy styling.
When you want to change a font family in your CSS, open the stylesheet (style.css), search for property: font-family, change the values for that property, and save your changes.
In the default template CSS, the font is defined in the <body> tag like this:
font-family: Georgia, "Bitstream Charter", serif;
Font color
With more than 16 million HTML color combinations available, you can find just the right shade of color for your project. After some time, you’ll memorize your favorite color codes.
| Color | Value |
|---|---|
| White | #FFFFFF or |
| Black | #000000 or |
| Grays | #CCCCCC or #DDDDDD or #333333 or #333 #E0E0E0 |
You can easily change the color of your font by changing the color property of the CSS selector you want to tweak. You can use hex codes to define the colors.
You can define the overall font color in your site by defining it in the body CSS selector like this:
body {
color: #333;
}Font size
To tweak the size of your font, change the font-size property of the CSS selector you want to adjust. Font sizes generally are determined by units of measurement, as in these examples:
px: Pixel measurement, or px; increasing or decreasing the number of pixels increases or decreases the font size (12px is larger than 10px).
pt: Point measurement, or pt; as with pixels, increasing or decreasing the number of points affects the font size accordingly (12pt is larger than 10pt).
%: Percentage measurement, or %; increasing or decreasing the percentage number affects the font size accordingly (50% is the equivalent to 8 pixels; 100% is the equivalent to 16 pixels).
In the default template CSS, the font size is defined in the body tag in pixels, like this:
font-size: 12px;
Putting it all together
Style the font for the overall body of your site by putting all three elements (font-family, color, and font-size) together in the <body> tag. Here’s how they work together in the <body> tag of the default template CSS:
body {
font-size: 12px;
font-family: Georgia, "Bitstream Charter", serif;
color: #666;
}dummies
Source:http://www.dummies.com/how-to/content/how-to-choose-fonts-in-a-wordpress-theme.html
No comments:
Post a Comment