فونت ها نقش مهمی در طراحی سایت دارند. متن مشابهی که با فونت های مختلف نوشته شده است می تواند تأثیرات متضادی بر روی یک فرد ایجاد کند.

خودت ببین:

برخی از فونت ها قانع کننده تر به نظر می رسند، برخی دیگر جذاب تر.

اما چگونه می توان هر فونتی را به سایت متصل کرد و در هر کجا که می خواهید اعمال کرد؟

در این مقاله من من 3 راه را به شما نشان خواهم داد، که با آن می توانید هر نوع، متنوع ترین و غیر استانداردترین فونت ها را به سایت خود متصل کنید. و مهم نیست که از کدام CMS استفاده می کنید: وردپرس، جوملا، دروپال یا سبد باز.

خواهید دید که هیچ چیز پیچیده ای در اتصال فونت ها به سایت وجود ندارد.

یاد خواهید گرفت:

روش شماره 1. اتصال سریع فونت ها به سایت وردپرس (مشکل: ⭐ ⭐ ⭐)

اگر یک تم ممتاز در سایت شما نصب شده باشد، می توانید فونت ها را در 2 دقیقه به هم متصل کنید.

برای مثال:

شما می خواهید فونت عنوان مقاله خود را تغییر دهید. برای این:

1. در پنل مدیریت، به قسمت گزینه های تم بروید. بسته به الگوی شما، این بخش ممکن است کمی متفاوت خوانده شود، اما معنی همیشه یکسان است - "تنظیمات تم".

2. به قسمت تایپوگرافی بروید.

3. عنصری را که می خواهید فونت آن را تغییر دهید (عناوین، پاراگراف ها) انتخاب کنید:

اگر سایت شما روی موتور دیگری اجرا می شود یا تم شما چنین تنظیماتی را ارائه نمی دهد، به روش بعدی بروید.

روش شماره 2. از قدرت فونت های گوگل استفاده کنید
(مشکل: ⭐ ⭐ ⭐ ⭐)

آیا تا به حال نام فونت گوگل را شنیده اید؟ به طور خلاصه، این سرویسی است که با آن می توانید بیش از 700 فونت را به سایت خود متصل کنید.

مرحله 1. به وب سایت رسمی سرویس بروید.

مرحله 2. فونت های مناسب خود را در مجموعه فونت های Google پیدا کنید. در منوی سمت راست، می توانید دایره را با تنظیم زبان، سبک و محبوبیت فونت محدود کنید:

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

مرحله 3 بیایید بگوییم که فونت Roboto را دوست دارید. روی نماد "+" کلیک کنید:

با کلیک بر روی علامت "+" می توانید هر قلمی را اضافه کنید.

مرحله 4. پس از آن، باید سبد را با فونت های انتخاب شده گسترش دهید:

با رفتن به تب Customize می توانید سبک ها و زبان ها را انتخاب کنید. در مورد سبک ها، من به شما توصیه می کنم یک مجموعه استاندارد را انتخاب کنید - معمولی (400)، ایتالیک (400 مورب)، پررنگ (700) و ایتالیک-پررنگ (پررنگ 700 ایتالیک):

اما اگر فقط پررنگ (برای سرفصل‌ها) می‌خواهید، فقط آن را انتخاب کنید.

به یاد داشته باشید، هر چه سبک های بیشتری را انتخاب کنید، حجم فایل آپلود شده بزرگتر خواهد بود.

برای اینکه سرعت بارگذاری سایت کاهش نیابد، تا حد امکان سبک فونت کمتری را انتخاب کنید.

مرحله 5. به بخش Embed برگردید و تب @IMPORT را انتخاب کنید. در مرحله بعد، خط کد حاوی "@import" را کپی کنید و آن را در خط اول فایل CSS سایت خود قرار دهید:

اگر یک سایت وردپرس دارید، فایل CSS به احتمال زیاد در اینجا قرار دارد: wp_content/themes/"Yourtheme"/css/...در پوشه CSS، به احتمال زیاد یک فایل فونت وجود خواهد داشت که باید کد جاسازی شده را از Google منتقل کنید:

مهم نیست که سایت شما بر روی چه CMS اجرا می شود، فقط کد را در آن قرار دهید و همه چیز درست می شود 👌

از آنجایی که ابتدا فونت ها باید بارگذاری شوند، فقط پس از آن همه چیز دیگر - کد اتصال فونت را در همان ابتدای فایل CSS قرار دهید.

می توانید فونت را برای عناصر خاصی از سایت در همان فایل CSS تعریف کنید.

برای مثال:

برای دادن فونت Roboto به همه پاراگراف ها، موارد زیر را می نویسم: p (فونت-family: Roboto;)

روش شماره 3. اتصال فونت سفارشی با استفاده از CSS (مشکل: ⭐ ⭐ ⭐ ⭐ ⭐)

اگر به اندازه کافی مهارت دارید، بهترین کار این است که خودتان فونت ها را از طریق CSS اضافه کنید. در این صورت فونت ها در یک پوشه مخصوص روی سرور شما قرار می گیرند. اما ابتدا باید آنها را به جایی برسانید.

از کجا می توان فونت های وب سایت را دریافت کرد

آیا می دانستید که برای استفاده از فونت های وب نیاز به خرید مجوز جداگانه دارید؟

فونت ها را با مجوز رایگان متصل کنید. ساده ترین راه برای پیدا کردن آنها با سرویس Fontsquirrel است که ما انجام خواهیم داد.

مرحله 1. به وب سایت رسمی سرویس بروید

مرحله 2. در منوی سمت راست، در بخش Languages، Cyrillic را انتخاب کنید.

مرحله 3. یک فونت مناسب پیدا کنید. به تعداد فونت ها دقت کنید.

به عنوان مثال، اگر 4 سبک وجود داشته باشد، 4 سبک نوشته می شود:

تعیین سبک های فونت - معمولی (400/معمول)، ایتالیک (مورب)، پررنگ (700/بولد)، ایتالیک پررنگ (700 ایتالیک).

مرحله 5. روی نام فونت کلیک کنید و به صفحه تنظیمات بروید.

مرحله 6. به بخش Webfont Kit بروید. تمام فرمت های فونت را انتخاب کنید و روی Download @FONT-FACE KIT کلیک کنید. اگر فقط 1-2 فرمت موجود باشد، ترسناک نیست.

برای اضافه کردن فونت ها، از @Font-face استفاده کنید

از طریق دستور font-face@، می توانید یک یا چند فونت را به سایت خود اضافه کنید. اما این روش مزایا و معایب خود را دارد.

طرفداران:

• از طریق CSS، می‌توانید فونت‌هایی را با هر فرمتی اضافه کنید: ttf، otf، woff، svg.
• فایل های فونت در سرور شما قرار می گیرند - شما به خدمات شخص ثالث وابسته نخواهید بود.

معایب:

• برای اتصال صحیح فونت برای هر سبک، باید یک کد جداگانه بنویسید.
• بدون دانستن CSS، گیج شدن آسان است.

شما فقط می توانید کد تمام شده من و جایی که باید مقادیر خود را قرار دهید را کپی کنید.

مرحله 1. فایل های فونت دانلود شده را به سایت خود منتقل کنید. این کار را می توان از طریق کنترل پنل هاست یا از طریق FTP انجام داد.

پیشنهاد می‌کنم یک پوشه فونت‌ها را در همان فهرستی که فایل CSS خود دارید ایجاد کنید. تمام فایل های فونت را به این پوشه منتقل کنید.

مرحله 2. ورودی زیر را در همان ابتدای فایل CSS بنویسید:

@font-face(
font-family: "MyWebFont"؛
src: url("../fonts/WebFont.eot");
src: فرمت url("../fonts/WebFont.eot?iefix") ("eot")،
فرمت url("../fonts/WebFont.woff") ("woff"),
فرمت url("../fonts/WebFont.ttf") ("truetype"),
url("../fonts/WebFont.svg#webfont") قالب ("svg");
وزن فونت: معمولی
سبک فونت: معمولی
}

جایی که MyWebFont نام فونت است و مقدار ویژگی src (داده های داخل پرانتز در نقل قول) مکان آنها (پیوندهای نسبی) است. باید هر سبک را جداگانه مشخص کنیم.

از آنجایی که ابتدا یک فونت معمولی را اضافه می کنیم، ویژگی های وزن فونت و سبک فونت را در حالت عادی قرار می دهیم.

مرحله 3. هنگام اتصال استایل ایتالیک، موارد زیر را بنویسید:

@font-face(
font-family: "MyWebFont"؛
src: url("../fonts/WebFont-Italic.eot");
src: فرمت url("../fonts/WebFont-Italic.eot?iefix") ("eot")،
فرمت url("../fonts/WebFont-Italic.woff") ("woff"),
فرمت url("../fonts/WebFont-Italic.ttf") ("truetype"),
فرمت url("../fonts/WebFont-Italic.svg#webfont") ("svg");
وزن فونت: معمولی
سبک فونت: مورب;
}

در جایی که همه چیز یکسان است، فقط ما به ویژگی font-style مقدار italic دادیم.

مرحله 4. برای فعال کردن استایل پررنگ، کد زیر را اضافه کنید:

@font-face(
font-family: "MyWebFont"؛
src: url("../fonts/WebFont-Bold.eot");
src: فرمت url("../fonts/WebFont-Bold.eot?iefix") ("eot")،
فرمت url("../fonts/WebFont-Bold.woff") ("woff"),
فرمت url("../fonts/WebFont-Bold.ttf") ("truetype"),
فرمت url("../fonts/WebFont-Bold.svg#webfont") ("svg");
فونت-وزن: پررنگ;
سبک فونت: معمولی
}

جایی که ویژگی font-weight را روی Bold قرار می دهیم.

حتما محل صحیح فایل های فونت را برای هر سبک مشخص کنید.

مرحله 5. برای فعال کردن تایپ ایتالیک پررنگ، موارد زیر را بنویسید:

@font-face(
font-family: "MyWebFont"؛
src: url("../fonts/WebFont-Italic-Bold.eot");
src: فرمت url("../fonts/WebFont-Italic-Bold.eot?iefix") ("eot")،
فرمت url("../fonts/WebFont-Italic-Bold.woff") ("woff"),
فرمت url("../fonts/WebFont-Italic-Bold.ttf") ("truetype"),
url("../fonts/WebFont-Italic-Bold.svg#webfont") قالب ("svg");
فونت-وزن: پررنگ;
سبک فونت: مورب;
}

خوب، تمام :) شما به تازگی 4 سبک فونت به سایت خود اضافه کرده اید.

اما یک نکته وجود دارد - این اتصال فونت ها در مرورگر اینترنت اکسپلورر 8 به درستی نمایش داده نمی شود. تسلیت این است که تعداد بسیار کمی از آنها باقی مانده است.

نحوه اتصال فونت برای سایت ها در CMS های مختلف

مهم نیست که سایت شما روی چه موتوری است (وردپرس، جوملا، دروپال، اپن کارت) - اگر به فایل CSS دسترسی دارید، می توانید فونت ها را از طریق فونت های گوگل یا با آپلود آنها به سرور خود از طریق Fontsquirrel متصل کنید.

باشه الان تموم شد اگر فکر می کنید این مقاله ممکن است برای سایر وب مسترها مفید باشد، لطفاً آن را در شبکه های اجتماعی به اشتراک بگذارید.

همچنین:

در خبرنامه من مشترک شویدتا پست های مفید و جالب وبلاگ را از دست ندهید.

بسیاری از طراحانی که طرح‌بندی‌های جدی و جالبی ایجاد می‌کنند، تعداد زیادی فونت منحصر به فرد و زیبا در دسترس دارند. به لطف چنین فونت هایی، طراحی جذابیت و انحصار خود را به دست می آورد. اما فونت های غیر استاندارد فقط روی رایانه ای که قبلاً روی آن نصب شده اند نمایش داده می شوند، بنابراین برای کارکرد صحیح با آنها، طراح باید تمام فونت هایی را که در چیدمان خود استفاده می کند در اختیار شما قرار دهد. زیرا هنگام چیدمان چیدمان، باید این فونت ها را روی کامپیوتر خود نصب کنید. اما کاربر سایت شما تمام فونت ها را برای خود دانلود نمی کند و آنها را روی رایانه خود نصب نمی کند، بنابراین باید مرورگر را وادار کنید که فونت های لازم را به تنهایی بالا بکشد. قانون در اینجا به شما کمک می کند، هنوز گزینه هایی برای استفاده از Cufon یا دانلود فونت از Google Webfonts یا Fontsquirrel وجود دارد، اما Google Webfonts و Fontsquirrel ممکن است نیازی به فونت نداشته باشند، بنابراین بهترین گزینه را در نظر بگیرید - اتصال فونت های منحصر به فرد با استفاده از font-face@.

ساده ترین راه برای گنجاندن یک فونت، نوشتن آن در یک شیوه نامه است:

@font-face ( font-family: "PF Din CompPro"; src: url("fonts/pfdintextcomppro-medium-webfont.ttf"); ) body(font-family: "PF Din CompPro"، Arial، sans-serif ;)

در اینجا 'PF Din CompPro' نام فونت است و سپس می توانید این فونت را برای عناصر لازم سایت مشخص کنید و fonts/pfdintextcomppro-medium-webfont.ttf مسیر فونت شما است که در پوشه فونت ها قرار دارد. مهم است که در نام هیچ فاصله ای در فایل فونت وجود نداشته باشد، بهتر است آنها را با خط تیره جایگزین کنید.

این ساده ترین راه است، اما در همه مرورگرها کار نمی کند و این یک مشکل بزرگ است.

هر مرورگر از فرمت های فونت خود پشتیبانی می کند:
نوع واقعیفونت برای فایرفاکس 3.5 و بالاتر، اپرا 10 و بالاتر، سافاری 3.1 و بالاتر، کروم 4.0.249.4 و بالاتر
EOTفونت برای اینترنت اکسپلورر 4+
واففونت برای فایرفاکس 3.6 و بالاتر، اینترنت اکسپلورر 9 و بالاتر، کروم 5 و بالاتر
SVGفونت برای iPad و iPhone

بنابراین، شما باید چندین فونت مشابه را از یکی از فونت های خود با فرمت ttf. فقط با فرمت متفاوت بسازید. اینجاست که تولید کننده فونت در fontsquirrel.com مفید است. در این صفحه، فونت خود را آپلود کنید، تنظیمات بهینه را انتخاب کنید، چک باکس تایید قانونی بودن فونت دانلود شده را علامت بزنید (برخی فونت ها هزینه زیادی دارند و برای استفاده از آنها باید مجوز داشته باشید)، سپس روی دکمه «دانلود کیت» کلیک کنید. و آرشیو مورد نیاز را با تمام فرمت های فونت خود دریافت خواهید کرد.

تمام فرمت های فونت های خود را از آرشیو دانلود کنید، در تئوری این 4 فایل با پسوندهای .eot، .svg، .ttf و .woff هستند، این فایل ها را در پوشه فونت های وب سایت خود کپی کنید، فایل stylesheet.css نیز انجام می شود. در بایگانی باشید - در آن تمام قوانین اتصال فونت ها قبلاً نوشته شده است، می توانید با خیال راحت آنها را در شیوه نامه خود کپی کنید، فقط فراموش نکنید که مسیرهای خود را برای فایل های فونت، به عنوان مثال، به پوشه فونت ها مشخص کنید. نمونه ای از اتفاقی که در یکی از سایت های من افتاد:

@font-face ( font-family: "PF Din CompPro"؛ src: url("fonts/pfdintextcomppro-medium-webfont.eot"); src: url("fonts/pfdintextcomppro-medium-webfont.eot?#iefix" ) format("embedded-opentype"), url("fonts/pfdintextcomppro-medium-webfont.woff") format("woff"), url("fonts/pfdintextcomppro-medium-webfont.ttf") قالب("truetype" ), url ("fonts/pfdintextcomppro-medium-webfont.svg#pf_din_text_comp_promedium") فرمت ("svg")؛ وزن فونت: معمولی؛ سبک فونت: معمولی؛ ) body( font-family: "PF Din CompPro"، Arial، Tahoma، Verdana، sans-serif؛ )

با این تنظیمات، فونت ها در همه مرورگرها از جمله IE-7-8-9 محبوب نمایش داده می شوند.

اگر از فونت های غیر استاندارد برای سیریلیک، یعنی برای حروف روسی استفاده می کنید، و فونت به اشتباه در سایت نمایش داده می شود، ایجاد فونت با تنظیمات پیشرفته ممکن است در صفحه http://www.fontsquirrel.com/tools کمک کند. /webfont-generator فونت خود را دانلود کرده و تنظیمات "Expert" را انتخاب کنید. تنظیمات زیادی وجود دارد، من همه چیز را نمی دانم، اما با دقت بخوانید و موارد مورد نیاز خود را انتخاب کنید و برای پشتیبانی از سیریلیک، در بلوک Subsetting: قسمت Custom Subsetting ... را انتخاب کنید و تیک سیریلیک و همچنین زبان ها و قالب های مورد نیاز خود را علامت گذاری کنید.

در اینجا یک نمونه از آنچه من به دست آوردم آمده است:

در این مرحله از توسعه مرورگر، بازدیدکننده سایت هنگام استفاده از فونت وب غیر استاندارد چه چیزی را می بیند؟

بسیاری در هنگام ایجاد یک سایت رنج می برند. در بسیاری از موارد، سایت نیاز به استفاده از فونت یا هیروگلیف غیر استاندارد دارد. شما یک فونت زیبا دانلود می کنید و شروع به چیدمان صفحه می کنید، اما همه کاربران چنین فونت هایی ندارند. برخی خجالت نمی کشند و به سادگی با استفاده از فونت مورد نیاز خود یک فایل گرافیکی ایجاد می کنند، اما گرافیک های اضافی همیشه با صفحه مطابقت ندارند و به هر حال بسیاری از آنها به اندازه کافی وجود دارند. اما یک راه مناسب وجود دارد! این راه، استفاده از فناوری CSS (Cascading Style Sheets) یا به سادگی "Cascading Style Sheets" است. معمولاً CSS در خود فایل ایجاد شده، صفحه محصور می شود، اما می توانید یک فایل CSS (.css) به طور جداگانه ایجاد کنید و آن را با padding بین تگ متصل کنید. بدین ترتیب:

و با کمک CSS باید فایل فونت True Type Font (.ttf) را به صورت خودکار دانلود و نصب کنیم، اما نصب فقط در صورتی انجام می شود که کامپیوتر کاربر فونت مورد نیاز را تشخیص ندهد. ابتدا باید محل فونت را مشخص کنیم. برای این کار بین تگ ها می نویسیم وبنابراین:

بنابراین، می توانید از هر فونتی در سایت خود استفاده کنید. اما من به شما توصیه می کنم خیلی پیچیده نباشید، زیرا فرآیند دانلود و نصب فونت نیز به زمان مشخصی نیاز دارد. و اگر فونت شما به خودی خود 500 کیلوبایت یا بیشتر "وزن" دارد، استفاده از آن در این مورد توصیه نمی شود.

صادقانه بگویم، انجام این کار ساده تر و صحیح تر است:

اگرچه فونت های وب توسط اکثر مرورگرها پشتیبانی می شوند، اما از همان ابتدا در Opera باگ هستند. در برخی از سیستم‌ها اصلاً کار نمی‌کنند، در سیستم‌هایی که کار می‌کنند، ممکن است صفحات هنگام بارگیری مجدد کار کنند یا نکنند:

بنابراین، این نباید در پروژه های جدی، فقط در وبلاگ های شخصی و فقط برای متن های بزرگتر از 30 پیکسل استفاده شود تا شگفتی های anti-aliasing و kerning را مشاهده نکنید.

در همان زمان گوگلفراهم می کند - API برای اتصال متقابل مرورگر فونت های غیر استاندارد.

ساخت وب زیبا!

گوگل مرورگر را شناسایی می کند و CSS و فونت معتبری را برای آن صادر می کند.