# Milk: Font options

### Pre-installed fonts

Milk comes pre-installed with the following fonts:

* Roboto (Default)
* Roboto Slab
* Bubbler One
* Dosis
* Exo 2
* Raleway
* Rubik
* Quicksand

***

### Changing font face

1. Open Flighteck extension (control panel)
2. Find "Font"
3. Set as desired
4. Submit

***

### Changing font sizes

Milk doesn't currently have a FlightDeck option for scaling options (maybe soon).

In the meantime, font sizes can be adjusted manually:

1. Open:  `yourforum.com/styles/Milk_v2/template/overall_header.html`
2. Find:<br>

   ```
   <style type="text/css">body {font-family: "Roboto Slab", Arial, Helvetica, sans-serif; font-size: 14px;}</style>
   	
   ```
3. Nearby, locate the font whose size you want to change
4. Reduce the font-size value. All fonts scale relative to this value.&#x20;

See: [How to edit code files](https://docs.planetstyles.net/getting-started/how-to-edit-code-files)

***

### Adding a new font face

In this example we will add Montserrat as a new font option to FlightDeck.

#### 1. Add flightdeck switch

1. Open: `yourforum.com/ext/planetstyles/flightdeck/styles/styles_config.json`
2. Find:<br>

   ```
   "Font": {
   	"name": "font_family",
   	"type": "list",
   	"help": "Set the font face. Previews can be found in description'<br />Default: Roboto.",
   	"values": [
   		"Roboto",
   		"Roboto Slab",
   		"Bubbler One",
   		"Dosis",
   		"Exo 2",
   		"Raleway",
   		"Rubik",
   		"Quicksand"
   	]
   },
   	
   ```
3. Add "Montserrat" on a new line, respecting the JSON formatting rules. Eg:<br>

   ```
   "Font": {
   	"name": "font_family",
   	"type": "list",
   	"help": "Set the font face. Previews can be found in description'<br />Default: Roboto.",
   	"values": [
   		"Roboto",
   		"Roboto Slab",
   		"Bubbler One",
   		"Dosis",
   		"Exo 2",
   		"Raleway",
   		"Rubik",
   		"Quicksand",
   		"Montserrat"
   	]
   },
   	
   ```
4. Save and upload file

#### 2. Building the font family

1. Find the font you want to use on [Google Fonts](https://web.archive.org/web/20230604061736/https://fonts.google.com/)
2. Click "+ Select this style" next to the following fonts weights: 300, 400, 500, 600
3. Click "Embed"&#x20;

   ![](https://web.archive.org/web/20230604061736im_/https://d33v4339jhl8k0.cloudfront.net/docs/assets/5e36e5442c7d3a7e9ae71c84/images/5e9a4b6704286364bc9894ef/file-D3LeoRk0jj.png)
4. Keep this information handy

#### 3. Integrating into Milk's front-end

1. Open: yourforum.com/styles/Milk\_v2/template/overall\_header.html
2. Find:<br>

   ```
   <!-- ELSE -->
   	<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
       <style type="text/css">body {font-family: "Roboto", Arial, Helvetica, sans-serif; font-size: 14px;}</style>
   <!-- ENDIF -->
   	
   ```
3. On a new line, before the `<!-- ELSE -->` , add the references to the Montserrat font (using the 'Embed' information in the earlier steps as a reference):<br>

   ```
   <!-- ELSEIF STYLE_SETTINGS_CONFIG_FONT_FAMILY == "Montserrat" -->
   	<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&display=swap" rel="stylesheet">
   	<style type="text/css">body {font-family: 'Montserrat', sans-serif; font-size: 14px;}</style>
   	
   ```

#### 4. Repeat all steps for overall\_header\_simplified.html

This is used on login pages.

#### 5. [Purge cache](https://docs.planetstyles.net/getting-started/how-to-purge-cache)

There is no need to re-install the FlightDeck extension


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.planetstyles.net/feature-guides/milk-theme/milk-font-options.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.