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

Last updated