We are back to you with a another tutorial so you can learn something new about. Source Code Pro is part of the first font family ever released by Adobe. The website converts your font files to base64 and generates the CSS and JavaScript you. Next to the monospace Nitti you will now find a brand new duospace font.
This CSS tutorial explains how to use the CSS property called font-family with syntax and examples.
Description
The CSS font-family property defines a prioritized list of font family names to apply to an element.
Syntax
The syntax for the font-family CSS property is:
Parameters or Arguments
A list of font family names. It can be one of the following:
Value | Description |
---|---|
family-name | Name of a font family. If the font family name contains whitespace, the value must be enclosed in quotation marks. Some of the family-name values are (there are many more):
|
generic-family | Generic font families are used as a fallback mechanism in case none of the other family-names listed are available. These values must NOT be enclosed in quotation marks. Generic-family names can be one of the following:
|
inherit | Element will inherit the font-family from its parent element p { font-family: inherit; } |
Note
- The values listed in the font-family property are comma separated.
- The values listed in the font-family property are listed in priority. So the browser will try each of the font families in the order listed, until it finds one that is available.
- Not all fonts are supported in all browsers, so you must be sure to list enough font-families so that the browser can find one available.
- If the font-family name contains whitespace, you must enclose the name in quotation marks. ie: 'Trebuchet MS'.
- When creating your font-family list, start with specific family-names first and end with one generic-family at the end of the list.
Suggested font-family Lists
To help give you an idea of how to create our own font-family list, here are some of our suggestions:
- Verdana, Geneva, sans-serif
- Georgia, 'Times New Roman', Times, serif
- 'Courier New', Courier, monospace
- Arial, Helvetica, sans-serif
- Tahoma, Geneva, sans-serif
- 'Trebuchet MS', Arial, Helvetica, sans-serif
- 'Arial Black', Gadget, sans-serif
- 'Times New Roman', Times, serif
- 'Palatino Linotype', 'Book Antiqua', Palatino, serif
- 'Lucida Sans Unicode', 'Lucida Grande', sans-serif
- 'MS Serif', 'New York', serif
- 'Comic Sans MS', cursive
Browser Compatibility
The CSS font-family property has basic support with the following browsers:
- Chrome
- Android
- Firefox (Gecko)
- Firefox Mobile (Gecko)
- Internet Explorer (IE)
- IE Phone
- Opera
- Opera Mobile
- Safari (WebKit)
- Safari Mobile
Example
We will discuss the font-family property below, exploring examples of how to use this property in CSS.
In this CSS font-family example, we have set the font-family in the <p> tag to first Arial. If Arial is not available, the browser will try Helvetica. If Helvetica is not available, the browser will try the generic font family called sans-serif.
Next, let's look at a CSS font-family example where we have whitespace.
In this CSS font-family example, we have whitespace in the name Comic Sans MS. In this case, the family-name must be enclosed in quotation marks as follows: 'Comic Sans MS'. If 'Comic Sans MS' is not available, the browser will try the generic font family called cursive.
You can change the fonts in your WordPress theme for style or readability. Typographic (or 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} |
The web is actually kind of picky about how it displays fonts, as well as what sort of fonts you can use in the font-family property. Not all fonts appear correctly on the web. To be safe, consider sticking to some commonly used font families that appear correctly in most browsers:
- Serif fonts: Times New Roman, Georgia, Garamond, Bookman Old Style
- Sans-serif fonts: Verdana, Arial, Tahoma, Trebuchet MS
Changing font color
With more than 16 million different HTML color combinations available, you can find just the right color value for your project. After some time, you’ll memorize your favorite color codes. You may find that knowing codes for different shades of gray helps you quickly add an extra design touch.
Color | Value |
---|---|
White | #FFFFFF |
Black | #000000 |
Grays | #CCCCCC #DDDDDD #333333 #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:
Changing font size
To tweak the size of your font, change the font-size property of the CSS selector you want to change. Font sizes are generally determined by units of measurement, as in these examples:
FormIdentification Code. Replace Missing or BrokenTeeth – Complete aging.ohio.govFeb 15, 2012 purposes of this standard, providers of health care products or organization (PPO), government agency (Medicare, Medicaid, Civilian. 4.financial eligibility standards for RMNEMA to spend down as is done for Medi-Cal. Download standard form 5510. Supporting Documentation.www.dhcs.ca.govAged Aliens Who Are Ineligible for Medicare victims of a severe form oftrafficking are to receive the same benefits and services as Refugees.
- px: Pixel measurement. Increasing or decreasing the number of pixels increases or decreases the font size (12px is larger than 10px).
- pt: Point measurement. As with pixels, increasing or decreasing the number of points affects the font size accordingly (12pt is larger than 10pt).
- em: A scalable unit of measurement that is equal to the current font size. For example, if the font size of the body of the site is defined as 12px, then 1em is equal to 12px; likewise, 2em is equal to 24px.
- %: Percentage measurement. Increasing or decreasing the percentage number affects the font size accordingly (50% is the equivalent to 7 pixels; 100% is the equivalent to 17 pixels).
In the default template CSS, the font size is defined in the <body> tag in pixels, like this:
When you put all three elements (font family, color, and font size) together in the <body> tag, they style the font for the overall body of your site. Here’s how they work together in the <body> tag of the default template CSS:
Serif fonts have little tails, or curlicues, at the edges of letters. 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:
Borders
Using CSS borders can add an interesting and unique flair to elements of your theme design.
Border Properties | Common Values | CSS Examples |
---|---|---|
border-size | px, em | body {border-size: 1px;} |
border-style | solid, dotted, dashed | body {border-style: solid} |
border-color | Hexadecimal values | body {border-color: #CCCCCC} |
Additional CSS resources
The time may come when you want to explore customizing your theme further. Here are some recommended resources:
- WordPress Codex: Official WordPress documentation
- W3Schools: A free and comprehensive online HTML and CSS reference
- WebDesign.com: A premium library of WordPress video tutorials and training
- Smashing Magazine: Gives numerous tips and tricks for customizing a WordPress theme