A typeface is the shared design of letters, numbers, and symbols. In everyday web design, “font” and “typeface” are often used interchangeably. More precisely, a font is one particular rendering of a typeface: Arial is a typeface, while Arial 16-point bold is a font. section 3.2.2
Fonts help make a page attractive and readable. Choose them as part of the overall design, alongside type size, color, and headings. A useful starting point is to use one typeface for headings and another for ordinary text, provided the pair looks compatible. section 3.0 section 3.2.5
These five generic typeface categories are available in every browser. Serif styles have small cross strokes; sans-serif styles are clean and often suit small screen text; monospace gives every character equal width; cursive resembles handwriting; and fantasy uses more extreme, decorative designs. section 3.2.2
In CSS, set a typeface with the font-family property. Use quotation marks around a name that contains spaces. You can also list more than one choice, separated in order of preference. The browser tries the first installed typeface, then moves left to right through the fallback list. section 3.2.2
Use a fallback typeface
font-family: 'Roboto Serif', serif; This asks for Roboto Serif first. If that typeface is unavailable on a visitor’s device, the browser uses its generic serif typeface instead. A generic fallback helps preserve the intended broad style when a named typeface cannot load. section 3.2.2
For a more distinctive pairing, ask ChatGPT for compatible heading and text typefaces from Google Fonts. Describe the page theme, request serif or sans-serif styles for each role, and name any common choices you want to avoid. Review the suggestions and ask again if they do not fit the design. section 3.2.5
Prompt for a font pair
Ask for one Google Fonts typeface for headings and a compatible typeface for page text, based on your page theme. Specify whether each should be serif or sans serif, and optionally exclude Roboto and Open Sans for less familiar suggestions. section 3.2.5
When requesting a web page, include the fonts for headings and regular text in the formatting instructions, along with sizes and colors. Save the generated HTML as index.html and the CSS in the stylesheet named by the HTML, often styles.css, in the same folder. section 3.2.8 section 3.5
