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

فونت های گوگل چیست؟

فونت های گوگل مجموعه ای از فونت های وب با کیفیت بالا برای استفاده در پروژه های وب هستند. علاوه بر این، تمام فونت ها را می توان برای نصب در سیستم های محلی دانلود کرد. فونت ها از طریق شبکه تحویل محتوای Google (CDN) در وب سایت شما دانلود می شوند و پس از نصب به طور خودکار بارگیری می شوند.

چرا باید از فونت های گوگل استفاده کنید؟

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

12 بهترین فونت گوگل موجود (و آنها رایگان هستند!)

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

1. ربات

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

فونت را دریافت کنید

2. Sans را باز کنید

Open Sans دارای ظاهری کاربرپسند و بسیار خوانا است. هم برای تیتر و هم برای متن عالی است. به دلیل خوانایی آسان، به عنوان فونت پیش فرض در تم Divi استفاده می شود.

فونت را دریافت کنید

3. مونتسرات

با بیش از 30 سبک، Monsterrat کاملاً همه کاره است. این اثر از آثار هنری دیده شده در منطقه تاریخی مونتسرات بوینس آیرس در نیمه اول قرن بیستم الهام گرفته شده است.

فونت را دریافت کنید

4. لاتو

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

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

فونت را دریافت کنید

5. پاپین

Poppins یک فونت گرد و بسیار محبوب است که هم برای متن سرصفحه و هم برای متن بدنه مناسب است. Poppins که در سال 2014 به عنوان یک فونت منبع باز توسعه یافت، بر اساس سیستم های نوشتاری Devanagari و لاتین است.

فونت را دریافت کنید

6. منبع Sans Pro

Source Sans Pro که به عنوان اولین فونت منبع باز Adobe منتشر شد، برای تمام طراحی های رابط کاربری مناسب است. این کاملا همه کاره است و به خوبی با فونت های دیگر موجود در لیست ما، مانند Montserrat، Open Sans و Work Sans جفت می شود.

فونت را دریافت کنید

7. راه آهن

باریک و ظریف، Raleway یک حروف نمایشی مناسب برای سرفصل‌ها و عنوان‌های فرعی است. در ابتدا در سال 2012 به عنوان یک تایپ باریک منفرد توسعه یافت و به 9 نوع تغییر یافته است.

فونت را دریافت کنید

8. نوتو سانس

Noto Sans با 18 تنوع فونت بسیار قوی است. همچنین، بیش از 3700 گلیف با این فونت شگفت انگیز موجود است. Noto Sans با بیش از 18 تغییر، از جمله وزن، عرض و مورب متعدد، تقریبا برای هر طراحی مناسب است.

فونت را دریافت کنید

9. اینتر

اینتر که به طور خاص برای صفحه نمایش کامپیوتر طراحی شده است، جدیدترین فونت در لیست ما است. اینتر که در ابتدا با نام Interface منتشر شد، در سال 2017 وارد صحنه شد. اغلب به عنوان تلاقی بین Helvetica و San Fransisco Pro شناخته می شود.

فونت را دریافت کنید

10. روبوت اسلب

بر اساس Roboto بسیار محبوب، نوع Slab در چهار وزن – نازک، سبک، معمولی و پررنگ موجود است.

فونت را دریافت کنید

11. Merriweather

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

فونت را دریافت کنید

12. نمایشگر Playfair

Playfair Display سبک دنیای قدیم را به نمایش می‌گذارد اما پیچش مدرن را به نمایش می‌گذارد. به دلیل ظاهر جذابش برای تیترها مناسب است. هنگام استفاده از Playfair Display، آن را با یک فونت sans-serif خوانا مانند Roboto، Open Sans، Work Sans یا Lato جفت کنید.

فونت را دریافت کنید

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

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

فقط از فونت های مورد نیاز خود استفاده کنید

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

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

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

ترکیب خوبی از فونت ها را انتخاب کنید

هنگام انتخاب فونت، سعی کنید فونت هایی را انتخاب کنید که به خوبی با هم کار کنند. همچنین باید سرفصل‌های سریف را با متن متنی sans-serif ترکیب کنید. این به این دلیل است که استفاده از دو فونت سریف در کنار هم خواندن متن شما را سخت می کند. روش دیگر، استفاده از دو فونت sans-serif با هم یا حتی وزن های مختلف در یک خانواده کاملاً قابل قبول است. اگر مطمئن نیستید از چه فونت هایی استفاده کنید، می توانید از یک افزونه مرورگر مفید مانند Fontpair استفاده کنید تا پیدا کردن فونت های استفاده شده توسط وب سایت را آسان تر کنید.

از فونت های خود میزبان گوگل استفاده کنید

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

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

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

هنگام قرار دادن فایل های فونت در پروژه خود، حتما به محل فایل توجه کنید. در چند مرحله بعد باید آن را از طریق CSS اضافه کنید. برای دسترسی به فونت های موضوع خود، به /wp-content/themes/twentywenty/assets/fonts/. اگر از تم دیگری استفاده می کنید، لطفاً آن را تغییر دهید بیست و بیست با نام تم شما فایل های فونت دانلود شده خود (از جمله پوشه) را به پوشه فونت سایت های وردپرس خود بکشید.

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

افزودن CSS

در مرحله بعد، باید مقداری CSS به سفارشی‌کننده تم اضافه کنیم تا فونت ما شناسایی شود. هدایت به ظاهر > شخصی سازی.

کلیک CSS اضافی در سفارشی ساز برای باز کردن ناحیه ورودی css.

سپس کد زیر را به قسمت Additional CSS اضافه کنید:

@font-face {
    font-family: Roboto;
    src: url(/wp-content/themes/twentytwenty/assets/fonts/Roboto-Regular.ttf);
    font-weight: normal;
}

برای استفاده از فونت جدید خود، به سادگی فونت را با CSS ارجاع دهید. می توانید از ابزار بازرسی مرورگر برای اعمال فونت در هر کلاس css که می خواهید استفاده کنید. در این مثال می خواهیم عنوان سایت و همچنین محتوای صفحه از فونت جدید ما استفاده کنند. برای این مثال، CSS زیر را وارد کنید:

.entry-title a {
font-family: "Roboto", Arial, sans-serif;
}

.entry-content {
font-family: "Roboto", Arial, sans-serif;
}

کلیک انتشار برای ذخیره تغییرات شما

وزن فونت را محدود کنید

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

استفاده از فونت های گوگل در Divi

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

در گزینه‌های تم Divi، می‌توانید فونت‌های Google را به همراه زیر مجموعه‌ای از فونت‌ها فعال کنید.

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

همچنین می‌توانید کلید Google API را وارد کنید تا Divi از آخرین نسخه‌های فونت و همچنین هر نسخه جدیدی که به مخزن فونت Google اضافه می‌شود، مطلع شود.

افکار نهایی

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

برخی از فونت های گوگل مورد علاقه شما کدامند؟ در بخش نظرات زیر به ما اطلاع دهید.