آیا می خواهید یاد بگیرید که چگونه فونت های سفارشی را به وب سایت وردپرس اضافه کنید؟

چرا وبلاگ خود را با استفاده از فونت های استاندارد خسته کننده کنید؟ اجازه دهید وبلاگ شما در مورد شخصیت پر جنب و جوش شما و موضوعاتی که با طیف گسترده ای از فونت های سفارشی پوشش می دهید صحبت کند. فونت های سفارشی یک ویژگی جالب است که باعث می شود وبلاگ شما نسبت به دیگران ارجح باشد.

بیا با آن روبرو شویم؛ همه ما وبلاگ ها و وب سایت هایی با فونت های مناسب را دوست داریم. آنها نه تنها وب سایت را تزئین می کنند بلکه به جذب کاربر به محتوای شما نیز کمک می کنند. با این حال، انتخاب فونت های استاندارد وردپرس محدود است و به موضوعی که استفاده می کنید بستگی دارد. خبر خوب این است که می توانید آنها را به صورت دستی یا به همراه اضافه کنید افزونه های وردپرس تخصصی

و در اینجا دو سوال مطرح می شود: از کجا می توان فونت های سفارشی را دریافت کرد برای وردپرس و نحوه نصب فونت های سفارشی در وب سایت شما

بیایید پیدا کردن.

چرا باید از فونت های سفارشی استفاده کنم؟

دورانی که Times New Roman و Georgia تنها حروف نوشتاری در وب سایت ها محسوب می شدند، گذشته است. طی چند سال گذشته فضای فونت ها با ظهور فونت هایی مانند گوگل فونت و دیگران.

امروزه صدها فونت رایگان، اطلاعات و کمک آموزشی و منابع طراحی در اینترنت موجود است. برخلاف Adobe Illustrator، Photoshop و دیگر برنامه‌های کلاسیک، وردپرس کنترل کاملی بر فونت‌های پیش‌فرض به شما نمی‌دهد. فقط برخی از تم های وردپرس برای پشتیبانی و استفاده از فونت های سفارشی انتخاب می کنند.

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

اهمیت استفاده از فونت های سفارشی

می‌پرسید چرا فونت‌ها، تورفتگی کلمات، فاصله خطوط، فاصله حروف یا اشباع فونت را تغییر دهید؟ با این حال، برخی از مطالعات نشان می دهد که تایپوگرافی درک مطلب را بهبود می بخشد.

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

طراحی فونت بر خوانندگان تأثیر می گذارد، حتی اگر به آن توجه نکنند. دست کشیدن از طراحی فونت یعنی دست کشیدن از خود توسعه! حال و هوای خواننده به آن بستگی دارد. فونت خواندن را آسان می کند یا کاربران را مجبور به ترک صفحه می کند.

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

جایگزین های فونت های گوگل

قلم های سفارشی اضافه کنید

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

در اینجا برخی از منابع دیگر برای یافتن فونت برای استفاده رایگان و تجاری:

  1. تمپلیت - در وب سایت TemplateMonster همه چیزهایی را که برای طراحی وب نیاز دارید پیدا خواهید کرد. همچنین فونت ها و بسته های فونت زیادی برای استفاده شخصی با قیمت کمی وجود دارد. علاوه بر این، برای کمک به شما در انتخاب، تمام فونت های ارائه شده در بروشور یا فریم. هر فونت نیز با مجوز تجاری ارائه می شود.
  2. MyFonts - MyFonts در حال حاضر بزرگترین انتخاب فونت ها را در جهان ارائه می دهد. با این حال، قیمت ها در اینجا نیز در بخش بالایی هستند. بنابراین اگر بودجه کمی دارید ممکن است برای شما مناسب نباشد.
  3. FontSpring - Fontspring فونت های جدید را برای استفاده تجاری می فروشد. اما تقریباً در هر خانواده می توان از 1-2 فونت رایگان برای اهداف شخصی استفاده کرد. همچنین، یک بخش جداگانه با فونت های رایگان وجود دارد. مجموعه پر جنب و جوش است. اما قبل از دانلود باید اطلاعات مجوز برای یک فونت خاص را به دقت مطالعه کنید.
  4. کوفونفونت - همچنین مجموعه عظیمی از فونت های مختلف است. هر یک را انتخاب کنید، صفحه ای با اطلاعات دقیق در مورد آن مشاهده خواهید کرد. تعداد زیادی فونت رایگان وجود دارد و آنها به بخش های جداگانه تقسیم می شوند. سیستم مرتب‌سازی در CufonFonts کاملاً منعطف و راحت است. همچنین، پشتیبانی از Webfont گنجانده شده است.
  5. دافونت - مجموعه قابل دسترس دیگری از 3 فونت رایگان. اکثر آنها فقط برای استفاده شخصی طراحی شده اند. یک ویژگی جالب DaFont یک سیستم دسته بندی است. می توانید فونت هایی را به سبک کمیک، بازی های ویدیویی، وینتیج و غیره انتخاب کنید.

انتخاب فونت ها بسیار وسوسه انگیز است زیرا همه آنها زیبا هستند. اما شما نباید زیاد انتخاب کنید. از بیش از دو فونت در سایت استفاده نکنید وب سپسظاهر وب سایت شما سازگار خواهد بود. هنگامی که فونت های خود را انتخاب کردید، مطمئن شوید که فایل ها را برای هر سبکی که استفاده می کنید (معمولی، پررنگ، ایتالیک و غیره) آپلود کنید.

اکنون که فونت مناسب را برای وب سایت خود انتخاب کرده اید، بیایید نحوه اضافه کردن آن را دریابیم.

نحوه اضافه کردن فونت های سفارشی به وردپرس

چندین روش برای افزودن فونت به وب سایت وردپرسی وجود دارد:

  1. پلاگین : در این مورد متفاوت است افزونه های وردپرس برای تسهیل فرآیند استفاده می شود.
  2. بصورت دستی : با استفاده از این روش نیاز به دانلود فونت از سایت و اصلاح فایل CSS دارید.
  3. تم: بسیاری از تم های محبوب دارای گزینه های داخلی برای سفارشی کردن فونت های شما هستند (توجه داشته باشید - ما این گزینه را پوشش نمی دهیم زیرا این فرآیند بسته به موضوعی که استفاده می کنید متفاوت است.

گزینه 1 – فونت های وردپرس را با افزونه ها تغییر دهید

اگر تغییرات جهانی برای ما مهم نیست، می توانیم نصب کنیم افزونه های وردپرس که فونت های وب سایت شما را تغییر می دهد.

ویژگی های افزونه های فونت سفارشی

نرم افزار منبع باز یک مزیت برای منافع جامعه دارد و وردپرس نیز این مزیت را دارد. چندین افزونه وردپرس به شما امکان می دهد فونت های سفارشی اضافه کنید. چگونه یک افزونه مناسب انتخاب کنیم در حالی که تعداد زیادی افزونه وجود دارد؟ ویژگی های افزونه های فونت سفارشی وردپرس چیست؟

در اینجا چند نکته وجود دارد که باید در نظر گرفته شود:

  • امکان استفاده از فونت دلخواه
  • امکان استفاده از چندین فونت
  • سرصفحه ها و اجزای هدف
  • پاداش: امکان تغییر تنظیمات فونت از ویرایشگر بصری

همین. اولین ویژگی در لیست بسیار مهم است. شما همچنان می توانید فونت ها را از وب سایت هایی مانند DaFont، Font Squirrel و غیره دانلود کنید، اما باید بتوانید آنها را در وردپرس آپلود کنید.

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

1. فونت بسیار عالی تر

این افزونه وردپرس به کاربران خود اجازه می دهد تا آخرین نسخه فونت های Better Font Awesome را با خودکار ترکیب کنند CSS، کد کوتاه و موارد دیگر. علاوه بر این ، این افزونه وردپرس به صورت خودکار بروزرسانی می شود.

فونت بهتر عالی - بهترین افزونه های تایپوگرافی وردپرس

شما در آنجا به عنوان ویژگی هایی پیدا خواهید کرد: به روزرسانی های منظم ، تولید کننده کد کوتاه ، سازگاری با سایر افزونه های وردپرس و غیره ...

دانلود | نسخه ی نمایشی | میزبانی وب

2. فونت گوگل برای وردپرس

این افزونه وردپرس از قلم های ویژه 877 تشکیل شده است که به شما امکان می دهد از همه قلم ها در وب سایت های وردپرس خود استفاده کنید. به لطف پیش نمایش زمان واقعی آن ، به شما امکان می دهد پس از اعمال فونت ، وب سایت شما چه شکلی باشد. 

فونت های گوگل - بهترین افزونه های تایپوگرافی وردپرس

علاوه بر این ، هنگام پیدا کردن ترکیبی که از آن لذت خواهید برد ، می توانید آن را ذخیره کرده و آن را در جبهه تغییر دهید.

ویژگی های آن عبارتند از: پیش نمایش در زمان واقعی ، الف سئو کاملاً پیشرفته، پشتیبانی چند زبانه ، پشتیبانی از بیشتر فونت های 870 + Google ، به روزرسانی آسان و موارد دیگر.

دانلود | نسخه ی نمایشی | میزبانی وب

3.افزونه فونت

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

بهترین افزونه های تایپوگرافی وردپرس

برای راه‌های بیشتر برای سفارشی‌سازی تایپوگرافی وب‌سایت خود مانند اندازه فونت، فاصله حروف و ارتفاع خطوط، می‌توانید به نسخه برتر ارتقا دهید. Fonts Plugin Pro.دانلود | نسخه ی نمایشی | میزبانی وب

4. فونت گوگل آسان

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

10 افزونه تایپوگرافی وردپرس برای وبلاگ شما

اگرچه دسترسی به تعداد کمتری از فونت های گوگل را فراهم می کند، اما از این نظر منحصر به فرد است که به شما امکان می دهد کنترل ها و قوانین فونت سفارشی را در قسمت مدیریت ایجاد کنید، که بلافاصله در سفارشی ساز وردپرس ظاهر می شود.

دانلود | نسخه ی نمایشی | میزبانی وب

گزینه 2 - فونت های سفارشی وردپرس را به صورت دستی نصب کنید

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

مزایای:

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

معایب :

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

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

Remarque : قبل از شروع، حتما یک تم کودک ایجاد کنید برای وب سایت شما به این ترتیب می‌توانید تمام تغییرات را در طرح زمینه فرزندتان ایجاد کنید و تم اصلی خود را ترک کنید تا در صورت نیاز در آینده به راحتی آن را به‌روزرسانی کنید.

مرحله 1: یک پوشه "fonts" ایجاد کنید

در طرح زمینه فرزند خود، یک پوشه جدید "fonts" در زیر ایجاد کنید: wp-content/themes/your-child-theme/fonts

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

این کار را می توان از طریق کنترل پنل هاست یا از طریق FTP انجام داد.

همه فایل‌های فونت را به پوشه فونت‌های تازه اضافه شده اضافه کنید: wp-content/themes/ در طرح زمینه فرزند خود، یک پوشه جدید "fonts" در زیر ایجاد کنید: wp-content/themes/your-child-theme/fonts که شما ایجاد کردید

مرحله 3. فونت ها را از طریق صفحه سبک تم فرزند وارد کنید

فایل را باز کنید را ببندید از تم فرزند خود و کد زیر را در ابتدای فایل CSS (بعد از نظر موضوع فرزند) اضافه کنید:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont.eot');
src: url('fonts/WebFont.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont.woff') format('woff'),
url('fonts/WebFont.ttf') format('truetype'),
url('fonts/WebFont.svg#svgwebfont') format('svg');
font-weight: normal;
font-style: normal;
}

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

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

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

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Italic.eot');
src: url('fonts/WebFont-Italic.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Italic.woff') format('woff'),
url('fonts/WebFont-Italic.ttf') format('truetype'),
url('fonts/WebFont-Italic.svg#svgwebfont') format('svg');
font-weight: normal;
font-style: italic;
}

وقتی همه چیز یکسان است، ما تنها کسانی هستیم که ویژگی سبک فونت را به ایتالیک متصل می کنیم.

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

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Bold.eot');
src: url('fonts/WebFont-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Bold.woff') format('woff'),
url('fonts/WebFont-Bold.ttf') format('truetype'),
url('fonts/WebFont-Bold.svg#svgwebfont') format('svg');
font-weight: bold;
font-style: normal;
}

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

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

مرحله 6. برای اتصال حروف برجسته، موارد زیر را تایپ کنید:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Italic-Bold.eot');
src: url('fonts/WebFont-Italic-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Italic-Bold.woff') format('woff'),
url('fonts/WebFont-Italic-Bold.ttf') format('truetype'),
url('fonts/WebFont-Italic-Bold.svg#svgwebfont') format('svg');
font-weight: bold;
font-style: italic;
}

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

اما یک نکته وجود دارد: این اتصال فونت در اینترنت اکسپلورر 8 به درستی نمایش داده نمی شود. تسلیت این است که افراد بسیار کمی هنوز از IE8 استفاده می کنند.

سایر منابع پیشنهادی

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

نتیجه

اولین چیزی که کاربران هنگام بازدید از وب سایت شما متوجه آن می شوند چیست؟ درست است، طراحی آن! بیشتر طراحی به استفاده صحیح از فونت های زیبا متکی است. بنابراین، شما باید از طراحی فونت وب سایت خود مراقبت کنید. کد اضافه کنید یا از یکی از افزونه های ذکر شده در بالا برای جاسازی یک سبک فونت جدید استفاده کنید. نحوه انتخاب آن به شما بستگی دارد.

اطمینان حاصل کنید که بیش از دو فونت در یک وب سایت استفاده نمی کنید. از آنجایی که هر چه فونت های سفارشی بیشتری به وب سایت اضافه کنید، سرعت وب سایت کاهش می یابد.

این برای این مقاله است که به شما نشان می دهد چگونه فونت های سفارشی را به یک وب سایت وردپرس اضافه کنید. شما را به امتحان دعوت می کنیم. اگر شما هر گونه نگرانی و یا پیشنهاد، لطفا با ما در جریان است نظر.

با این حال، شما همچنین می توانید با ما مشورت کنید ressourcesاگر برای اجرای پروژه های ایجاد سایت های اینترنتی به عناصر بیشتری احتیاج دارید ، با مشورت راهنمای ما در مورد ایجاد وبلاگ وردپرس یا یکی در Divi: بهترین تم وردپرس در همه زمان ها.

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

...