ڊولپر گائيڊ

ويب سائيٽ تي فونٽ ڪيئن لڳائجي؟

هي گائيڊ توھان کي سيکاريندو تہ سنڌي فونٽ کي پنهنجي ويب سائيٽ ۾ ڪيئن شامل ڪجي — فونٽ چونڊڻ کان وٺي CSS لکڻ تائين.

جائزو فارميٽس فونٽ چونڊيو CSS فريم ورڪس ڪارڪردگي ٽيسٽ

مختصر جائزو

1 ⬇️

ڊائونلوڊ

فونٽ پيڪيج حاصل ڪريو

2 📁

اپلوڊ

فائلون پروجيڪٽ ۾ رکو

3 ✏️

شامل ڪريو

@font-face CSS لکو

4 🎉

لاڳو ڪريو

font-family استعمال ڪريو

فونٽ فارميٽس جي وضاحت

هر فارميٽ جو مقصد مختلف آهي. صحيح فارميٽ صحيح ترتيب سان استعمال ڪريو.

فارميٽ	سپورٽ	ترجيح	نوٽ
.woff2	97%+	⭐ ضروري	سڀ کان ننڍي سائيز. پھرين استعمال ڪريو.
.woff	98%+	تجويز ٿيل	پراڻن برائوزرن لاءِ فال بيڪ.
.ttf	99%+	اختياري	ڊيسڪ ٽاپ فارميٽ، ويب تي وڏو سائيز.
.otf	99%+	اختياري	ڊيسڪ ٽاپ لاءِ، ويب تي گهٽ مناسب.

💡 صلاح: پھرين woff2، پوءِ woff رکو. اهو 98%+ برائوزرن کي ڍڪيندو.

فونٽ چونڊيو

هيٺ ڏنل فھرست مان پنهنجو پسنديده فونٽ چونڊيو. CSS ۽ ٽيسٽ سيڪشن پاڻمرادو اپڊيٽ ٿي ويندا.

ڪو بہ فونٽ نه مليو.

خودڪار CSS

هي CSS فائل پنهنجي پروجيڪٽ ۾ sindhi.css نالي سان محفوظ ڪريو. اها فونٽ لوڊ ڪري ۽ body تي ڊفالٽ لاڳو ڪري.

sindhi.css

🧭

سنڌي ساڄي کان کاٻي (RTL) ٻولي آهي

جتي بہ سنڌي متن هجي اتي direction: rtl ۽ unicode-bidi: embed لازمي لکو. HTML عنصر تي dir="rtl" شامل ڪريو.

فريم ورڪ گائيڊ

<!-- <head> ۾ شامل ڪريو -->
<link rel="preload" href="/fonts/YourSindhiFont-Regular.woff2"
      as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="/css/sindhi.css">

<!-- استعمال -->
<p class="sindhi-text" dir="rtl">
  سنڌي فونٽ لائبريري تي ڀليڪار
</p>

{{-- resources/views/layouts/app.blade.php --}}
<link rel="preload"
      href="{{ asset('fonts/YourSindhiFont-Regular.woff2') }}"
      as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="{{ asset('css/sindhi.css') }}">

{{-- ڪنهن بہ Blade view ۾ --}}
<p class="sindhi-text" dir="rtl">{{ $sindhiText }}</p>

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sindhi: ['YourSindhiFont', 'Traditional Arabic', 'serif'],
      },
    },
  },
}

// app.css
@font-face {
  font-family: 'YourSindhiFont';
  src: url('/fonts/YourSindhiFont-Regular.woff2') format('woff2');
  font-display: swap;
}

// HTML ۾
<p class="font-sindhi" dir="rtl">سنڌي متن ھتي</p>

// app/fonts.ts
import localFont from 'next/font/local'

export const sindhiFont = localFont({
  src: [
    { path: '../public/fonts/YourSindhiFont-Regular.woff2', weight: '400' },
    { path: '../public/fonts/YourSindhiFont-Bold.woff2',    weight: '700' },
  ],
  variable: '--font-sindhi',
  display:  'swap',
})

// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html lang="sd" dir="rtl" className={sindhiFont.variable}>
      <body>{children}</body>
    </html>
  )
}

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      link: [{
        rel: 'preload',
        href: '/fonts/YourSindhiFont-Regular.woff2',
        as: 'font', type: 'font/woff2', crossorigin: '',
      }],
    },
  },
  css: ['~/assets/css/sindhi.css'],
})

// functions.php
function theme_enqueue_sindhi_font() {
    wp_enqueue_style(
        'sindhi-font',
        get_template_directory_uri() . '/fonts/sindhi.css',
        [], '1.0.0'
    );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_sindhi_font' );

ڪارڪردگي جون صلاحون

⚡

ضروري فونٽ اڳ لوڊ ڪريو

preload link tag شامل ڪريو تہ برائوزر رينڊرنگ کان اڳ فونٽ فائل وٺي آئي. اهو اڻ اسٽائيل متن جي چمڪ ختم ڪري ٿو.

🎯

font-display: swap استعمال ڪريو

فوري طور فال بيڪ فونٽ ڏيکاري ٿو. جڏهن ويب فونٽ لوڊ ٿئي تہ مٽائي ٿو. استعمالڪار فوري متن پڙهي سگهن ٿا.

✂️

فونٽ کي سب سيٽ ڪريو

لاطيني اکر ۽ غير ضروري حرف هٽايو. سنڌي متن لاءِ صرف عربي اسڪرپٽ بلاڪ ۽ ڪجهه اوقاف جون نشانيون ڪافي آهن.

📦

گزپ / بروٽلي فعال ڪريو

WOFF2 اندران ئي Brotli-compressed آهي، پر سرور تي HTTP compression headers پڻ فعال ڪريو.

🚫

غير ضروري وزن لوڊ نه ڪريو

هر @font-face بلاڪ ھڪ نيٽ ورڪ درخواست آهي. صرف اهي وزن لکو جيڪي توھان جو ڊزائن واقعي استعمال ڪري ٿو.

🚫

CSS اندر @import نه ڪريو

CSS فائل پارس ٿيڻ تائين @import رينڊرنگ روڪي ٿو. ان بدران HTML ۾ link tag يا bundler استعمال ڪريو.

سِڌو سنؤن ڏيکُ

مٿي چونڊيل فونٽ ھتي لوڊ ٿيندو. متن تبديل ڪريو ۽ فوري ميٽيل ڏسو.

سائيز: px

نمونو متن

ٻيا فونٽ ڏسڻ چاھيو ٿا؟

مُکيہ صفحي تي وڃو، اُتان ڪوبہ فونٽ چونڊي اُن جو نمونو ڏِسو ۽ ھڪ ڪلڪ ۾ ڊائونلوڊ ڪريو.

فونٽ ڏسو ←