Typography

Font Family

Utilities for sets the native font family and Google Fonts.

Variant

Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited

API

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.

<div class="font-default">
  ...
</div>

HTML

.dummy {
  @extend
    .font-default;
}

SCSS

Set font family to <body> as default.

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

HTML

body {
  @extend
    .font-default;
}

SCSS

Google Fonts

Handpicked font types from Google Fonts.

Google Fonts is not enabled by default. See build full version settings file.

Variant

API

class	css
font-alegreya	font-family: "Alegreya", sans-serif	Text
font-alegreya-sans	font-family: "Alegreya Sans", sans-serif	Text
font-archivo-narrow	font-family: "Archivo Narrow", sans-serif	Text
font-biorhyme	font-family: "BioRhyme", sans-serif	Text
font-cardo	font-family: "Cardo", sans-serif	Text
font-chivo	font-family: "Chivo", sans-serif	Text
font-inconsolata	font-family: "Inconsolata", sans-serif	Text
font-inknut-antiqua	font-family: "Inknut Antiqua", sans-serif	Text
font-karla	font-family: "Karla", sans-serif	Text
font-lato	font-family: "Lato", sans-serif	Text
font-libre-baskerville	font-family: "Libre Baskerville", sans-serif	Text
font-lora	font-family: "Lora", sans-serif	Text
font-manrope	font-family: "Manrope", sans-serif	Text
font-merriweather	font-family: "Merriweather", sans-serif	Text
font-montserrat	font-family: "Montserrat", sans-serif	Text
font-neuton	font-family: "neuton", sans-serif	Text
font-open-sans	font-family: "Open Sans", sans-serif	Text
font-pt-sans	font-family: "PT Sans", sans-serif	Text
font-pt-serif	font-family: "PT Serif", sans-serif	Text
font-playfair-display	font-family: "PlayFair Display", sans-serif	Text
font-poppins	font-family: "Poppins", sans-serif	Text
font-proza-libre	font-family: "Proza Libre", sans-serif	Text
font-raleway	font-family: "Raleway", sans-serif	Text
font-roboto	font-family: "Roboto", sans-serif	Text
font-roboto-slab	font-family: "Roboto Slab", sans-serif	Text
font-rubik	font-family: "Rubik", sans-serif	Text
font-source-sans-pro	font-family: "Source Sans Pro", sans-serif	Text
font-source-serif-pro	font-family: "Source Serif Pro", sans-serif	Text
font-spectral	font-family: "Spectral", sans-serif	Text

class	css
font-noto-sans-hk	font-family: "Noto Sans HK", sans-serif	文本
font-noto-sans-sc	font-family: "Noto Sans SC", sans-serif	文本
font-noto-serif-sc	font-family: "Noto Serif SC", sans-serif	文本
font-zcool-qingke-huangyou	font-family: "ZCOOL Qingke HuangYou", sans-serif	文本
font-zcool-kuaile	font-family: "ZCOOL KuaiLe", sans-serif	文本

class	css
font-noto-serif-jp	font-family: "Noto Serif JP", sans-serif	テキスト
font-m-plus-rounded-1c	font-family: "M Plus Rounded 1c", sans-serif	テキスト
font-kaisei-opti	font-family: "Kaisei Opti", sans-serif	テキスト
font-zen-maru-gothic	font-family: "Zen Maru Gothic", sans-serif	テキスト
font-dela-gothic-one	font-family: "Dela Gothic One", sans-serif	テキスト
font-stick	font-family: "Stick", sans-serif	テキスト

class	css
font-noto-sans-kr	font-family: "Noto Sans KR", sans-serif	본문
font-noto-serif-kr	font-family: "Noto Serif KR", sans-serif	본문
font-black-han-sans	font-family: "Black Han Sans", sans-serif	본문
font-jua	font-family: "Jua", sans-serif	본문
font-do-hyeon	font-family: "Do Hyeon", sans-serif	본문
font-sunflower	font-family: "Sunflower", sans-serif	본문
font-nanum-myeongjo	font-family: "Nanum Myeongjo", sans-serif	본문

Usage

Lorem ipsum, dolor sit amet consectetur adipisicing elit.

Open-Sans

Lorem ipsum, dolor sit amet consectetur adipisicing elit.

BioRhyme

Lorem ipsum, dolor sit amet consectetur adipisicing elit.

Lora

Set Google Fonts type to an element.

<p class="font-lora">
  ...
</p>

HTML

.dummy {
  @extend
    .font-lora;
}

SCSS

Customize Google Fonts

Use WEAVV 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'
)
//...
);

HTML

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

/* @file: `dist/{{ site.smallproductname }}-{{ site.version.framework }}.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");

SCSS

To embed more than one Google Fonts.

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

SCSS