Press/to search

Typography

Font Family

Utilities for sets the font family and Google Fonts.

Class

classcss
font-defaultfont-family: -apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Helvetica Neue, sans-serifText
font-sansfont-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-serifText
font-seriffont-family: Noto Serif, Droid Serif, Georgia, Cambria, Times New Roman, Times, serifText
font-monofont-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, monospaceText
font-arabicfont-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-japanesefont-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-koreanfont-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-thaifont-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-chinesefont-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>

Customization

Read more information about using the Plugin API, and Responsive or Pseudo-Class Variants configuration with the Plugin API.

// Add Values
@include yogurt(
  $class: 'font',
  $property: font-family,
  $modifier: (
    noto: Noto Serif,
    droid: Droid Serif
    //...
  )
);

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(...);.

@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.5_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.

@include google-fonts(
  (
    font: 'Alata',
    weight: '400;500;800'
  ),
  (
    font: 'Lato',
    weight: '400;500'
  )
);

Variant

ResponsiveDark ModeLight ModeReduce-MotionPortraitLandscapeHoverGroup-HoverFocusGroup-FocusFocus-VisibleFocus-WithinActiveVisitedCheckedDisabled

Default enabled variants. Read more information about the Responsive and Pseudo-Class Variants.