Typography

Font Family

Utilities for sets the font family.


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>

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

VariantEnabledResponsive
DefaultYes
Dark Theme
hover
group-hover
focus
focus-within
active
visited
checked
disabled