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
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
Last updated
Was this helpful?