Step 1: Download ၾႆႇ Shan Font
Download လႆႈတီႈ official GitHub repository: Download Shan Font Releases
ဝၢႆးသေ Download ယဝ်ႉႁႂ်ႈၵီႈ (extract) zip ၾႆႇသေတေလႆႈမႃး
- Shan-Thin.woff2
- Shan-ThinItalic.woff2
- Shan-Regular.woff2
- Shan-RegularItalic.woff2
- Shan-Bold.woff2
- Shan-BoldItalic.woff2
- Shan-Black.woff2
- Shan-BlackItalic.woff2
Step 2: Upload ၾႆႇၶိုၼ်ႈၼႂ်း hosting မိူၼ်ၼင်ႇ
HTTP
/your-website/fonts/ပၼ်ႁႅင်းႁႂ်ႈသၢင်ႈ Folder မႂ်ႇၸိုဝ်ႈ ‘fonts’သေဢဝ်ၾွၼ်ႉတၢင်းမူတ်းၵႂႃႇသႂ်ႇၼႂ်းမၼ်း
ဝၢႆးသေ upload ယဝ်ႉထတ်းတူၺ်းဝႃႈၸွင်ႇႁၼ်ၾွၼ်ႉ မိူၼ်ၼင်ႇ
CSS
https://(ၸိုဝ်ႈဝႅပ်ႉ).com/fonts/Shan-Regular.woff2Step 3: ၸႂ်ႉၾွၼ်ႉၼႂ်းၾႆႇ CSS
CSS
@font-face {
font-family: 'Shan';
src: url('/fonts/Shan-Thin.woff2') format('woff2');
font-weight: 100;
font-style: normal;
}
@font-face {
font-family: 'Shan';
src: url('/fonts/Shan-ThinItalic.woff2') format('woff2');
font-weight: 100;
font-style: italic;
}
@font-face {
font-family: 'Shan';
src: url('/fonts/Shan-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Shan';
src: url('/fonts/Shan-RegularItalic.woff2') format('woff2');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'Shan';
src: url('/fonts/Shan-Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Shan';
src: url('/fonts/Shan-BoldItalic.woff2') format('woff2');
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: 'Shan';
src: url('/fonts/Shan-Black.woff2') format('woff2');
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: 'Shan';
src: url('/fonts/Shan-BlackItalic.woff2') format('woff2');
font-weight: 900;
font-style: italic;
}မၢႆတွင်း – ၼႂ်း url( ) ၼၼ်ႉႁဵတ်းႁႂ်ႈတီႈယူႇၾႆႇၶွင်ၾွၼ်ႉမၼ်းထုၵ်ႇမႅတ်ႈ
Step 4: ၸႂ်ႉၾွၼ်ႉၼႂ်းၾႆႇ CSS
CSS
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, main, figure, caption, .navbar, .dropdown, .dropdown-menu, .card, .modal, .alert, .badge, .form-control, .input-group, .list-group, .media, .accordion, .sidebar, .page-header, .page-footer, .site-footer, .site-header, .menu, .content, .wrapper, .hero, .header, .footer, .navigation, .main-menu, .sub-menu, .breadcrumb {
font-family: 'Shan', sans-serif !important;
line-height: 1.6em !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}Step 4: ၸႂ်ႉၾွၼ်ႉၼႂ်းၾႆႇ CSS
| 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; |
မၢႆတွင်း
ပၼ်ႁႅင်းႁႂ်ႈၸႂ်ႉ .woff2 ပုၼ်ႈတႃႇႁႂ်ႈၾွၼ်ႉႁဵတ်းၵၢၼ်ဝႆးလႄႈၵမ်ႉထႅမ် modern browsers