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 (our favourite)
- Quicksand
Changing font face
- Open Flighteck extension (control panel)
- Find "Font"
- Set as desired
- 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:
- Open:
yourforum.com/styles/Milk_v2/template/overall_header.html - Find:
<style type="text/css">body {font-family: "Roboto Slab", Arial, Helvetica, sans-serif; font-size: 14px;}</style>
- Nearby, locate the font whose size you want to change
- Reduce the font-size value. All fonts scale relative to this value.
Adding a new font face
In this example we will add Montserrat as a new font option to FlightDeck.
1. Add flightdeck switch
- Open:
yourforum.com/ext/planetstyles/flightdeck/styles/styles_config.json - 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" ] },
- 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" ] },
- Save and upload file
2. Building the font family
- Find the font you want to use on Google Fonts
- Click "+ Select this style" next to the following fonts weights: 300, 400, 500, 600
- Click "Embed"
- Keep this information handy
3. Integrating into Milk's front-end
- Open:
yourforum.com/styles/Milk_v2/template/overall_header.html - 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 -->
- 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