လွၵ်းလၢႆးထီႉ 1 – ၸႂ်ႉ Drupal Theme Libraries
1. ၵႂႃႇတီႈ Drupal theme folder
/themes/custom/your_theme/2. သၢင်ႈဢမ်ႇၼၼ်ၵႄႈ theme libraries file
your_theme.libraries.yml3. ထႅမ် library မႂ်ႇတႃႇၾွၼ်ႉ Shan
YAML
shan-font:
version: 1.x
css:
theme:
https://cdn.jsdelivr.net/gh/ShanFont/ShanFont@main/shan.css: {}4. ႁွင်ႉၸႂ်ႉ library ၼႂ်း your_theme.info.yml ၶွင် theme
YAML
libraries:
- your_theme/shan-fontပိူင်တႅၵ်ႈ
YAML
name: 'Your Theme'
type: theme
core_version_requirement: ^9 || ^10
libraries:
- your_theme/shan-font5. ၸႂ်ႉၾွၼ်ႉ Shan ၼႂ်း CSS ၶွင် theme
ၵႂႃႇတီႈၾႆႇ CSS ၶွင် theme မိူၼ်ၼင်ႇ (global-styling.css ဢမ်ႇၼၼ် style.css)သေ သႂ်ႇထႅဝ်လိၵ်ႈ CSS ပႃႈတႂ်ႈၼႆႉ
CSS
/* Apply Shan Font Globally to All Drupal Elements */
body, html, p, span, div, a, li, ul, ol, h1, h2, h3, h4, h5, h6, blockquote, strong, em, b, i, button, input, textarea, select, label, table, th, td, nav, footer, header, section, article, aside, form, address, figcaption, fieldset, legend, details, summary, .block, .region, .menu, .site-footer, .site-header, .layout-content, .views-row, .node, .page-title, .tabs, .breadcrumb, .pager, .comment, .navbar, .dropdown, .dropdown-menu, .card, .modal, .alert, .badge, .form-control, .input-group, .list-group, .media, .accordion, .sidebar, .main-content, .page-wrapper, .sidebar-first, .sidebar-second, .block-title, .menu-item, .menu-link, .admin-toolbar, .toolbar, .toolbar-menu, .toolbar-icon {
font-family: 'Shan', sans-serif !important;
line-height: 1.6em !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
လွၵ်းလၢႆးထီႉ 2 – သႂ်ႇၾွၼ်ႉ Shan ၼႂ်း html.html.twig ၵမ်းသိုဝ်ႈ (လၢႆးဝႆး)
1. ၵႂႃႇတီႈ template folder ၼႂ်း theme
/themes/custom/your_theme/templates/layout/2. သၢင်ႈဢမ်ႇၼၼ်ၵႂႃႇတီႈၾႆႇ html.html.twing:
/themes/custom/your_theme/templates/layout/html.html.twig3. သႂ်ႇထႅဝ်လိၵ်ႈပႃႈတႂ်ႈၼႆႉၼႂ်းၵႄႈ <head>
HTML
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ShanFont/ShanFont@main/shan.css">ပိူင်တႅၵ်ႈ
HTML
<head>
{{ attach_library('your_theme/global-styling') }}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ShanFont/ShanFont@main/shan.css">
</head>4. ၸႂ်ႉၾွၼ်ႉ Shan ၼႂ်း CSS ၶွင် theme
ၵႂႃႇတီႈၾႆႇ CSS ၶွင် theme မိူၼ်ၼင်ႇ (global-styling.css ဢမ်ႇၼၼ် style.css)သေ သႂ်ႇထႅဝ်လိၵ်ႈ CSS ပႃႈတႂ်ႈၼႆႉ
CSS
/* Apply Shan Font Globally to All Drupal Elements */
body, html, p, span, div, a, li, ul, ol, h1, h2, h3, h4, h5, h6, blockquote, strong, em, b, i, button, input, textarea, select, label, table, th, td, nav, footer, header, section, article, aside, form, address, figcaption, fieldset, legend, details, summary, .block, .region, .menu, .site-footer, .site-header, .layout-content, .views-row, .node, .page-title, .tabs, .breadcrumb, .pager, .comment, .navbar, .dropdown, .dropdown-menu, .card, .modal, .alert, .badge, .form-control, .input-group, .list-group, .media, .accordion, .sidebar, .main-content, .page-wrapper, .sidebar-first, .sidebar-second, .block-title, .menu-item, .menu-link, .admin-toolbar, .toolbar, .toolbar-menu, .toolbar-icon {
font-family: 'Shan', sans-serif !important;
line-height: 1.6em !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
တၢင်းၼႃၾွၼ်ႉ
| Font Style | CSS Settings |
|---|---|
| Shan Thin | font-weight: 100; |
| Shan Thin Italic | font-weight: 100; font-style: italic; |
| Shan Regular | font-weight: 400; |
| Shan Regular Italic | font-weight: 400; font-style: italic; |
| Shan Bold | font-weight: 700; |
| Shan Bold Italic | font-weight: 700; font-style: italic; |
| Shan Black | font-weight: 900; |
| Shan Black Italic | font-weight: 900; font-style: italic; |
မၢႆတွင်း
- ႁႂ်ႈ clear ပႅတ်ႈ Drupal cache ဝၢႆးသေသႂ်ႇၾွၼ်ႉ Shan ယဝ်ႉ
Configuration → Development → Performance → Clear All Caches