Milk: Font options

Pre-installed fonts

Milk comes pre-installed with the following fonts:


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

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.