ما به شما کمک می‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌کنیم تا با استفاده از روش‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌های استاندارد نوشتاری، وب‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌سایت خود را کنترل نمایید

یک مرورگر وب مدرن

ما تا به حال از Chrome استفاده می‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌کردیم اما نکته جالب Web Open Font Format اینجاست که با همه مرورگرها کار می‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌کند. 
یکی از بزرگترین انتقاداتی که به نخستین HTML وارد بود، پشتیبانی ضعیف آن از فونت‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌های قابل‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌سفارشی‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌سازی بود. اما دیگر نیازی به انتقاد نیست چراکه هم‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌اکنون استانداری وجود دارد که در سطح وسیعی مورد استفاده قرار می‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌گیرد. ما می‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌خواهیم این وضعیت را تغییر دهیم و از همین حالا نیز شروع می‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌کنیم. 
با وجود طرح‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌بندی‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌های CSS مبتنی بر شبکه و فونت‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌های وبی موجود، اکثر مباحث طراحی وب بیشتر از پیش، حول جام مقدس پرینت می‌گردد و با فراگیر شدن PCهای تبلت و به‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌دنبال آن افزایش مطالعات آنلاین، این روند برای تمامی طراحان و فعالان این عرصه مسئله جدی و غیرقابل اغماض است. 
پروتکل ما بسیار ساده است: استفاده از تعداد خطوط  اندکی از کد CSS در مجموعه تعاریف مستند شما. اما مشکل از آنجایی شروع می‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌شود که می‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌خواهید از فرمت‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌های فونتی استفاده کنید که با تمامی مرورگرها سازگار باشد. ما ابتدا کار را با گروهی از فونت‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌هایی که شما قادر به استفاده از آنها هستید شروع می‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌کنیم، سپس نحوه پیاده‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌سازی فونت‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌های وبی کم‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌دردسرتر را به شما نشان می‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌دهیم.

سلام بر @font-face

@font-face به‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌عنوان نخستین مشخصه‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌ای که برای CSS2 معرفی شد، یکی از کلیدهای اصلی در مبحث Embed کردن (Embedding) فونت‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌ها بشمار می‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌آید. این مشخصه به شما اجازه می‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌دهد تا فونت‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌هایی که در سرور ذخیره‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌ شده‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌اند را در یک صفحه وب Embed کرده و در زمان موردنظر خود بطور پویا دانلود نمایید. همچنین پیاده‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌سازی آن نیز همانند سایر ID یا CSS Classها آسان می‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌باشد. 
اگرچه عملیاتی کردن آن به‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌کندی صورت می‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌گیرد اما بالاخره با انتشار نسخه Internet Explorer 9، ابزاری سازگار با پلت‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌فرم‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌های مختلف به بازار عرضه شد. مشکل ما عدم پشتیبانی از مشخصه @font-face نبود چراکه این مشکل برای نسخه‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌های Internet Explorer 5 به بعد رفع شده بود. مسئله اصلی سازگاری با فرمت‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌های فونتی است. نگران نباشید چراکه ما سرانجام به مرحله‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌ای دست یافته‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌ایم که پشتیبانی از اکثر مرورگرها به‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌آسانی امکانپذیر شده است. البته کار در همین جا به پایان نمی‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌رسد و هنوز باید برخی از ملاحظات را درنظر بگیریم.

اخطار درباره سازگاری با مرورگرهای مختلف 

مشکلی که همچنان گریبانگیر ماست، پشتیبانی اکثر مرورگرها از فرمت‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌های فونتی مختلف در کنار پشتیبانی از @font-face است. چیزی که اغلب مسئله‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌ساز است اینست که Internet Explorer فرمت EOT (یا Embedded Open Type) مخصوص به خود را دارد. البته دراین‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌رابطه ماکروسافت سعی کرد تا برای محافظت از فونت‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌ها در آن فرمت و رفع مشکل کپی‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌رایت فونت، از DRM  استفاده کند. 
شما به‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌منظور بستن فونت‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌ها در فرمت EOT، به یک ابزار Web Embedding Fonts و یا WEFT (www.microsoft.com/typography/WEFT.mspx) نیاز دارید. این ابزار مجموعه‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌ای از فایل‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌های ورودی فونت که می‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌توانند در یک صفحه وب Embed شوند را تولید می‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌کند. همچنین اکثر استانداردهای فرمت فونت را می‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌پذیرند و اگر فونتی برای عملیات Embedding قابل تبدیل نباشند، این موضوع را به شما اطلاع می‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌دهد. همچنین مجموعه‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌ای که ایجاد کرده‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌اید تنها برای استفاده در سایت منتخب شما مناسب است. اما هنوز هم مشکل اصلی اینجاست که EOT از هیچ مرورگر دیگری پشتیبانی نمی‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌کند و Explorer نیز برای مدت زمان طولانی تنها از همین فرمت پشتیبانی می‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌کرد. 
با آمدن Internet Explorer 9 و سازگاری این مرورگر با WOFF یا Web open Font Format این شرایط تغییر کرد. WOFF در سال 2009 توسعه یافت و به‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌سرعت مورد توجه توسعه‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌دهندگان مرورگر قرار گرفت و به دلیل پشتیبانی از فرمت‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌ جدیدترین نسخه‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌های مرورگرهایی مانند Chrome، Opera و Firefox جایگاه خود را میان آنها به‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌خوبی پیدا کرد. پشتیبانی از Safari نیز همزمان به انتشار OS X Lion و نسخه بعدی سیستم عامل Mac آغاز گردید. WOFF به لطف این پشتیبانی‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌ها در سطحی وسیع، عملا در جنگ فرمت فونتی آنلاین برنده اعلام شد. 
WOFF نیز همانند EOT به‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌جای یک فرمت، یک پکیج بوده و برای اضافه کردن فونت‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌های استاندارد به WOFF به یک ابزار تبدیل نیاز دارید. ما به دنبال سرویس‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌های آنلاینی هستیم که این کار را برای شما انجام دهند. اما پیش از پرداختن به آن، باید بدانید که یک ابزار استاندارد Command Line با نام sft2woff وجود دارد که می‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌توانید آن را از آدرس http://people.mozilla.org/~jkew/woff دانلود نمایید. 

TrueType

هرچند که WOFF بطور گسترده‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌ای توسط مرورگرهای مختلفی پشتیبانی می‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌شود اما از آنجا که این استاندارد اغلب برای Chrome، Firefox (تا 3.5) و Safari مورد استفاده قرار می‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌گیرد، بهتر است به معرفی دو فرمت دیگر نیز بپردازیم. TrueType برای همگان فرمتی آشنا بوده و اکثر فونت‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌های کامپیوتر شما در آن رمزگشایی شده‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌اند. TrueType همواره در دسترس بوده، توسط ویندوز و Mac پشتیبانی می‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌شود و دارای فونت‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌های رایگان زیادی است. بنابراین قرار دادن TrueType به‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌عنوان استاندارد Embedding پیش‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌فرض، منطقی به‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌نظر می‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌رسد. البته به‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌علت برخی مسائل مربوط به کپی‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌رایت، پشتیبانی صنعت از آن در وب با محدودیت‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌هایی مواجه شده است. 
مشکلات کپی‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌رایت در مورد WOFF از EOT ماکروسافت بیشتر است. نخست آنکه فایل‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌های WOFF دارای متادیتاهایی هستند که معرف فونت سورس می‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌باشند. متاسفانه این داده‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌ها قابل جستجو و دستکاری هستند و این محدودیت می‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌تواند از یک درب بسته نیز بازدارنده‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌تر باشد. دوم آنکه فایل‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌های WOFF تنها در مرورگرهای وب قابل نمایش هستند و شما نمی‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌توانید آنها را بصورت محلی نصب کنید و این تمایز نیز اندکی قابل تأمل است. 

مولد کد

درحالیکه استاندارد WOFF بطور گسترده‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌ای مورد استفاده قرار می‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌گیرد، ما همچنان برای کار با پلت‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌فرم‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌های مختلف، در دوره انتقال بسر می‌بریم. فرض کنید که شما ملزم باشید تا فرمت‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌های فونتی چندگانه خود را آماده و آپلود کنید، سپس آنها را در کد Embed نمایید. خوب مسلما این کار، یک مرحله واهی و ناکارآمد است اما شما چاره‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌ای جز این ندارید و این همان جایی است که Font Squirrel's @font-face Generator خود را نشان می‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌دهد (www.fontsquirrel.com/fontface/generator). این ابزار ساده مجموعه‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌ حاضر و آماده‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌ای از فونت‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌ها، TrueType و OpenType را بصورت رایگان برای آپلود در اختیارتان قرار می‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌دهد و سپس آنها را برای شما پردازش می‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌کند. به‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌محض‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌ اینکه فونت تغییر داده شده، این ابزار بخش کوچکی ازکد CSS را تولید می‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌نماید: 
تا بدینجا منابع فرمت‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌های فونی EOT، WOFF و OpenType معرفی شده‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌اند و دریافتید مرورگر شما می‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌تواند بسته به اینکه از کدامیک از این فرمت‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌ها پشتیبانی می‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌کند، از یکی از آنها استفاده کند. 
شما همچنین می‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌توانید با استفاده از خانواده فونت‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌های مشخصه CSS، استایل کلاس‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌ موردنظر خود را مشخص کرده سپس فونت موردنظر خود را نام‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌گذاری نمایید. مانند این مثال: 
body {font-family:"familyname",arial,serif;}

فونت‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌های وبی گوگل

مولد فونت Squirrel، مولدی سودمند و انعطاف‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌پذیر است. اما اگر کاربری آسان و اُپن‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌سورس بودن برای شما پارامترهای مهمی باشند، باید بگوییم که گوگل نیز یک راه‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌حل پیشنهاد می‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌کند. این سرویس گوگل دارای صدها فونت وبی است که به‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌راحتی می‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌توانید مورد دلخواه خود را انتخاب کنید. برای شروع سری به آدرس www.google.com/webfonts بزنید و مجموعه آن را جستجو کنید. می‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌توانید فونت‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌ها را بر اساس سبک حروف موردنظر خودتان فیلتر کنید تا برای مثال تنها سبک‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌های Serif، San-Serif و یا فونت‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌های خطی قابل مشاهده باشند.
استفاده از این فونت‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌ها آسان است. ابتدا روی پیش‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌نمایش فونت موردنظر خود کلیک کرده، سپس "Use this font" را انتخاب کنید. ممکن است برای header مستند خود و برای اشاره به مجموعه تعاریف تولیدشده پویا، به اندکی کد نویسی نیاز داشته باشید. شبیه به این مثال: 
<link href="http://fonts.googleapis.com/css?family=Meddon"
rel="stylesheet"type="text/css">
در این بخش یک @font-face را توسط CSS و به همراه لینک‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌های Embed شده در گروهی از فایل‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌های فونتی پیاده‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌سازی کردیم.
با وجود این دو سرویس و پشتیبانی مرورگرها از فونت‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌های وبی، بهتر از هر زمان دیگر، از حالا به بعد نیازی به تحمل فونت‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌های نازیبا و استانداردهای نوشتاری ضعیف در وب نیستید.