### Controlling Font Display Behavior

Source: https://developers.google.com/fonts/docs/getting_started

Example of using the 'display' parameter to control how fonts are displayed while loading. 'swap' is a common value.

```url
https://fonts.googleapis.com/css?family=Roboto&display=swap
```

--------------------------------

### Requesting Multiple Script Subsets

Source: https://developers.google.com/fonts/docs/getting_started

Example of requesting multiple script subsets ('greek', 'cyrillic') for a font, separated by a comma.

```url
https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek,cyrillic
```

--------------------------------

### Requesting Specific Script Subsets

Source: https://developers.google.com/fonts/docs/getting_started

Example of requesting a specific script subset ('cyrillic') for a font. The 'subset' parameter is used for this.

```url
https://fonts.googleapis.com/css?family=Roboto+Mono&subset=cyrillic
```

--------------------------------

### Requesting Specific Styles and Weights

Source: https://developers.google.com/fonts/docs/getting_started

Example of requesting specific styles (bold, italic) and weights for multiple font families. Styles can be abbreviated.

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

--------------------------------

### Optimizing Font Requests with 'text' Parameter

Source: https://developers.google.com/fonts/docs/getting_started

Example of using the 'text' parameter to specify characters needed, optimizing font file size. The value should be URL-encoded.

```url
https://fonts.googleapis.com/css?family=Inconsolata&text=Hello
```

```url
https://fonts.googleapis.com/css?family=Inconsolata&text=Hello%20World
```

--------------------------------

### CORS Response Header Example

Source: https://developers.google.com/fonts/docs/troubleshooting

This is the standard CORS response header used by Google Fonts to allow rendering on any domain.

```text
Access-Control-Allow-Origin:*
```

--------------------------------

### Requesting Multiple Font Families

Source: https://developers.google.com/fonts/docs/getting_started

Example of requesting multiple font families ('Tangerine', 'Inconsolata', 'Droid Sans') separated by a pipe '|'.

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

--------------------------------

### Adding Text Shadow with CSS

Source: https://developers.google.com/fonts/docs/getting_started

Enhance the previous example by adding a text-shadow to the CSS to create a drop shadow effect.

```css
body {
  font-family: 'Tangerine', serif;
  font-size: 48px;
  text-shadow: 4px 4px 4px #aaa;
}
```

--------------------------------

### Requesting a Single Font Family

Source: https://developers.google.com/fonts/docs/getting_started

Example of requesting a single font family, 'Inconsolata'. Spaces in font names should be replaced with '+'.

```url
https://fonts.googleapis.com/css?family=Inconsolata
```

--------------------------------

### Requesting WOFF2 Compressed Font Files

Source: https://developers.google.com/fonts/docs/developer_api

Example URL to request font files compressed in the WOFF2 format for better optimization. The 'capability' parameter is used for this.

```http
https://www.googleapis.com/webfonts/v1/webfonts?**capability=WOFF2**
```

--------------------------------

### Sample Font Queries for Google Fonts Provider

Source: https://developers.google.com/fonts/docs/android

These examples demonstrate how to request specific fonts and styles from the Google Fonts provider using query parameters. Ensure the font family exists on fonts.google.com.

```text
name=Lobster                            # Lobster, 400 weight
name=Lato&weight=100                    # Lato, 100 weight
name=Open Sans&weight=800&italic=1      # Open Sans, 800 weight, italic
```

--------------------------------

### Filtering API Results by Subset

Source: https://developers.google.com/fonts/docs/developer_api

Example URL to retrieve all font families that support a specific subset, such as 'greek'. Replace 'subset_name' with the desired script subset.

```http
https://www.googleapis.com/webfonts/v1/webfonts?**subset=subset_name**
```

--------------------------------

### Requesting Variable Font Files

Source: https://developers.google.com/fonts/docs/developer_api

Example URL to retrieve variable font files instead of static ones. Setting 'capability=VF' also returns axis range metadata for variable fonts.

```http
https://www.googleapis.com/webfonts/v1/webfonts?**capability=VF**
```

--------------------------------

### Sorting API Results by Popularity

Source: https://developers.google.com/fonts/docs/developer_api

Example URL to retrieve webfonts sorted by popularity. The 'sort' parameter accepts values like 'alpha', 'date', 'popularity', 'style', and 'trending'.

```http
https://www.googleapis.com/webfonts/v1/webfonts?**sort=popularity**
```

--------------------------------

### Filtering API Results by Category

Source: https://developers.google.com/fonts/docs/developer_api

Example URL to filter font families by category. Replace 'category_name' with a valid font category (e.g., 'sans-serif').

```http
https://www.googleapis.com/webfonts/v1/webfonts?**category=category_name**
```

--------------------------------

### Font Not Available Error Message

Source: https://developers.google.com/fonts/docs/troubleshooting

This example shows an error message that may appear when requesting a font weight not supported by the font family. It also indicates available styles and weights.

```css
/* Droid Serif (style: normal, weight: 300) is not available */
/* However, style: normal, weight: normal is available */
/* However, style: italic, weight: normal is available */
/* However, style: normal, weight: bold is available */
/* However, style: italic, weight: bold is available */
/* Not supported. */
```

--------------------------------

### Filtering API Results by Family Name

Source: https://developers.google.com/fonts/docs/developer_api

Example URL to query for a specific font family. Replace 'family_name' with the desired font family's name.

```http
https://www.googleapis.com/webfonts/v1/webfonts?**family=family_name**
```

--------------------------------

### Retrieve All Web Fonts

Source: https://developers.google.com/fonts/docs/developer_api

Send a GET request to this endpoint to retrieve a dynamic list of all font families offered by the Google Fonts service. Ensure you include your API key in the request.

```HTTP
https://www.googleapis.com/webfonts/v1/webfonts?key=YOUR-API-KEY
```

--------------------------------

### Get Web Fonts

Source: https://developers.google.com/fonts/docs/developer_api

Retrieves a list of font families from the Google Fonts API. Supports sorting, filtering by family name, subset, category, and optimization capabilities like WOFF2 and Variable Fonts.

```APIDOC
## GET /webfonts/v1/webfonts

### Description
Retrieves a list of font families from the Google Fonts API. This endpoint allows for sorting, filtering by family name, subset, category, and requesting specific optimization capabilities.

### Method
GET

### Endpoint
https://www.googleapis.com/webfonts/v1/webfonts

### Parameters
#### Query Parameters
- **sort** (string) - Optional - Specifies the order of the returned font list. Possible values: `alpha`, `date`, `popularity`, `style`, `trending`.
- **family** (string) - Optional - Filters the results to include only the specified font family name.
- **subset** (string) - Optional - Filters the results to include only fonts supporting the specified subset (e.g., `greek`).
- **category** (string) - Optional - Filters the results by font category (e.g., `sans-serif`).
- **capability** (string) - Optional - Specifies optimization capabilities. Use `WOFF2` for compressed font files or `VF` for variable font files and their axes range metadata.

### Request Example
```
https://www.googleapis.com/webfonts/v1/webfonts?sort=popularity&capability=VF
```

### Response
#### Success Response (200)
- **kind** (string) - The kind of object, a webfont object.
- **items** (array) - An array of font family objects.
  - **family** (string) - The name of the font family.
  - **variants** (array) - The different styles available for the family.
  - **subsets** (array) - A list of scripts supported by the family.
  - **menu** (string) - A URL to the family subset covering only the name of the family.
  - **version** (string) - The font family version.
  - **axes** (array) - Axis range, present only upon request for variable fonts.
  - **lastModified** (string) - The date (format "yyyy-MM-dd") the font family was modified.
  - **files** (object) - The font family files for each available variant.
  - **color_capabilities** (object) - The color formats, if any, supported by this family.
  - **tags** (array) - Tags that apply across this families entire designspace. Present only upon request.

#### Response Example
```json
{
 "kind": "webfonts#webfontList",
 "items": [
  {
    "family": "Noto Sans Display",
    "variants": [
      "regular",
      "italic"
    ],
    "subsets": [
      "cyrillic",
      "cyrillic-ext",
      "greek",
      "greek-ext",
      "latin",
      "latin-ext",
      "vietnamese"
    ],
    "version": "v20",
    "lastModified": "2022-09-22",
    "files": {
      "regular": "http://fonts.gstatic.com/s/notosansdisplay/v20/RLplK4fy6r6tOBEJg0IAKzqdFZVZxokvfn_BDLxR.ttf",
      "italic": "http://fonts.gstatic.com/s/notosansdisplay/v20/RLpjK4fy6r6tOBEJg0IAKzqdFZVZxrktdHvjCaxRgew.ttf"
    },
    "category": "sans-serif",
    "kind": "webfonts#webfont",
    "menu": "http://fonts.gstatic.com/s/notosansdisplay/v20/RLpbK4fy6r6tOBEJg0IAKzqdFZVZxpMkXJMhnB9XjO1o90LuV-PT4Doq_AKp_3cKZTCa3g.ttf",
    "axes": [
      {
        "tag": "wdth",
        "start": 62.5,
        "end": 100
      },
      {
        "tag": "wght",
        "start": 100,
        "end": 900
      }
    ]
  }
 ]
}
```
```

--------------------------------

### Requesting Styles and Weights with Abbreviations

Source: https://developers.google.com/fonts/docs/getting_started

Demonstrates using abbreviations ('i' for italic, 'b' for bold) and numerical weights for font styles.

```url
https://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold
```

```url
https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:b
```

```url
https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:700
```

--------------------------------

### Optimizing Font Requests with UTF-8 Characters

Source: https://developers.google.com/fonts/docs/getting_started

Demonstrates using the 'text' parameter with UTF-8 encoded characters for international fonts.

```url
https://fonts.googleapis.com/css?family=Inconsolata&text=%c2%a1Hola!
```

--------------------------------

### Basic HTML with Google Font

Source: https://developers.google.com/fonts/docs/getting_started

Include this HTML in your file to link to the Tangerine font and apply it to your body text.

```html
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Tangerine">
    <style>
      body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }
    </style>
  </head>
  <body>
    <div>Making the Web Beautiful!</div>
  </body>
</html>
```

--------------------------------

### Sample Google Fonts API Response Structure

Source: https://developers.google.com/fonts/docs/developer_api

This JSON structure represents a sample response from the Google Fonts API, detailing font families, their variants, subsets, and file locations.

```json
{
 "kind": "webfonts#webfontList",
 "items": [
  [...]
  {
    "family": "Noto Sans Display",
    "variants": [
      "regular",
      "italic"
    ],
    "subsets": [
      "cyrillic",
      "cyrillic-ext",
      "greek",
      "greek-ext",
      "latin",
      "latin-ext",
      "vietnamese"
    ],
    "version": "v20",
    "lastModified": "2022-09-22",
    "files": {
      "regular": "http://fonts.gstatic.com/s/notosansdisplay/v20/RLplK4fy6r6tOBEJg0IAKzqdFZVZxokvfn_BDLxR.ttf",
      "italic": "http://fonts.gstatic.com/s/notosansdisplay/v20/RLpjK4fy6r6tOBEJg0IAKzqdFZVZxrktdHvjCaxRgew.ttf"
    },
    "category": "sans-serif",
    "kind": "webfonts#webfont",
    "menu": "http://fonts.gstatic.com/s/notosansdisplay/v20/RLpbK4fy6r6tOBEJg0IAKzqdFZVZxpMkXJMhnB9XjO1o90LuV-PT4Doq_AKp_3cKZTCa3g.ttf",
    "axes": [
      {
        "tag": "wdth",
        "start": 62.5,
        "end": 100
      },
      {
        "tag": "wght",
        "start": 100,
        "end": 900
      }
    ]
  },
  [...]
 ]
}
```

--------------------------------

### Sample Google Fonts API Response

Source: https://developers.google.com/fonts/docs/developer_api

A sample JSON response structure from the Google Fonts Developer API, illustrating the details provided for a font family, including its name, variants, subsets, version, last modified date, and file URLs.

```JSON
{
 "kind": "webfonts#webfontList",
 "items": [
  []
  {
    "family": "Anonymous Pro",
    "variants": [
      "regular",
      "italic",
      "700",
      "700italic"
    ],
    "subsets": [
      "cyrillic",
      "greek",
      "latin",
      "latin-ext"
    ],
    "version": "v21",
    "lastModified": "2022-09-22",
    "files": {
      "regular": "http://fonts.gstatic.com/s/anonymouspro/v21/rP2Bp2a15UIB7Un-bOeISG3pLlw89CH98Ko.ttf",
      "italic": "http://fonts.gstatic.com/s/anonymouspro/v21/rP2fp2a15UIB7Un-bOeISG3pHl428AP44Kqr2Q.ttf",
      "700": "http://fonts.gstatic.com/s/anonymouspro/v21/rP2cp2a15UIB7Un-bOeISG3pFuAT0CnW7KOywKo.ttf",
      "700italic": "http://fonts.gstatic.com/s/anonymouspro/v21/rP2ap2a15UIB7Un-bOeISG3pHl4OTCzc6IG30KqB9Q.ttf"
    },
    "category": "monospace",
    "kind": "webfonts#webfont",
    "menu": "http://fonts.gstatic.com/s/anonymouspro/v21/rP2Bp2a15UIB7Un-bOeISG3pHl028A.ttf"
  },
  {
    "family": "Antic",
    "variants": [
      "regular"
    ],
    "subsets": [
      "latin"
    ],
    "version": "v19",
    "lastModified": "2022-09-22",
    "files": {
      "regular": "http://fonts.gstatic.com/s/antic/v19/TuGfUVB8XY5DRaZLodgzydtk.ttf"
    },
    "category": "sans-serif",
    "kind": "webfonts#webfont",
    "menu": "http://fonts.gstatic.com/s/antic/v19/TuGfUVB8XY5DRZZKq9w.ttf"
  },
  []
 ]
}
```

--------------------------------

### Constructing a Google Fonts API URL

Source: https://developers.google.com/fonts/docs/developer_api

This JavaScript snippet demonstrates how to dynamically build a Google Fonts API URL by combining family name, variants, and subsets. Ensure proper encoding of family names.

```javascript
var apiUrl = [];
apiUrl.push('https://fonts.googleapis.com/css?family=');
apiUrl.push(anonymousPro.family.replace(/ /g, '+'));
if (contains('italic', anonymousPro.variants)) {
  apiUrl.push(':');
  apiUrl.push('italic');
}
if (contains('greek', anonymousPro.subsets)) {
  apiUrl.push('&subset=');
  apiUrl.push('greek');
}

// url: 'https://fonts.googleapis.com/css?family=Anonymous+Pro:italic&subset=greek'
var url = apiUrl.join('');
```

--------------------------------

### Apply Single Font Effect via API

Source: https://developers.google.com/fonts/docs/getting_started

Use this URL to request a font with a specific effect. Ensure the font family and effect name are correctly specified.

```URL
https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple
```

--------------------------------

### Retrieve All Web Fonts

Source: https://developers.google.com/fonts/docs/developer_api

This endpoint retrieves a dynamic list of all font families offered by the Google Fonts service. It requires an API key for authentication and can be used to fetch font metadata.

```APIDOC
## GET /webfonts/v1/webfonts

### Description
Retrieves a list of all available font families from the Google Fonts service.

### Method
GET

### Endpoint
/webfonts/v1/webfonts

### Parameters
#### Query Parameters
- **key** (string) - Required - Your application's API key for authentication.

### Request Example
```
https://www.googleapis.com/webfonts/v1/webfonts?key=YOUR-API-KEY
```

### Response
#### Success Response (200)
- **kind** (string) - The type of resource returned.
- **items** (array) - An array of font family objects.
  - **family** (string) - The name of the font family.
  - **variants** (array) - An array of available font variants (e.g., "regular", "italic", "700").
  - **subsets** (array) - An array of supported character subsets (e.g., "latin", "cyrillic").
  - **version** (string) - The version of the font family.
  - **lastModified** (string) - The date when the font family was last modified.
  - **files** (object) - An object containing URLs for different font file formats.
  - **category** (string) - The category of the font (e.g., "monospace", "sans-serif").
  - **menu** (string) - URL for the font menu file.

#### Response Example
```json
{
 "kind": "webfonts#webfontList",
 "items": [
  {
    "family": "Anonymous Pro",
    "variants": [
      "regular",
      "italic",
      "700",
      "700italic"
    ],
    "subsets": [
      "cyrillic",
      "greek",
      "latin",
      "latin-ext"
    ],
    "version": "v21",
    "lastModified": "2022-09-22",
    "files": {
      "regular": "http://fonts.gstatic.com/s/anonymouspro/v21/rP2Bp2a15UIB7Un-bOeISG3pLlw89CH98Ko.ttf",
      "italic": "http://fonts.gstatic.com/s/anonymouspro/v21/rP2fp2a15UIB7Un-bOeISG3pHl428AP44Kqr2Q.ttf",
      "700": "http://fonts.gstatic.com/s/anonymouspro/v21/rP2cp2a15UIB7Un-bOeISG3pFuAT0CnW7KOywKo.ttf",
      "700italic": "http://fonts.gstatic.com/s/anonymouspro/v21/rP2ap2a15UIB7Un-bOeISG3pHl4OTCzc6IG30KqB9Q.ttf"
    },
    "category": "monospace",
    "kind": "webfonts#webfont",
    "menu": "http://fonts.gstatic.com/s/anonymouspro/v21/rP2Bp2a15UIB7Un-bOeISG3pHl028A.ttf"
  }
 ]
}
```
```

--------------------------------

### Apply Multiple Font Effects via API

Source: https://developers.google.com/fonts/docs/getting_started

Combine multiple font effects in a single API request by separating their names with a pipe character (`|`).

```URL
https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple|3d-float
```

--------------------------------

### Styling an Element with a Web Font in CSS

Source: https://developers.google.com/fonts/docs/getting_started

Apply a requested web font to an element using a CSS selector. Always include a fallback font.

```css
.css-selector {
font-family: 'Font Name', serif;
}
```

--------------------------------

### Base Google Fonts API URL

Source: https://developers.google.com/fonts/docs/getting_started

The base URL for requesting CSS stylesheets from the Google Fonts API.

```url
https://fonts.googleapis.com/css
```

--------------------------------

### Webfonts API URL Specification

Source: https://developers.google.com/fonts/docs/developer_api

This section outlines the structure of the Google Fonts API URL for retrieving font information. It details the base URL and available query parameters.

```APIDOC
## Webfonts API URL Specification

`webfonts?key=<your_key>[&family=<family>][&subset=<subset>][&capability=<capability>...][&sort=<sort>]`

### Parameters

- **key** (string) - Required - Your developer API Key.
- **family** (string) - Optional - Name of a font family.
- **subset** (string) - Optional - Name of a font subset.
- **category** (string) - Optional - Filters fonts by category. Allowed values: `serif` | `sans-serif` | `monospace` | `display` | `handwriting`.
- **capability** (string) - Optional - Filters fonts by capability. Allowed values: `VF` | `WOFF2`.
- **sort** (string) - Optional - Specifies the order of the results. Allowed values: `alpha` | `date` | `popularity` | `style` | `trending`.
```

--------------------------------

### Requesting a Web Font via Stylesheet Link

Source: https://developers.google.com/fonts/docs/getting_started

Use this HTML link tag to request a specific web font from Google Fonts.

```html
<link rel="stylesheet"
  href="https://fonts.googleapis.com/css?family=Font+Name">
```

--------------------------------

### Styling an Element with a Web Font Inline

Source: https://developers.google.com/fonts/docs/getting_started

Apply a requested web font directly to an element using an inline style. Always include a fallback font.

```html
<div style="font-family: 'Font Name', serif;">Your text</div>
```

--------------------------------

### Retrieve Font Family Tags

Source: https://developers.google.com/fonts/docs/developer_api

This JSON response shows the structure when requesting font family tags. The 'tags' field is populated with objects, each containing a 'name' and 'weight' for a specific tag.

```json
{
 "kind": "webfonts#webfontList",
 "items": [
  ...
  {
    "family": "Noto Sans Display",
    "variants": [
      "regular",
      "italic"
    ],
    "subsets": [
      "cyrillic",
      "cyrillic-ext",
      "greek",
      "greek-ext",
      "latin",
      "latin-ext",
      "vietnamese"
    ],
    "version": "v20",
    "lastModified": "2022-09-22",
    "files": {
      "regular": "http://fonts.gstatic.com/s/notosansdisplay/v20/RLplK4fy6r6tOBEJg0IAKzqdFZVZxokvfn_BDLxR.ttf",
      "italic": "http://fonts.gstatic.com/s/notosansdisplay/v20/RLpjK4fy6r6tOBEJg0IAKzqdFZVZxrktdHvjCaxRgew.ttf"
    },
    "category": "sans-serif",
    "kind": "webfonts#webfont",
    "menu": "http://fonts.gstatic.com/s/notosansdisplay/v20/RLpbK4fy6r6tOBEJg0IAKzqdFZVZxpMkXJMhnB9XjO1o90LuV-PT4Doq_AKp_3cKZTCa3g.ttf",
    "tags": [
      {
        "name": "/Expressive/Business",
        "weight": 58
      },
      {
        "tag": "/Sans/Humanist",
        "weight": 100
      }
    ]
  },
  ...
 ]
}
```

--------------------------------

### Google Fonts CSS for Internet Explorer

Source: https://developers.google.com/fonts/docs/technical_considerations

This CSS is served by the Google Fonts API for Internet Explorer when requesting the Inconsolata font. It specifies the font family and the font URL directly.

```css
@font-face {
  font-family: 'Inconsolata';
  src: url('https://themes.googleusercontent.com/fonts/font?kit=J_eeEGgHN8Gk3Eud0dz8jw');
}
```

--------------------------------

### Correctly Applying Font Weight in CSS

Source: https://developers.google.com/fonts/docs/troubleshooting

Ensure the correct font-weight is specified in your CSS rule when applying a font to a header to prevent browser auto-bolding.

```css
h1 {
 font-family: Lobster, cursive;
 font-weight: 400;
}
```

--------------------------------

### Google Fonts CSS for Firefox

Source: https://developers.google.com/fonts/docs/technical_considerations

This CSS is served by the Google Fonts API for Firefox when requesting the Inconsolata font. It specifies the font family and a local fallback with a TrueType format.

```css
@font-face {
  font-family: 'Inconsolata';
  src: local('Inconsolata'), url('https://themes.googleusercontent.com/fonts/font?kit=J_eeEGgHN8Gk3Eud0dz8jw') format('truetype');
}
```

--------------------------------

### Apply Single Font Effect in HTML

Source: https://developers.google.com/fonts/docs/getting_started

Add the `font-effect-` class to an HTML element to apply the corresponding font effect. This class name directly matches the effect name.

```HTML
<div class="font-effect-shadow-multiple">This is a font effect!</div>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.