Alwatr
Replies: 15 comments 13 replies
-
|
The best arabic/persian fonts I know. |
Beta Was this translation helpful? Give feedback.
-
|
Khafan Collections |
Beta Was this translation helpful? Give feedback.
-
|
Best practice for font usage Define all fonts in single css file like this and use @font-face {
font-family: "roboto";
font-style: normal;
font-weight: 100;
src: local("roboto thin"), local("roboto-thin"), url("roboto-v2.1/roboto-thin.woff") format("woff");
font-display: block;
}
@font-face {
font-family: "roboto";
font-style: normal;
font-weight: 300;
src: local("roboto light"), local("roboto-light"), url("roboto-v2.1/roboto-light.woff") format("woff");
font-display: block;
}
@font-face {
font-family: "roboto";
font-style: normal;
font-weight: 400;
src: local("roboto regular"), local("roboto-regular"), url("roboto-v2.1/roboto-regular.woff") format("woff");
font-display: block;
}Use this trick to link the external css file to prevent render blocking <link rel="preload" href="https://cdn.jsdelivr.net/npm/@alwatr/[email protected]/font.css" as="style" crossorigin />
<link rel="preload" href="https://cdn.jsdelivr.net/npm/@alwatr/[email protected]/fonts/roboto/roboto-thin.woff" as="font" type="font/woff" crossorigin />
<link rel="preload" href="https://cdn.jsdelivr.net/npm/@alwatr/[email protected]/fonts/..." as="font" type="font/woff" crossorigin />
...
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@alwatr/[email protected]/font.css" media="print" onload="this.onload=null; this.media='all'"/>Use default fonts in body in index.html root (not sperate css file) body {
font-family: "roboto", "iranyekan", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
transform: translateZ(0);
text-rendering: optimizeLegibility;
word-wrap: break-word;
text-size-adjust: none;
} |
Beta Was this translation helpful? Give feedback.
-
|
Base on MDN FAQ about prefetching and MDN link type preload I think prefetch is wrong for fonts because:
|
Beta Was this translation helpful? Give feedback.
-
<link rel="preload" href="fonts/mywebfont.woff2" as="font" type="font/woff2" crossorigin> |
Beta Was this translation helpful? Give feedback.
-
|
https://bundlers.tooling.report/non-js-resources/html/preload-assets/ |
Beta Was this translation helpful? Give feedback.
-
|
این که خوده رستگار این کار رو کرده خیلی جالبه کاش همشون اینجوری بودن <link href="https://cdn.jsdelivr.net/gh/rastikerdar/[email protected]/Vazirmatn-font-face.css" rel="stylesheet" type="text/css" />body {
font-family: Vazirmatn, sans-serif;
} |
Beta Was this translation helpful? Give feedback.
-
|
سوال کلیدی: Woff vs Woff2 |
Beta Was this translation helpful? Give feedback.
-
|
Test on Vazirmatn Convert to woff by https://github.com/fontello/ttf2woff#usage Result: du -hd1
280K ./variable
740K ./woff2
792K ./woff
1.4M ./ttf |
Beta Was this translation helpful? Give feedback.
-
|
قطعا در آینده نه چندان دور همه به سمت variable فونت ها روی میارن.. همونطور که الان چندین فونت معروف فارسی دارن نسخه variable رو ریلیز می‌کنند. |
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
|
دمش گرم! رفت تو گوگل |
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
|
Arabic/Persian unicode range |
Beta Was this translation helpful? Give feedback.
-
|
My choose :root {
--alwatr-font: "Vazirmatn",
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
"Roboto",
"Oxygen",
"Ubuntu",
"Cantarell",
"Open Sans",
"Helvetica Neue",
"Arial",
sans-serif,
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol";
} |
Beta Was this translation helpful? Give feedback.
-
|
از کجا باید فایل های مختلف "فونت وِیت ۱۰۰-۹۰۰" برای هر فونت رو پیدا کنم؟ |
Beta Was this translation helpful? Give feedback.
-
|
Beta Was this translation helpful? Give feedback.
-
|
از سورس هر پروژه |
Beta Was this translation helpful? Give feedback.
-
|
https://fontserver.ir/ |
Beta Was this translation helpful? Give feedback.
-
|
چرا بیسوادی همه گیر شده! |
Beta Was this translation helpful? Give feedback.
-
|
ممنون میشم نظرتون رو بگین @alimd |
Beta Was this translation helpful? Give feedback.
-
|
کاربرد.local هم نفهمیدم |
Beta Was this translation helpful? Give feedback.
-
|
اگر روی سیستمت نصب باشه فونت دیگه دانلودش نمیکنه با همون اسم دنبالش میگرده پیدا کنه از همون نسخه روی سیستمت استفاده میکنه |
Beta Was this translation helpful? Give feedback.
-
|
عه چه خوب ممنون |
Beta Was this translation helpful? Give feedback.
-
Make font storage over CDN with CSS usage best practices
Somting like http://alimd.github.io/1fonts/demo/
Beta Was this translation helpful? Give feedback.
All reactions