Using Google Fonts

Go to https://fonts.google.com to find fonts.

Copy and paste the stylesheet link from Google, including the font name: (?family=PlayBall):

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=PlayBall">

Add the font to your CSS selectors:

Use Multiple Google Font Families

To request multiple font families, separate the names with a pipe character (|). For example, to request the fonts Tangerine, Inconsolata, and Droid Sans:

https://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans

Google provides the regular version of the requested fonts by default. To request other styles or weights, append a colon (:) to the name of the font, followed by a list of styles or weights separated by commas.

For example:

https://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans

To find out which styles and weights are available for a given font, see the font's listing in Google Fonts. For each style you request, you can give either the full name or an abbreviation; for weights, you can also specify a numerical weight:

https://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold
https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:b
https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:700

Use the Standard way of embedding from Google's site. It also allows you to customize the font for font-weights, styles, etc. Then, can just copy and paste the code Google gives you:

<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">

For more info, see: https://developers.google.com/fonts/docs/getting_started

Embedding Fonts

To embed actual fonts that you have in your fonts folder, use the following in your stylesheet:

@font-face {
font-family: 'Open Sans';
src: url('../fonts/OpenSans-Regular.woff') format('woff'),
url('../fonts/OpenSans-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'Raleway';
src: url('../fonts/raleway-Regular.woff2') format('woff2'),
url('../fonts/raleway-Regular.woff') format('woff'),
url('../fonts/raleway-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}



Then, use them in your selectors

h1 {
font-family: "Open Sans", Arial, "sans-serif";
font-size: 1.6em;
font-weight: 400;
}

h2 {
font-family: Raleway, Arial, sans-serif;
font-size: 1.5em;
}