How to • Type

If you want to use a particular font in your page design, you must give the font to readers using one of two methods:

Link the font file to your page using the @font-face rule in your CSS style sheet. (Remember to upload the font file to the server.)
Link to a Google Font with the supplied link.

Candara is a humanist sans-serif typeface designed by Gary Munch as part of Microsoft’s ClearType Font Collection. It features open letterforms, soft curves, and a relatively large x-height, which make it highly readable on screens, especially at small sizes. Candara has a clean, modern appearance that works well for user interfaces, presentations, and body text in digital documents.

    CSS for Candara from a Font File
    <style>
        @font-face {
            font-family: Candara;
            src: url("Candara.ttf");
        } p {
            font: 14pt/1.4em Candara, sans-serif;
        }
    </style>

Roboto is a modern sans-serif typeface designed by Christian Robertson for Google, originally created for the Android operating system. It combines geometric forms with friendly, open curves, giving it a clean appearance that reads well at many sizes. Roboto is highly versatile and widely used in web, mobile, and application interfaces due to its clarity and extensive family of weights and styles.

    Link to Roboto on Google Fonts
    <link href="https://fonts.googleapis.com/css2?family=Roboto:
    ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">

As a precaution, you should include a list of additional fonts (“font stack”) in which you would like to see your text displayed, in the event your first choice doesn't work for some reason. The font-stack should end in a generic specification, such as serif, sans-serif, monospace, cursive, or fantasy.

    font-family: Roboto, Helvetica, Arial, sans-serif;