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

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

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


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

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

بیایید.

 چرا باید از قلم های سفارشی استفاده کنم?

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

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

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

اهمیت استفاده از قلم های سفارشی

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

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

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

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

گزینه های Google Fonts

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

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

چندتایی این جاست منابع دیگر برای یافتن قلم برای استفاده رایگان و تجاری:

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

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

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

نحوه اضافه کردن قلم های سفارشی به وردپرس

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

  1. پلاگین ها: در این حالت از پلاگین های مختلف WordPress برای تسهیل روند استفاده می شود.
  2. دستی: با استفاده از این روش ، شما نیاز به بارگذاری قلم بارگیری شده در سایت و ویرایش پرونده CSS دارید.
  3. مضامین: بسیاری از مضامین محبوب شامل گزینه های داخلی برای سفارشی کردن قلم های شما هستند (توجه داشته باشید – ما این گزینه را پوشش نمی دهیم زیرا این روند بر اساس موضوعی که استفاده می کنید متفاوت خواهد بود ، اما مضامین حق بیمه با کیفیت مانند کل وردپرس به صورت آنلاین ارائه می دهند) اسنادی که می توانید به راحتی دنبال کنید – مانند این راهنما برای افزودن قلم های سفارشی به Total)

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

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

ویژگی های افزونه های قلم سفارشی

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

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

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

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

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

باربر قلم سفارشی

باربر قلم سفارشی

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

از هر نوع قلم استفاده کنید

از هر نوع قلم استفاده کنید

این افزونه وردپرس است که برای بارگیری قلم ها و استفاده مستقیم از طریق ویرایشگر تصویری ، رابط کاربری مناسبی به شما می دهد. ویرایشگر تصویری وردپرس می تواند به طور خودکار فونت هر متن را تغییر دهد. این افزونه چندین ویژگی ارائه می دهد که باعث می شود روند افزودن قلم های سفارشی بسیار قابل کنترل تر شوید.

WP قلم های Google

WP قلم های Google

WP Google Fonts به شما امکان می دهد از کاتالوگ قلم گوگل استفاده کنید. یکی از مزایای شگفت انگیز این افزونه ، اضافه شدن نزدیک به 1000 قلم گوگل است. در حالی که می توانید قلم های Google را به صورت دستی ضمیمه کنید ، استفاده از افزونه برای اکثر کاربران بسیار ساده تر است.

نحوه نصب فونت ها با افزونه?

بیایید به عنوان مثال ، فونت های Google WP را بگیریم. فقط کافی است این افزونه را از مخزن رسمی وردپرس نصب کنید و بخش فونت های Google را باز کنید.

WP قلم های Google

یک صفحه کنترل فونت Google را در اینجا مشاهده خواهید کرد. فونت ها را انتخاب کنید و تنظیمات مختلفی مانند سبک فونت ، عناصری که در آن استفاده شده است و غیره را تغییر دهید.

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

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

طرفداران:

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

منفی:

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

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

توجه داشته باشید: قبل از شروع ، حتماً یک موضوع کودک برای سایت خود ایجاد کنید. به این ترتیب می توانید تمام ویرایش ها را با موضوع کودک خود انجام دهید و موضوع اصلی خود را در حالت تنگ قرار دهید تا بتوانید به راحتی در آینده مورد نیاز خود را به روز کنید.

مرحله 1: یک پوشه “فونت” ایجاد کنید

در درون زمینه کودک خود یک پوشه “قلم” جدید در زیر ایجاد کنید: wp-content / themes / your-child-theme / font

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

این کار از طریق کنترل پنل میزبان شما یا از طریق FTP قابل انجام است.

همه پرونده های قلم را به پوشه فونت های تازه اضافه شده اضافه کنید: wp-content / themes / your-child-theme / font شما ایجاد کردید.

مرحله 3. وارد کردن قلم ها از طریق شیوه نامه تم کودک

پرونده style.css کودک را باز کنید و کد زیر را به ابتدای فایل CSS اضافه کنید (بعد از اظهار نظر کودک):

@ font-face
font-family: 'MyWebFont'؛
src: url ('fonts / WebFont.eot')؛
src: url ("قلم / WebFont.eot؟ #iefix") قالب ("تعبیه شده-opentype"),
قالب url ('fonts / WebFont.woff') ("woff"),
قالب url ('fonts / WebFont.ttf') ("truetype"),
قالب url ('fonts / WebFont.svg # svgwebfont') قالب ('svg')؛
font-weight: normal؛
font-style: normal؛
}

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

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

مرحله 4 هنگام افزودن ایتالیایی, موارد زیر را بنویسید:

@ font-face
font-family: 'MyWebFont'؛
src: url ('fonts / WebFont-Italic.eot')؛
src: فرمت url ('قلم ها / WebFont-Italic.eot؟ #iefix'),
قالب url ("قلم ها / WebFont-Italic.woff") ("woff"),
قالب url ("قلم / WebFont-Italic.ttf") ("truetype"),
قالب url ('fonts / WebFont-Italic.svg # svgwebfont') قالب ('svg')؛
font-weight: normal؛
font-style: italic؛
}

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

مرحله 5. برای افزودن قلم جسورانه کد زیر را اضافه کنید:

@ font-face
font-family: 'MyWebFont'؛
src: url ('fonts / WebFont-Bold.eot')؛
src: url ("قلم / WebFont-Bold.eot؟ #iefix") قالب ("تعبیه شده-opentype"),
قالب url ('fonts / WebFont-Bold.woff') ("woff"),
قالب url ("قلمها / WebFont-Bold.ttf") ("حقیقت"),
قالب url ('fonts / WebFont-Bold.svg # svgwebfont') قالب ('svg')؛
font-weight: bold؛
font-style: normal؛
}

جایی که ویژگی قلم را به صورت جسورانه تنظیم می کنیم.

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

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

@ font-face
font-family: 'MyWebFont'؛
src: url ('قلم ها / WebFont-Italic-Bold.eot')؛
src: فرمت url ('قلم / وب فونت-ایتالیا-Bold.eot؟ #iefix'),
قالب url ("قلم ها / WebFont-Italic-Bold.woff") ("woff"),
قالب url ("قلم ها / WebFont-Italic-Bold.ttf") ("Truetype"),
قالب url ("قلم / وب فونت-ایتالیا-Bold.svg # svgwebfont") قالب ("svg")؛
font-weight: bold؛
font-style: italic؛
}

خوب ، این همه �� اکنون شما چهار سبک قلم را به وب سایت خود وصل کرده اید.

اما یک نکته وجود دارد – این اتصال قلم به درستی در Internet Explorer 8 نمایش داده می شود. تسلیت این است که تعداد بسیار کمی از افراد هنوز هم از IE8 استفاده می کنند.

بسته بندی قلم های سفارشی برای وردپرس

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

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

این همه است ، در صورت تمایل اظهار نظر کنید. 

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map