Defining Fonts In CSS

The nature of the web makes specifying type tricky, if not frustrating. There is no sure-fire way of knowing whether the font you specify will be available or how large or small the type will appear when it hits your user’s browsers.

Basic Font Properties

Selecting the type of font that you want to use is usually the first thing you do in CSS. Fonts are specified using a set of font-related properties for typeface, size, weight, font style, and special characters. There are also shortcut properties that let you specify multiple font attributes in a single rule

Specifying the Font name

Choosing a typeface, or font family is a good place to start, let’s begin with the font-family property

body { font-family: Arial; } 
var {font-family: Courier, monospace; }
p {font-family: "Duru Sans", Verdana, sans-serif }

Important syntax requirements

1. All font names, with the exception of generic font families, must be capitalized. For example, use Arial instead of arial
2. Use commas to separate multiple font names, as shown in the second and third examples
3. Font names that contain a character space(such as Duru Sans in the third example) must appear within double quotation marks.

Why specify more than one font?

Browsers are limited to displaying fonts they have access to. Traditionally that meant the fonts that were already installed on the user’s hard drive. in 2010, browsers started supporting embedded web fonts using the CSS @font-face rule, so it became possible for designers to provide their own fonts.

But back to our font-family rule. Even when you specify that the font should be Futura in a style rule, if the browser can’t find it(for example, if that font is not installed on the user’s computer or the provided web font(for example google fonts) fails to load, the browser uses its default font instead.

The Good thing is that CSS allows us to provide a list of backup fonts should our first choice not be available.

If the first specified font is not found, the browser tries the next one, and down through the list until it finds the one that works. In the third font-family rule shown in the code example above, if the browser cannot find the Duru Sans, it will use Verdana, and if Verdana cannot be found, it will substitute some other sans-serif font

The ABCs of Web Font Formats

The ability to provide your own font for use on a web page has been around since 1998, but it was never feasible because of browser inconsistencies. Fortunately, web fonts are a perfectly viable option.

To link a web font, you need to use the font legally and provide it in a way that all browsers support. There are two general approaches to providing fonts: Host them yourself or use a web font service(e.g google web fonts)

Generic font families

We said “some other sans-serif font” before. What do we mean? Sans-serif is just one of the five generic font families that you can specify with the font-family property.

1. Serif — Decorative strokes e.g Times, Georgia, Times New Roman, Lucida
2. Sans-serif — Do not have decorative strokes. Only straight strokes e.g Verdana, “Trebuchet Ms”, Arial, Arial black
3. Monospace — Monospace means equal widths e.g Courier, Courier New, Andale Mono
4. Cursive fonts — Emulate a script or handwritten appearance e.g Apple chancery, Comic sans, Snell
5. Fantasy — Are purely decorative and would be appropriate for headlines and other display types e.g Impact, Stencil, Mojo

What strategies should we use to pick Font-stack?

The best practice for specifying fonts for web pages is to start with your first choice, provide some similar alternatives, and then end with a generic font family that at least helps users right style.

font-family: Oswald, Universe, Tahoma, Geneva, sans-serif

A good font stack should include stylistically related fonts that are known and installed on most computers. Sticking with fonts that come with Windows, macOS, and Linux Os, as well as fonts that get installed with Popular Software Packages such as Ms. Office, and Adobe Creative Suite gives you web-safe fonts to choose from.

Selecting web fonts is more like merely suggesting them. You do not have absolute control over which font your users will see. You might get your first choice; you might get the generic fallback. It’s one of those web design quirks that you learn to live with.

Code example

markup

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Black Goose Restaurant</title>
</head>
<body>
  <h1>Lorem ipsum dolor sit amet consectetur adipisicing.</h1>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Possimus cum vel quidem. Quisquam est aperiam sunt pariatur eveniet ratione atque aut omnis amet? Laudantium est dolores mollitia temporibus obcaecati id delectus eius. Reprehenderit, possimus illum. Libero cupiditate quod fugit consectetur?</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore vero laudantium, possimus nemo sequi placeat sunt, veniam accusantium quasi velit ex doloribus fuga doloremque quisquam saepe? Esse maiores consequatur ipsa excepturi ab blanditiis? Temporibus amet sapiente consequuntur necessitatibus commodi quia animi impedit! Rem, cumque sunt reprehenderit necessitatibus minus doloremque officiis laborum enim. Quidem earum expedita, accusantium pariatur eaque ex?</p>
  <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h2>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex vitae expedita debitis, ipsum odio dolore ut aperiam, sed similique quibusdam tempore neque quam? Adipisci error reprehenderit et omnis aspernatur commodi!</p>
  <h1>Lorem ipsum dolor sit amet consectetur adipisicing.</h1>
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, earum. Illum, ex minus ducimus, nobis laudantium optio cum at commodi id amet laboriosam unde. Illum mollitia ullam excepturi illo maiores culpa laborum, minus vitae molestias consectetur commodi quae odio tempore rerum reiciendis praesentium fuga. Laudantium pariatur sapiente magnam non perspiciatis!</p>
  
</body>
</html>

styles.css

h1 {
  font-family: Georgia, sans-serif; 
}
p {
  font-family: Oswald, Universe, Tahoma, Geneva, sans-serif; 

The result for the following lines of code in a computer browser.