فونت های گوگل

فونت های گوگل

فونت های گوگل

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

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

فونت های گوگل
این تصویر پانل “تنظیمات” را برای WP افزونه Google Fonts نشان می دهد.

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

در این مقاله از دستیار وردپرس به معرفی افزونه افزونه WP Google Fonts می پردازیم.

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

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

پلاگین WP Google Font حتی ساده تر از استفاده از سرویس رایگان گوگل برای اضافه کردن فونت های با کیفیت بالا به سایت وردپرس شما می باشد.

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

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

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

بیشتر  از وردپرس بدانید :

بکارگیری فونت های گوگل در سایت وردپرس با افزونه WP Google Fonts

بکارگیری فونت های گوگل در سایت وردپرس با افزونه WP Google Fonts
بکارگیری فونت های گوگل در سایت وردپرس با افزونه WP Google Fonts

 

وقتی شما یک سایت وردپرسی را آماده بهره برداری کردید، یکی از مهم ترین مسائلی که باید به آن توجه کنید مناسب بودن ویرایشگر وردپرس ( که به طور یشفرض WYSIWYG  می باشد)  برای استفاده توسط خود شما و حتی نویسندگان سایتتان می باشد.

یکی از اقداماتی که در جهت مناسب کردن ویرایشگر یا به اصطلاح ادیتور سایت وردپرسی می توانید انجام دهید، استایل دهی به ویرایشگر  WYSIWYG می باشد. فایل مربوط به استایل دهی ویرایشگر معمولا editor-style.css نام دارد.

با توجه به محبوبیت روز افزون استفاده از فونت های وب در میان طراحان و توسعه دهندگان وب، استفاده مناسب از آن ها در وب سایت های وردپرسی اهمیت حائزی پیدا کرده است. ما در این آموزش می خواهیم به شما آموزش دهیم که چگونه فونت های گوگل (Google Fonts) را به ویرایشگر سایت وردپرسی خود اضافه کنید. پس تا انتها با ما همراه باشید.

اضافه کردن فونت های گوگل (Google Fonts) به ویرایشگر وردپرس به صورت دستی

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

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

۱- پیدا کردن استایل ویرایشگر

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

برای مثال در قطعه کد زیر نشان داده شده است که فایل editor-style.css در فولدری به نام css قرار گرفته است.

<?php 
function acme_load_editor_style() {
  add_editor_style( get_template_directory_uri() . '/css/editor-style.css' );
}
add_action( 'after_setup_theme', 'acme_load_editor_style' );

۲- اضافه کردن وب فونت ها

برای اضافه کردن فونت ها به فایل editor-style.css باید در ابتدای خط مربوط به کد فراخوانی فونت از عبارت @import استفاده کنید؛ چیزی شبیه مثال زیر:

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,900

[/fusion_text][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container][fusion_builder_container hundred_percent=”no” equal_height_columns=”no” menu_anchor=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” background_color=”” background_image=”” background_position=”center center” background_repeat=”no-repeat” fade=”no” background_parallax=”none” parallax_speed=”0.3″ video_mp4=”” video_webm=”” video_ogv=”” video_url=”” video_aspect_ratio=”16:9″ video_loop=”yes” video_mute=”yes” overlay_color=”” video_preview_image=”” border_size=”” border_color=”” border_style=”solid” padding_top=”” padding_bottom=”” padding_left=”” padding_right=””][fusion_builder_row][fusion_builder_column type=”1_1″ layout=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” border_position=”all” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” center_content=”no” last=”no” min_height=”” hover_type=”none” link=””][fusion_text]Muli:300,400[/fusion_text][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container][fusion_builder_container hundred_percent=”no” equal_height_columns=”no” menu_anchor=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” background_color=”” background_image=”” background_position=”center center” background_repeat=”no-repeat” fade=”no” background_parallax=”none” parallax_speed=”0.3″ video_mp4=”” video_webm=”” video_ogv=”” video_url=”” video_aspect_ratio=”16:9″ video_loop=”yes” video_mute=”yes” overlay_color=”” video_preview_image=”” border_size=”” border_color=”” border_style=”solid” padding_top=”” padding_bottom=”” padding_left=”” padding_right=””][fusion_builder_row][fusion_builder_column type=”1_1″ layout=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” border_position=”all” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” center_content=”no” last=”no” min_height=”” hover_type=”none” link=””][fusion_text]

Nunito:400,300,700′);

body {
font-family: ‘Source Sans Pro’, Sans-serif;
font-size: 16px;
max-width: 720px;
}

a {
color: #80949c;
}

a:hover {
color: #2e3138;
text-decoration: none;
}

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

راستی برای مشاهده نتیجه نهایی کار در ویرایشگر، تازه سازی صفحه (Redresh) را فراموش نکنید!

اضافه کردن فونت های گوگل (Google Fonts) به ویرایشگر وردپرس به کمک افزونه

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

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

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

 

 

googlefonts
googlefonts

3 دیدگاه دربارهٔ «فونت های گوگل»

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

دیدگاه‌ خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *