Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(font): refactor and improve performance #353

Merged
merged 12 commits into from
Nov 1, 2022
Merged

feat(font): refactor and improve performance #353

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
eb76649
feat(font): rename font files
MM25Zamanian Oct 31, 2022
fafa726
feat(font): seprate stylesheets
MM25Zamanian Oct 31, 2022
9d071e6
docs(readme): improve
MM25Zamanian Oct 31, 2022
222e014
feat(demo): seprate fonts
MM25Zamanian Oct 31, 2022
d200583
Merge branch 'next' into feat/alwatr-font
MM25Zamanian Oct 31, 2022
4cc356b
chore(font): default font css
MM25Zamanian Oct 31, 2022
c85f579
Merge branch 'next' into feat/alwatr-font
alimd Nov 1, 2022
89a3696
Merge branch 'next' into feat/alwatr-font
alimd Nov 1, 2022
8bf6f7f
doc(font): update docs and readme
alimd Nov 1, 2022
a371bf2
fix(font): review
alimd Nov 1, 2022
9eaa4a0
Merge branch 'feat/alwatr-font' of github.com:AliMD/alwatr into feat/…
alimd Nov 1, 2022
b89217e
feat(demo): improve demo dark mode
alimd Nov 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions demo/font/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,9 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@alwatr/font</title>
<link rel="stylesheet" href="/node_modules/@alwatr/font/font.css" fetchpriority="high" />
<link rel="stylesheet" href="/node_modules/@alwatr/font/vazirmatn.css" fetchpriority="high" />
<link rel="stylesheet" href="/node_modules/@alwatr/font/vazirmatn-roundot.css" fetchpriority="high" />
<link rel="stylesheet" href="/node_modules/@alwatr/font/sahel.css" fetchpriority="high" />

<style>
body {
Expand Down Expand Up @@ -35,7 +37,7 @@
}

.vazirmatn-rd {
alimd marked this conversation as resolved.
Show resolved Hide resolved
font-family: var(--font-vazirmatn-rd), var(--font-system);
font-family: var(--font-vazirmatn-roundot), var(--font-system);
}

.sahel {
Expand Down
72 changes: 70 additions & 2 deletions packages/ui/font/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ Best practices of using persian/arabic web fonts for progressive web application

## How to use

### Vazirmatn

```html
<!DOCTYPE html>
<html lang="fa" dir="rtl">
Expand All @@ -12,11 +14,11 @@ Best practices of using persian/arabic web fonts for progressive web application
<link rel="preconnect" href="https://cdn.jsdelivr.net" />
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@alwatr/font@1.2.3/font.min.css" fetchpriority="high" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@alwatr/font@0.19.0/vazirmatn.min.css" fetchpriority="high" />

<link
rel="preload"
href="https://cdn.jsdelivr.net/npm/@alwatr/font@1.2.3/vazirmatn/vazirmatn[wght].woff2"
href="https://cdn.jsdelivr.net/npm/@alwatr/font@0.19.0/vazirmatn/vazirmatn[wght].woff2"
as="font"
type="font/woff2"
crossorigin
Expand All @@ -35,4 +37,70 @@ Best practices of using persian/arabic web fonts for progressive web application
</html>
```

### Vazirmatn Round Dot

```html
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8" />
<link rel="preconnect" href="https://cdn.jsdelivr.net" />
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@alwatr/[email protected]/vazirmatn-roundot.min.css" fetchpriority="high" />

<link
rel="preload"
href="https://cdn.jsdelivr.net/npm/@alwatr/[email protected]/vazirmatn/vazirmatn-roundot[wght].woff2"
as="font"
type="font/woff2"
crossorigin
/>

<style>
body {
alimd marked this conversation as resolved.
Show resolved Hide resolved
font-family: var(--font-vazirmatn-roundot), var(--font-system);
}
</style>
</head>
<body>
alimd marked this conversation as resolved.
Show resolved Hide resolved
<h1>بِسْمِ اللهِ الرَّحْمنِ الرَّحِیمِ</h1>
<h2>به نام خداوند بخشنده مهربان</h2>
</body>
</html>
```

### Sahel

```html
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8" />
<link rel="preconnect" href="https://cdn.jsdelivr.net" />
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@alwatr/[email protected]/sahel.min.css" fetchpriority="high" />

<link
rel="preload"
href="https://cdn.jsdelivr.net/npm/@alwatr/[email protected]/sahel/sahel[wght].woff2"
as="font"
type="font/woff2"
crossorigin
/>

<style>
body {
font-family: var(--font-sahel), var(--font-system);
}
</style>
</head>
<body>
<h1>بِسْمِ اللهِ الرَّحْمنِ الرَّحِیمِ</h1>
<h2>به نام خداوند بخشنده مهربان</h2>
</body>
</html>
```

[Demo](https://jsbin.com/zucajut/1/edit?html,output)
alimd marked this conversation as resolved.
Show resolved Hide resolved
244 changes: 0 additions & 244 deletions packages/ui/font/font.css
View file
Open in desktop

This file was deleted.

5 changes: 3 additions & 2 deletions packages/ui/font/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,11 @@
"pwa",
"alwatr"
],
"main": "font.css",
"main": "vazirmatn.css",
"author": "S. Ali Mihandoost <[email protected]>",
"contributors": [
"Godgiven <[email protected]>"
"Godgiven <[email protected]>",
"MohammadMahdi Zamanian <[email protected]> (mm25zamanian.ir)"
],
"license": "MIT",
"files": [
Expand Down
Loading