Typography

Font Family

Utilities for sets the font family.

Class

class	css
font-default	font-family: -apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Helvetica Neue, sans-serif	Text
font-sans	font-family: -apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Fira Sans, Ubuntu, Oxygen, Oxygen Sans, Cantarell, Droid Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Lucida Grande, Helvetica, Arial, sans-serif	Text
font-serif	font-family: Noto Serif, Droid Serif, Georgia, Cambria, Times New Roman, Times, serif	Text
font-mono	font-family: SF Mono, Consolas, Roboto Mono, Noto Mono, Droid Mono, Fira Mono, Ubuntu Mono, Oxygen Mono, Lucida Console, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace	Text
font-arabic	font-family: Arabic UI Display, Geeza Pro, Simplified Arabic, -apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Fira Sans, Ubuntu, Oxygen, Oxygen Sans, Cantarell, Droid Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Lucida Grande, Helvetica, Arial, sans-serif	نص
font-japanese	font-family: Meiryo, Yu Gothic, Hiragino Kaku Gothic Pro, Hiragino Sans, -apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Fira Sans, Ubuntu, Oxygen, Oxygen Sans, Cantarell, Droid Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Lucida Grande, Helvetica, Arial, sans-serif	テキスト
font-korean	font-family: Malgun Gothic, Apple SD Gothic Neo, -apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Fira Sans, Ubuntu, Oxygen, Oxygen Sans, Cantarell, Droid Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Lucida Grande, Helvetica, Arial, sans-serif	본문
font-thai	font-family: Leelawadee, Thonburi, -apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Fira Sans, Ubuntu, Oxygen, Oxygen Sans, Cantarell, Droid Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Lucida Grande, Helvetica, Arial, sans-serif	ข้อความ
font-chinese	font-family: Microsoft Yahei, PingFang SC, PingFang TC, Hiragino Sans, Hiragino Kaku Gothic Pro, -apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Fira Sans, Ubuntu, Oxygen, Oxygen Sans, Cantarell, Droid Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Lucida Grande, Helvetica, Arial, sans-serif	文本

Usage

Set font family to an specific element.

<!-- Example -->
<y class="font-default">
  ...
</y>

Set font family to <body> as default.

<!-- Example -->
<body class="font-default">
  ...
</body>

Customize More

// @file: `src/_plugins.scss`
@include plugin(
  (
    utility: 'font',
    //variant: 'responsive',
    property: 'font-family',
    modifier: (
      '...': '...',
      '...': '...'
      ...
    )
  )
)

Google Fonts v1.1.0

Embed Google Fonts

Use Yogurt dedicated API to embedding the Google Fonts in the framework without manually adding the line @import url(...).

// @file: `src/_plugins.scss`
@include google-fonts(
  (
    font: 'Alata',
    weight: '400;500;800'
  )
)

The generated code look like below in your Yogurt CSS final build.

/* @file: `dist/yogurt-1.1.3_solidcore.css` */
@import url("https://fonts.googleapis.com/css2?family=Alata&:wght@400;500;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto&:wght@400;500&display=swap");

To embed more than one Google Fonts.

// @file: `src/_plugins.scss`
@include google-fonts(
  (
    font: 'Alata',
    weight: '400;500;800'
  ),
  (
    font: 'Lato',
    weight: '400;500'
  )
)

After the embedding, you can create new utility by using the Plugin API.

// @file: `src/_plugins.scss`
@include google-fonts(
  (
    font: 'Alata',
    weight: '400;500;800'
  ),
  (
    font: 'Lato',
    weight: '400;500'
  )
  // ...
)

@include plugin(
  (
    utility: 'font',
    //variant: 'responsive',
    property: 'font-family',
    modifier: (
      'alata': '"Alata", sans-serif',
      'lato': '"Lato", sans-serif'
    )
    // ...
  )
)

Variant

Variant	Enabled	Responsive
Default	Yes
Dark Theme
hover
group-hover
focus
focus-within
active
visited
checked
disabled