Work Instruction

Change Font

2023-08-04_17-42-font

  • Select Light 300 (example) > select @import > copy clipboard
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300&display=swap');

2023-08-04_17-44-font2

  • Go to (local project path)/_sass/minimal-mistakes.scss
  • Add below lines
/* Google fonts */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300&display=swap');
  • Go to google font and check font family name in ‘CSS rules to specify families’

2023-08-04_17-44-font2

  • Go to (local project path)/_sass/minimal-mistakes/_variables.scss
  • Add font name like below
/* system typefaces */
$serif: Georgia, Times, serif !default;
$sans-serif: -apple-system, BlinkMacSystemFont, "Noto Sans KR", "Roboto", "Segoe UI",
  "Helvetica Neue", "Lucida Grande", Arial, sans-serif !default;
$monospace: Monaco, Consolas, "Lucida Console", monospace !default;

Change Font Size

  • Go to (local project folder)/_sass/_minimal-mistakes/_reset.scss

  • Change font-size: as you want

html {
  /* apply a natural box layout model to all elements */
  box-sizing: border-box;
  background-color: $background-color;
  font-size: 10px;

  @include breakpoint($medium) {
    font-size: 12px;
  }

  @include breakpoint($large) {
    font-size: 14px;
  }

  @include breakpoint($x-large) {
    font-size: 16px;
  }

  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

Reference