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 | |
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 | |
font-serif | font-family: Noto Serif, Droid Serif, Georgia, Cambria, Times New Roman, Times, serif | |
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 | |
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 |