Can I set the font and font size?

[LongQi]

• This is a question about using the theme.
• This is a feature request.
• I believe this to be a bug with the theme.
  • I have updated all gems with bundle update.
  • I have tested locally with bundle exec jekyll build.

---

Environment informations

• Minimal Mistakes version:
• Jekyll version:
• GitHub Pages hosted: yes/no
• Operating system:

---

Expected behavior

Steps to reproduce the behavior

[mmistakes]

Yes. Edit the following variables in _sass/_variables.scss.

/* system typefaces */
$serif                        : Georgia, Times, serif !default;
$sans-serif                   : -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif !default;
$monospace                    : Monaco, Consolas, "Lucida Console", monospace !default;

/* sans serif typefaces */
$sans-serif-narrow            : $sans-serif !default;
$helvetica                    : Helvetica, "Helvetica Neue", Arial, sans-serif !default;

/* serif typefaces */
$georgia                      : Georgia, serif !default;
$times                        : Times, serif !default;
$bodoni                       : "Bodoni MT", serif !default;
$calisto                      : "Calisto MT", serif !default;
$garamond                     : Garamond, serif !default;

$global-font-family           : $sans-serif !default;
$header-font-family           : $sans-serif !default;
$caption-font-family          : $serif !default;

/* type scale */
$type-size-1                  : 2.441em !default;  // ~39.056px
$type-size-2                  : 1.953em !default;  // ~31.248px
$type-size-3                  : 1.563em !default;  // ~25.008px
$type-size-4                  : 1.25em !default;   // ~20px
$type-size-5                  : 1em !default;      // ~16px
$type-size-6                  : 0.75em !default;   // ~12px
$type-size-7                  : 0.6875em !default; // ~11px
$type-size-8                  : 0.625em !default;  // ~10px

[shsamyam]

Sorry, super old post, but how do I change the font using these codes? Specifically, where do I make changes? Thank you!

[wenhaojiangsoc]

I am also confused. Second your inquiry.

[LongQi]

Thanks

[PingTrip]

Is this still the preferred method for modifying the size of font for the body of a post? Adjusting the variables does change the font size for some elements, like the title, but not the main body text. When I inspect a section of rendered text it appears that the font size is hardcoded at 1em:

From _page.scss:

.page__content {
  h2 {
    padding-bottom: 0.5em;
    border-bottom: 1px solid $border-color;
  }

  p,
  li,
  dl {
    font-size: 1em;
  }

[mmistakes]

@PingTrip See #1219, you don't want to mess with the .page_content font-sizes directly.

The base font-size scales up and down depending on the viewport size. You'll want to modify these values so all of the type across the entire page scales proportionally with each other.

[mariomeissner]

I'm having the same issue. After seeing 3 different threads about changing the font-size, it's still unclear to me what I should do.

I would like to reduce the main body fonts on large screens (ideally while proportionally reducing headers, code, etc. as well), everything else can stay.

Changing the "type-size" variables doesn't change anything for me, and changing the breakpoints in _reset.scss makes everything smaller, which I don't really want.

[MoritzLange]

If you adjust your /assets/css/main.scss like suggested in #1219:

You'll have to first set variables (like those in _variables.scss), then import minimal mistakes, and finally write the html code.
The html part will set the default font size (i.e. the text font size within your posts). The type-size variables on the other hand will set font size for other elements like table of content etc., relative to the default size specified in the html block.

As an example here's my /assets/css/main.css:

---
# Only the main Sass file needs front matter (the dashes are enough)
---

@charset "utf-8";

@import "minimal-mistakes/skins/{{ site.minimal_mistakes_skin | default: 'default' }}"; // skin

/* system typefaces */
$serif: Lora, Georgia, Times, serif !default;
$sans-serif: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI",
  "Helvetica Neue", "Lucida Grande", Arial, sans-serif !default;
$monospace: Monaco, Consolas, "Lucida Console", monospace !default;

/* sans serif typefaces */
$sans-serif-narrow: $sans-serif !default;
$helvetica: Helvetica, "Helvetica Neue", Arial, sans-serif !default;

/* serif typefaces */
$georgia: Georgia, serif !default;
$times: Times, serif !default;
$bodoni: "Bodoni MT", serif !default;
$calisto: "Calisto MT", serif !default;
$garamond: Garamond, serif !default;

$global-font-family           : $serif !default;
$header-font-family           : $sans-serif !default;
$caption-font-family          : $serif !default;

/* type scale */
$type-size-1: 2.441em !default;
$type-size-2: 1.953em !default;
$type-size-3: 1.563em !default;
$type-size-4: 1.25em !default;
$type-size-5: 1.1em !default;
$type-size-6: 0.8em !default;
$type-size-7: 0.8em !default;
$type-size-8: 0.625em !default;

/* headline scale */
$h-size-1: 1.563em !default;
$h-size-2: 1.25em !default;
$h-size-3: 1.125em !default;
$h-size-4: 1.0625em !default;
$h-size-5: 1.03125em !default;
$h-size-6: 1em !default;

@import "minimal-mistakes";

html {
    font-size: 14px; // change to whatever
  
    @include breakpoint($medium) {
      font-size: 16px; // change to whatever
    }
  
    @include breakpoint($large) {
      font-size: 18px; // change to whatever
    }
  
    @include breakpoint($x-large) {
      font-size: 20px; // change to whatever
    }
  }

[alichtman]

I wanted to make my site use a custom monospace font (Cascadia). Here's what I did:

First, I moved the font into assets/:

$ tree assets
 assets
├──  Cascadia
│   ├──  CascadiaCode-Bold.ttf
│   ├──  CascadiaCode-BoldItalic.ttf
│   ├──  CascadiaCode-ExtraLight.ttf
│   ├──  CascadiaCode-ExtraLightItalic.ttf
│   ├──  CascadiaCode-Italic.ttf
│   ├──  CascadiaCode-Light.ttf
│   ├──  CascadiaCode-LightItalic.ttf
│   ├──  CascadiaCode-Regular.ttf
│   ├──  CascadiaCode-SemiBold.ttf
...

Then, in _sass/minimal-mistakes/_variables.scss, I changed the $monospace system typeface to start with "Cascadia":

/* system typefaces */
$serif: "Roboto Mono", Georgia, Times, serif !default;
$sans-serif: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif !default;
$monospace: "Cascadia", Monaco, Consolas, "Lucida Console", monospace !default;

Then, I set all of the *-font-familys to use $monospace:

$global-font-family: $monospace !default;
$header-font-family: $monospace !default;
$caption-font-family: $monospace !default;