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:

   <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.

See: 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:

   "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:

   "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
2. Click "+ Select this style" next to the following fonts weights: 300, 400, 500, 600

3. Click "Embed"

   
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:

   <!-- 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):

   <!-- 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

There is no need to re-install the FlightDeck extension