> For the complete documentation index, see [llms.txt](https://docs.planetstyles.net/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.planetstyles.net/feature-guides/milk-theme/milk-font-options.md).

# 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](/getting-started/how-to-edit-code-files.md)

***

### 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](/getting-started/how-to-purge-cache.md)

There is no need to re-install the FlightDeck extension