بالطبع ، هناك مكونات إضافية مختلفة لاستخدام Google Web Fonts على موقع WordPress الخاص بك ، ولكن إذا كنت تقوم بتطوير المظهر الخاص بك ، فقد تحتاج إلى ربط أسلوب الطباعة الذي اخترته به بإحكام ، متجاوزًا المكونات الإضافية. سنوضح لك أدناه كيفية استخدام Google Web Fonts في المظهر الخاص بك.

أولا ، دعنا نذهب إلى الموقع خطوط الويب من Googleوحدد الخط الذي نحتاج إلى تطبيقه في السمة. بمساعدة الأدوات الخاصة الموجودة على الجانب الأيسر ، يمكنك تضييق منطقة البحث ، حيث يوجد بالفعل الكثير من الخطوط. كنت أعلم أنني بحاجة إلى خط serif الجريء للعناوين وعنوان المدونة ، لذلك اخترت serif من القائمة المنسدلة Categories ثم قمت بنقل شريط التمرير Thickness إلى اليمين.

في النهاية ، تم إسقاط 617 خيارًا تم عرضها بسلاسة إلى 5. لديك عدد غير قليل من الخيارات لمعاينة الخطوط - يمكنك أن ترى كيف ستبدو كلمة أو جملة أو فقرة من النص أو ملصق في الخط المحدد. يمكنك اختيار نص محدد مسبقًا ، يمكنك تعيين النص الخاص بك واختيار حجم الخط المطلوب.

بمجرد العثور على الخط الذي ترغب في استخدامه على موقعك ، ما عليك سوى النقر فوق الزر "إضافة إلى المجموعة".

يمكنك إضافة عشرات الخطوط إلى مجموعتك. ومع ذلك ، هذا ليس مطلوبًا دائمًا. فقط لأنك تستطيع فعل ذلك لا يعني أنه يجب عليك ذلك. حاول أن تحد نفسك بثلاثة خطوط كحد أقصى. الأفضل من ذلك ، اثنان. لأسباب تتعلق بالأداء ، ما زلت أرغب في استخدام الخط الآمن للويب القديم للنص الأساسي للموقع ، وللاحتفاظ بخطوط الويب للعناوين والعناصر الأخرى التي تتطلب تركيزًا أو اهتمامًا خاصًا. كن حذرًا بشأن وضوح الخطوط الخاصة بك - لا تستخدم خطًا لامعًا إذا لم يتمكن الزوار من كتابة ما هو مكتوب.

عندما تضيف الخطوط الخاصة بك إلى المجموعة ، ستراها في القسم الأزرق أسفل الموقع. بمجرد حصولك على الخطوط التي تريد استخدامها في مجموعتك ، ما عليك سوى النقر فوق الزر "استخدام".

بعد ذلك ، سيتم نقلك إلى شاشة تقدم إرشادات من أربع خطوات. ستتعلم منه كيفية استخدام الخطوط. إذا كنت ترغب في تنزيل الخطوط المحددة لاستخدامها في محرر الرسوم ، أو لتقييمها أو لأخذ لقطة شاشة جذابة. إذا كنت تريد فقط استخدام الخط في المظهر الخاص بك ، فلن تحتاج إلى تنزيله على جهاز الكمبيوتر الخاص بك.

في الخطوة الأولى ، يمكنك اختيار أنماط ووزن الخط المضمن. في الخطوة الثانية ، يمكنك تحديد مجموعة الأحرف التي ترغب في تضمينها. يمكنك أيضًا تقييم كيفية تأثير مجموعة الخطوط على سرعة تحميل الصفحة.

ننتقل الآن إلى الخطوة الثالثة ، وهي ليست سهلة مثل السابقة. في الخطوة الثالثة ، نحصل على الكود الذي يجب إضافته إلى مواقعنا - ثلاثة خيارات مختلفة. تحديد الخيار القياسي - ومع ذلك ، سننحرف إلى حد ما عن إرشادات Google لدعم الأساليب المعمول بها لإضافة أنماط إلى سمات WordPress. في الكود الخاص بالإصدار القياسي ، نقوم بنسخ عنوان URL المحدد فقط كسمة href لعلامة الارتباط.

ثم افتح ملف وظائف السمة. سننشئ وظيفة لتحميل CSS التي سنستخدمها في موضوعنا:

الوظيفة ggl_load_styles () ()

انظر البادئة ggl على وظيفتي؟ هذه إحدى ممارسات WordPress الناجحة. قم دائمًا ببادئة أسماء وظائف WordPress لتقليل مخاطر التعارض مع الوظائف الأخرى في السمة أو القالب الفرعي أو المكونات الإضافية.

الآن في هذه الوظيفة ، نحتاج إلى تسجيل ورقة الأنماط الخاصة بنا الواردة من Google:

الوظيفة ggl_load_styles () (if (! is_admin ()) (wp_register_style ("googleFont"، "http://fonts.googleapis.com/css؟family=Holtwood+One+SC|Rouge+Script") ؛))

نحن نستخدم دالة wp_register_style. الحجة الأولى هي الواصف ، أي اختصار يمكننا استخدامه للإشارة إلى ورقة الأنماط هذه لاحقًا في الكود الخاص بنا. الوسيطة الثانية هي المسار إلى الملف. نحن نستخدم عنوان URL الذي تلقيناه في الخطوة الثالثة من إرشادات Google.

بعد ذلك ، نقوم بتضمين ورقة الأنماط الرئيسية لموضوعنا. آمل ألا تكون قد وضعت علامة ارتباط في قسم الرأس بملف header.php الخاص بك؟ إذا كان الأمر كذلك ، فارجع إلى الملف واحذف هذا الرمز. ثم قم بتضمين ورقة الأنماط في ملف function.php:

الوظيفة ggl_load_styles () (if (! is_admin ()) (wp_register_style ("googleFont"، "http://fonts.googleapis.com/css؟family=Holtwood+One+SC|Rouge+Script")؛ wp_enqueue_style ("ggl" "، get_stylesheet_uri ()، array (" googleFont "))؛))

نحن نستخدم دالة wp_enqueue_style. لها نفس الحجج مثل wp_register_style. أولاً ، نقوم بربط واصف بورقة الأنماط الخاصة بنا. ثم نحصل على الطريق إلى ورقة الأنماط الخاصة بنا. لحسن الحظ ، في WordPress ، يمكنك الحصول على المسار باستخدام دالة get_stylesheet_uri (). ثم نحدد التبعيات. يعتمد ملف style.css الخاص بنا على ورقة أنماط Google Web Fonts.

أخيرًا ، نستخدم الخطاف wp_enqueue_scripts لاستدعاء وظيفتنا:

الوظيفة ggl_load_styles () (if (! is_admin ()) (wp_register_style ("googleFont"، "http://fonts.googleapis.com/css؟family=Holtwood+One+SC|Rouge+Script")؛ wp_enqueue_style ("ggl" "، get_stylesheet_uri ()، array (" googleFont "))؛)) add_action (" wp_enqueue_scripts "،" ggl_load_styles ") ؛

تم عمل ملف jobs.php. الآن علينا اتخاذ الخطوة الأخيرة لاستخدام الخط المحدد. توضح الخطوة الرابعة في إرشادات Google القيم التي نحتاج إلى تمريرها إلى خاصية عائلة الخطوط من أجل استخدام خطنا. أريد أن أجعل كل ألقابي بخط Holtwood One SC:

h1 ، h2 ، h3 ، h4 ، h5 ، h6 (عائلة الخطوط: "Holtwood One SC" ، serif ؛)

وأريد أن أجعل وصف الموقع بخط Rouge Script:

وصف الموقع (عائلة الخطوط: "Rouge Script" ، مخطوطة ؛)

كل شئ! لا حاجة لفعل أي شيء آخر! لقد قمت بإضافة Google Web Fonts إلى قالب WordPress الخاص بك. استخدمها بمسؤولية!

فلاد مرزفيتش

يعد الخط جزءًا لا يتجزأ من تصميم الويب ، ويعطي الموقع تعبيراً وتمييزاً ، ويعبر عن النمط المميز للموقع ، ويرتبط مباشرة بإدراك النصوص. قد لا يتم ملاحظة الخط الذي تم اختياره جيدًا ، ولكن بدونه لن يكون هناك تلذذ لإكمال تصميم الموقع.

إذا كان لديك بالفعل خط معين مثبتًا على جهاز الكمبيوتر الخاص بك ، فما عليك سوى إضافة سطر في الأنماط.

h1 (عائلة الخطوط: SuperPuperFont ؛)

قيمة خاصية font-family هي اسم عائلة الخطوط ، وستنطبق على جميع العناوين

. ولكن ما الذي سيرى زوار الموقع إذا لم يتم تثبيت خطنا المذهل والنادر؟ هذا الموقف هو الأرجح ، لذلك إذا لم يتعرف المتصفح على الخط المعلن ، فسيستخدم الخط الافتراضي ، على سبيل المثال ، في Windows هو Times New Roman. سوف تنهار كل تصميماتنا المدروسة بعناية وتنتقل إلى الغبار بين عشية وضحاها ، لذلك نحن بحاجة إلى البحث عن الحل الأكثر شمولية. أول ما يتبادر إلى الذهن على الفور هو تنظيم تنزيل ملف الخط على كمبيوتر المستخدم وعرض النص بالخط المحدد. بالمقارنة مع الطرق الأخرى مثل عرض النص من خلال صورة ، فإن هذه الطريقة هي الأبسط والأكثر تنوعًا.

ما هي فوائد تنزيل ملف خط ثم تطبيقه عبر CSS.

• النص سهل الإضافة والتعديل.
• في المتصفح ، يمكنك استخدام البحث والعثور على العبارات المطلوبة.
• في إعدادات المتصفح ، يمكنك تقليل حجم الخط أو زيادته لتحقيق مشاهدة مريحة.
• محركات البحث فهرسة محتوى الوثيقة بشكل جيد.
• يمكن تحديد النص ونسخه إلى الحافظة ، وكذلك ترجمته إلى لغة أخرى.
• من السهل تغيير إعدادات النص مثل تباعد الأسطر واللون والحجم وما شابه ذلك باستخدام خصائص CSS.
• مرة أخرى ، باستخدام CSS ، من السهل إضافة تأثيرات مختلفة إلى النص ، مثل الظل.

كما ترى ، هناك الكثير من المزايا. هناك أيضًا عيوب ثانوية وللتوازن فهي جديرة بالذكر.

• لا تدعم جميع إصدارات المستعرض الخط القابل للتنزيل وتنسيق واحد للجميع.
• يمكن أن يشغل الملف الذي يحتوي على محرف مساحة كبيرة ، مما يؤدي إلى إبطاء تحميل صفحة الويب.

في الجدول. 1 يسرد إصدارات المتصفح وتنسيقات الخطوط التي يدعمونها.

فاتورة غير مدفوعة. 1. التنسيقات المدعومة

شكل	متصفح الانترنت	كروم	أوبرا	سفاري	ثعلب النار	ذكري المظهر	iOS
TTF	9.0+	4.0+	10.0+	3.1+	3.5+	2.2+
EOT	5.0-8.0
WOFF	9.0+	5.0+			3.6+
SVG		1.0+	9.0+	3.1+	3.5+		1.0+

التنسيق الأكثر دعمًا هو TTF. باستثناء IE حتى الإصدار 9.0 و iOS ، تفهمه جميع المتصفحات تمامًا. لذلك إذا كان لديك خط بهذا التنسيق وكنت تستهدف المتصفحات الحديثة ، فلن تضطر إلى القيام بأية خطوات إضافية. يكفي كتابة الكود التالي في الأنماط (مثال 1).

مثال 1: توصيل TTF

HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx

أولاً ، نقوم بتحميل ملف الخط نفسه باستخدام قاعدة @ font-face. بداخله ، نكتب اسم عائلة الخط من خلال معلمة font-family والمسار إلى الملف من خلال src. بعد ذلك ، استخدم الخط كالمعتاد. لذلك ، إذا احتجنا إلى تعيين خط الرأس ، فعندئذٍ بالنسبة لمحدد h1 ، كما هو موضح في المثال ، نقوم بتعيين خاصية عائلة الخط مع اسم الخط الذي تم تحميله. بالنسبة للإصدارات الأقدم من IE ، نقوم بإدراج العناصر الاحتياطية مفصولة بفواصل. في هذه الحالة ، سيكون خط العنوان هو "Comic Sans MS" لأن IE8 وما دونه لا يدعم تنسيق TTF.

تظهر نتيجة هذا المثال في الشكل. واحد.

أرز. 1. العنوان مع الخط الذي تم تنزيله

ماذا لو كنت في أمس الحاجة إلى خط مزخرف في IE8؟ لحسن الحظ ، يسمح لك @ font-face بتضمين العديد من ملفات الخطوط بتنسيقات مختلفة في نفس الوقت. المتصفح فقط لاختيار المناسب. وبالتالي ، فإن الحل الشامل الذي يعمل في جميع المتصفحات يتمثل في تحويل تنسيق TTF الحالي إلى EOT ثم تضمين كلا الملفين.

للتحويل ، هناك العديد من الخدمات عبر الإنترنت التي تسمح لك بتحميل ملف TTF والحصول على ملف EOT كمخرج. لسوء الحظ ، تواجه معظم هذه الخدمات نفس المشكلة - نتلقى الملف ، لكن اللغة الروسية غير مدعومة فيه. نتيجة لذلك ، لم يتم تحقيق النتيجة المرجوة ، والتحويل غير صحيح. من بين المواقع التي راجعتها ، كان هناك موقع يعرض النص في IE بشكل صحيح.

نذهب إلى هذا الموقع ، ونقوم بتحميل ملف TTF وانقر فوق الزر "تحويل TTF إلى EOT" ، وبعد ذلك نقوم بحفظ الملف الناتج في مجلد الخطوط. في الأنماط ، يبقى القيام ببعض الحيلة والحصول على متصفحات مختلفة لتنزيل الخط بالتنسيق الصحيح. للقيام بذلك ، قم بإضافة معلمتين src. يشير أول واحد إلى ملف EOT وهو للإصدارات الأقدم من IE. يجب أن تحتوي معلمة src الثانية على عنوانين مفصولين بفواصل ، يشير أحدهما إلى ملف TTF. الحقيقة هي أن الإصدار 8.0 والإصدارات الأحدث من IE لا تفهم الفاصلة في المعلمة src ، وبالتالي ، ستتجاهل المعلمة بأكملها. يمكن أن يكون هناك العديد من خيارات التدقيق الإملائي ، على سبيل المثال ، عنوان url المكرر ، أو تحديد اسم الخط داخل المعلمة المحلية ، أو حتى كتابة خط غير موجود. إذا تعذر على المتصفح تحميل مثل هذا الخط ، فسينتقل إلى الخط الثاني في القائمة ، وقد كتبناه بشكل صحيح. تهجئات مقبولة.

src: url (Fonts / pompadur.ttf) ، url (Fonts / pompadur.ttf) ؛
src: local (pompadur) ، url (Font / pompadur.ttf) ؛
src: local ("bla bla")، url (Fonts / pompadur.ttf)؛

يظهر في المثال 2 نسخة عملية من توصيل الخط لجميع إصدارات المتصفحات.

مثال 2: توصيل EOT

HTML5 CSS3 IE Cr Op Sa Fx

العنصر الحديث للعملية السياسية

في الواقع ، يقود المذهب السياسي لمونتسكيو النمط الأوروبي القاري للثقافة السياسية ، وهو ما ينعكس في كتابات ميشيلز.

بالنسبة لنظام iOS ، يبدو لي أنه لا فائدة من إنشاء وتنزيل خط منفصل بتنسيق SVG. جمهور المواقع التي تشاهده عبر iOS لا يزال صغيراً ، إلى جانب أنهم يحاولون تفتيح إصدار الموقع للأجهزة المحمولة ، ولا يُنصح بتنزيل بضع عشرات إضافية من الكيلوبايتات.

خطوط الويب من Google

يمكن العثور على خدمة ملائمة تعتني بروتين دعم تنسيقات الخطوط المختلفة وإصدارات المستعرض على www.google.com/webfonts. على الرغم من وجود عدد قليل نسبيًا من الخطوط المختلفة في المجموعة (هناك عدة عشرات) ، فقد تم اختيارها جميعًا بجودة عالية جدًا ومجانية للاستخدام على مواقع الويب.

قبل اختيار الخط ، قم بتبديل قيمة البرنامج النصي إلى السيريلية ، ثم سترى قائمة بالخطوط التي تدعم اللغة الروسية (الشكل 2).

أرز. 2. اختيار الخطوط في Google Web Fonts

يجب أولاً إضافة الخط الذي تريده إلى المجموعة بالنقر فوق الزر "إضافة إلى المجموعة" ، ثم على الزر "استخدام" في الركن الأيمن السفلي من الشاشة. في الصفحة التالية (الشكل 3) يمكنك أخيرًا تحديد الخطوط التي تريدها. في الوقت نفسه ، يجب أن يكون مفهوماً أن المحرف يمكن أن يحتوي على عدة أنماط ، وكل منها يزيد من حجم الملفات التي يتم تنزيلها.

أرز. 3. تحميل الخطوط في الصفحة

يمكنك توصيل الخطوط المحددة بإحدى الطرق الثلاث ، ويمكن نسخ الكود المضاف إلى أسفل الصفحة.

1. من خلال العنصر . سيبدو الخط كما يلي.

2. من خلال قاعدةimport. أدخل هذا السطر في ملف CSS الخاص بك في الأعلى.

import url (http://fonts.googleapis.com/css؟family=Philosopher&subset=cyrillic) ؛

3. من خلال JavaScript.

من حيث المبدأ ، جميع المسارات متساوية ، لذا اختر وفقًا لتفضيلاتك.

مزايا استخدام هذه الخدمة على النحو التالي.

• الخطوط مجانية للاستخدام ، ولست مضطرًا للدفع مقابلها.
• يتم "شحذ" الخطوط المقترحة للعرض على الشاشة ، ويتم تحسين الملفات وتشغل كمية صغيرة نسبيًا.
• يتم الكشف عن المتصفح تلقائيًا ويتم إصدار خط بالتنسيق المطلوب له.

تتمثل إحدى المزايا الرئيسية للخدمة في تخزين الخطوط بتنسيقات TTF و EOT و WOFF و SVG وتحميلها بعد التحقق من المتصفح. لذلك ، سيكون تنسيق EOT متاحًا فقط للإصدارات القديمة من IE.

ما إذا كنت تستخدم Google Web Fonts أم لا ، الأمر متروك لك. إذا لم تجد خطًا مناسبًا هناك ، فيمكنك دائمًا توصيل TTF الشائع والشائع. علاوة على ذلك ، فهو مدعوم بأحدث الإصدارات من جميع المتصفحات الشائعة.

أهلا! حول ذلك ، كتبت في الدرس 132 ، يمكنك أن تقرأ. وفي هذه المقالة ، سأخبرك كيف يمكنك بسهولة وبسرعة توصيل خط بموقعك من Google Fonts. في خدمة Google Font ، تحتاج إلى اختيار خط لموقعك ، ثم توصيله.

ليس من الضروري تحميل ملف الخط على الاستضافة. يكفي تسجيل كود HTML الضروري في رأس الموقع ، وفي اسم الخط الجديد. يمكن ربط الخطوط ليس فقط بموقع WordPress ، ولكن أيضًا بأي موقع آخر.

كيفية ربط خطوط جوجل بالموقع

نذهب إلى خدمة Google Font على هذا الرابط ، ونختار الخط الذي نحتاجه.
يمكن تحديد الخطوط من خلال عامل التصفية. أي أننا قمنا بتعيين المعلمات ، وبالتالي تجد الخدمة الخطوط ذات المعلمات المحددة.

يمكنك تعيين معلمات أخرى إذا كنت تريد: سمك (سمك الخط) ، مائل (مائل) ، عرض (عرض الخط).

تحتاج أيضًا إلى تحديد السيريلية إذا كان موقعك باللغة الروسية: السيريلية (السيريلية) ، أو السيريلية الموسعة (السيريلية الموسعة).

عند تحديد الخيارات ، ستعرض الخدمة جميع الخطوط الموجودة بها.

نأتي بمؤشر الماوس إلى الخط الذي نريد تثبيته على الموقع ، وبعد ذلك تظهر إعدادات / معلمات إضافية: الاستخدام السريع (الاستخدام السريع) ، والانبثاق (عرض الخط في نافذة منفصلة) والإضافة إلى المجموعة (إضافة إلى المجموعة).

يختار " استخدام سريع»وشاهد القطعة على شكل عداد السرعة على الجانب الأيمن. يظهر مدى سرعة تحميل الخط المحدد. كلما انخفض الرقم الموجود على عداد السرعة ، كان ذلك أفضل.

حتى أقل من ذلك ، يمكنك اختيار أحد الخيارات الثلاثة لتثبيت الخط على الموقع: standart أوimport أو javascript.

يحتوي كل خيار على إرشادات باللغة الإنجليزية حول كيفية توصيل الخط بالموقع بشكل صحيح. سأريك الخيار الأول اساسيلأنه أبسط.

انسخ السطر المميز باللون الأحمر ، ثم الصقه في ملف header.php بين العلامات ….

ثم نفتح ملف النمط style.css ونبحث عن الخط المطلوب تغييره ونكتب خطًا جديدًا. فقط أدخل اسم الخط الجديد. وضعنا خط Google Fonts بين علامتي اقتباس ، على سبيل المثال ، عائلة الخطوط: "Aladin" ، و Arial ، و Helvetica ، و Sans-serif.

إذا كنت لا تفهم أي شيء على الإطلاق ، ما الذي أتحدث عنه هنا ، ثم شاهد الفيديو حيث أتحدث بالتفصيل ، كيفية ربط خط google بموقع ووردبريس

______________________
الدرس 204. لكن بدون البرنامج المساعد

مصدر ممتاز للخطوط لمصممي الويب. في WPBv4بدأت في استخدام مجموعة خطوط شائعة خط جوجل: سماعات أوزوالدو لورا. طرح بعض المستخدمين أسئلة حول ما إذا كان يمكن استخدام خطوط Google في سمات WordPress وكيفية القيام بذلك. ستتحدث هذه المقالة عن كيفية إضافة Google Web Fonts إلى سمات WordPress. الصحيحدون التأثير على أداء موقعك.

البحث عن خطوط الويب من Google التي تريدها

تحتاج أولاً إلى العثور على الخطوط التي تريدها من Google. ابحث عن الخيارات بين الخطوط المقترحة في المكتبة المسماة مكتبة خطوط جوجل. بمجرد العثور على الخيار المناسب ، انقر فوق الزر استخدام سريع:

النقر فوق هذا الزر سينقلك إلى صفحة جديدة. قم بالتمرير حتى ترى نموذجًا يسمى " أضف هذا الرمز إلى موقع الويب الخاص بك":

انسخ الكود والصقه في المفكرة ، وسنستخدمه لاحقًا. عادة ما يتم استخدام خطين مختلفين على الأقل. على سبيل المثال ، في ممارستنا ، تم استخدام الخطوط أوزوالد + لورا. لذلك يجب تكرار الإجراء الموضح أعلاه للخط الثاني.

إضافة Google Web Fonts إلى موضوع WordPress الخاص بك

هناك ثلاث طرق رئيسية لإضافة خطوط من Google إلى موقع الويب الخاص بك. على سبيل المثال ، هناك طريقة قياسية ، طريقة للاستيراد @يستوردوإضافة مع جافا سكريبت. عادة ما يتم استخدام إحدى الطريقتين الأوليين.

أسهل طريقة هي فتح ملف النسق الخاص بك style.cssوالصق الكود التالي المتعلق بالخط المضاف (تذكر ، قمنا بنسخه إلى المفكرة في الخطوة الأولى):

import url (http://fonts.googleapis.com/css؟family=Lora) ؛ import url (http://fonts.googleapis.com/css؟family=Oswald) ؛

هذا ما يفعله الكثير من الناس ستوديو برس, منشأ). لكن ، مع ذلك ، هذه ليست طريقة صحيحة تمامًا لإضافة خطوط مفتوحة. طريقة الاستخدام @يستورديحظر التنزيلات المتوازية ، مما يتسبب في قيام مستعرض الويب بتنزيل ملف الخط حتى النهاية قبل متابعة تنزيل باقي محتوى موقع الويب الخاص بك. لذا في حين أن هذا يبدو مناسبًا ، إلا أنه ليس أفضل طريقة للعمل مع خط إذا كنت قلقًا بشأن سرعة وأداء موقعك. يمكنك قراءة المزيد عن هذه التفاصيل هنا.

سيكون الأفضل هو دمج الطلبات لخطوط Google المختلفة بتنسيق طلب واحدلتجنب طلبات HTTP الزائدة. هيريس كيفية القيام بذلك. إضافة الكود:

import url (http://fonts.googleapis.com/css؟family=Lora|Oswald) ؛

حتى لو اضطررت لاستخدام @يستورد، على الأقل دمج طلبات متعددة في طلب واحد.

كيفية إضافة Google Web Fonts دون المساس بأداء موقع الويب

الأفضل أن تستخدم الطريقة القياسية، والذي يستخدم الروابط بدلاً من استيراد الملفات. فقط خذ عنوانين URLمن الخطوة الأولى في هذا الدليل. اجمع بين خطين مختلفين عن طريق إضافة رمز بينهما | . ثم ضع الكود الناتج في كتلة رئيسموضوعك. للقيام بذلك ، سيكون عليك تحرير الملف header.php وأضف الكود من ورقة الأنماط إليه. يجب أن تحصل على شيء مثل ما يلي:

الهدف الرئيسيهو إضافة طلب خط في مرحلة مبكرة. حسب مدونة المشروع خطوط الويب من Googleإذا كان هناك علامة نصية قبل إعلان الخط @ font-face، فلن يعرض Internet Explorer أي شيء على الصفحة حتى يتم تحميل ملف الخط نفسه.

بعد الانتهاء من هذه الخطوة ، يمكنك ببساطة استخدام مقتطف الشفرة الناتج والخط في الملف المغلقموضوعك. سيبدو شيئا من هذا القبيل:

H1 (عائلة الخطوط: "Oswald" ، Helvetica ، Arial ، serif ؛)

هناك عدد غير قليل من الموضوعات والأطر الفرعية. لا ينصحتعديل ملفات السمات الأصل ، خاصة إذا كنت تستخدم إطار عمل ؛ لأنه سيتم مسح التغييرات التي تم إجراؤها على السمة في كل مرة تقوم فيها بتحديث إصدار إطار العمل. سيتعين عليك العمل على الوظائف الإضافية والفلاتر في السمة الأصلية أو إطار العمل الخاص بها إذا كنت تريد إضافة خطوط Google بشكل صحيح إلى السمات الفرعية.

على سبيل المثال ، إذا نظرت إلى الصفحة طباعة زرقاء، قام الفريق بإنشاء سمة WPBv4 كقالب تابع مخصص من إطار العمل منشأ. دعونا نرى كيفية إضافة خطوط ويب Google إلى سمة فرعية بناءً على منشأ.

كيفية إضافة Google Web Fonts إلى السمة الفرعية القائمة على Genesis

افتح القالب الفرعي والملف الخاص به وظائف. php وأضف الكود التالي إلى هذا الملف:

Add_action ("genesis_meta"، "wpb_add_google_fonts"، 5)؛ الدالة wpb_add_google_fonts () (صدى) "; }

الشيء الرئيسي الذي يجب القيام بههو النظر إلى الكود داخل الكتلة سفر التكوين. بشكل افتراضي ، هناك خيارات مثل ميتا- الأوصاف ، الكلمات الرئيسية ، أوراق الأنماط ، الرموز المفضلة ، إلخ. تحديد الأولوية 5 ، سنتأكد من تحميل ورقة الأنماط قبل تحميل ورقة الأنماط الرئيسية.

لسوء الحظ ، لا يمكننا تغطية جميع الأبوين الحاليين والأطر الموجودة. إذا كانت لديك أسئلة حول موضوعات معينة ، فيرجى طرحها على المطورين ومؤلفي السمات في المواضيع المناسبة لمنتديات مطوري السمات.

نصيحتنا النهائية بخصوص خطوط الويب من Googleعلى موقعك: لا تطرح أسئلة أو تجرب الخطوط التي لا تنوي استخدامها. على سبيل المثال ، إذا كنت تريد خطوطًا عادية وغامقة فقط ، فلا تستخدم أو تخصص كل نمط آخر ممكن لخط معين. نأمل أن يساعدك هذا المنشور في إعداد واستخدام Google Web Fonts بشكل صحيح على موقع WordPress الخاص بك.

تعد Google Fonts واحدة من أفضل الموارد لخطوط الويب المجانية ، وتمنحك Google عدة طرق لاستيرادها إلى موقع الويب الخاص بك. لسوء الحظ ، لا يشتمل أي منهم على محرك WordPress الشهير. هذا يعني أنه يتعين عليك إما استخدام المكونات الإضافية ، التي يوجد منها الكثير ، أو جعل يديك تتلاعب بالكود.

والخبر السار هو أنه يمكنك تثبيت أي خط من مكتبة Google على أي سمة WordPress تقريبًا دون الكثير من المتاعب. كيف بالضبط - سنعلمك اليوم.

هناك خياران - توصيل المكون الإضافي ، أو العبث بملف function.php قليلاً.

لكن أولاً ، أود أن أسرد مزايا وعيوب خطوط Google ، بحيث يمكنك أخيرًا أن تقرر ما إذا كنت ستستخدمها في مشاريعك أم لا.

خطوط الويب الجيدة والسيئة من Google

عندما يتعلق الأمر بخطوط الويب ، يعد Google أحد أفضل الخيارات من حيث الأداء . كل ذلك بسبب التصميم خفيف الوزن ونظام التخزين المؤقت. لا يتعين على الزائرين انتظار تحميل خطوط Google إذا كانوا قد زاروا مؤخرًا موقعًا يستخدمها. يمكن للخطوط الشائعة مثل Open Sans تحسين أداء موقعك عن طريق تقليل أوقات التحميل.

ميزة أخرى هي أن تسمح لك Google بتنزيل هذه الخطوط ، حتى تتمكن من استخدامها في تخطيطاتك.

وأخيرا المنصة مجانية تمامًا . كل ما عليك فعله لبدء استخدام الخطوط هو تسجيل الدخول أو الحصول على حساب Gmail (ومن ليس لديه Gmail اليوم؟).

من النواقص يمكنك تحديد ذلك اختيار خطوط google صغير كثير منهم متشابه مع بعضهم البعض. عليك قضاء الكثير من الوقت في البحث للعثور على خط أصلي لائق. يوجد عدد قليل جدًا من الخطوط للغة السيريلية.

بالإضافة إلى ذلك ، هناك شائعة مخاوف أمنية - تحتاج إلى تقديم بعض البيانات الشخصية عند تثبيت الخطوط من Google على موقعك.

كيفية تثبيت خطوط جوجل باستخدام إضافات ووردبريس

إذا كنت تبحث عن مكونات إضافية ، فإن أول شيء ستراه في نتائج البحث هو WP Google Fonts وإضافات Easy Google Web Fonts . هذان بالفعل اثنان من أفضل المكونات الإضافية.

لا تعد المكونات الإضافية الحل الأمثل لتثبيت خطوط Google على موقع WordPress - ليس فقط من حيث الأداء ، ولكن أيضًا لأن المكونات الإضافية لا تسمح لك بتحديد أجزاء معينة من النص. ومع ذلك ، إذا كنت أنت أو عميلك مقتنعين بأنه من الأفضل استخدام المكونات الإضافية ، فابحث في هذين الخيارين.

يتيح لك هذا المكون الإضافي استهداف عناصر محددة مثل عناوين H1 والفقرات والاقتباسات. يمكنك أيضًا الحصول على خيار CSS مخصص لمزيد من التصميم للخطوط الفردية. تعد إضافة خطوط Google وتخصيصها على موقع WordPress الخاص بك أمرًا سهلاً للغاية باستخدام هذا المكون الإضافي.

ترقى Easy Google Web Fonts إلى اسمها وتجعل تثبيت Google Fonts أمرًا سهلاً للغاية ، حتى للمبتدئين. يمكنك استخدام ميزة Live Preview لعرض الخطوط واختبارها وتحسينها دون مغادرة موقع الويب ، وإنشاء قواعد الخط الخاصة بك دون كتابة سطر واحد من التعليمات البرمجية.

الطريقة الصحيحة لتثبيت خطوط Google في قالب WordPress

في النهاية ، نأتي إلى خيار فتح ملف function.php والتلاعب بالكود قليلاً. قبل أن تتمكن من القيام بذلك ، تحتاج إلى تحديد خط من مكتبة Google. من أجل الحصول على مثال ، دعنا نحاول أن نأخذ ملفًا شائعًا جدًا افتح Sans.

ثم تحتاج إلى اختيار نمط الخط - عادي أو غامق أو مائل. تستطيع فعلها بنفسك :)

بعد تحديد الأنماط ، ستمنحك Google مقتطفًا من التعليمات البرمجية. يبدو لنا مثل هذا:

بالإضافة إلى ذلك ، حصلنا على نمط CSS:

عائلة الخطوط: "Open Sans"، sans-serif؛

حان الوقت الآن لفتح ملف function.php (مسار الملف: wp-content / theme / yourtheme). في نهاية الملف ، أضف وظيفة جديدة:

وظيفة load_fonts ()
{
wp_register_style ("et-googlefonts" ،
"http://fonts.googleapis.com/css؟family=Open+Sans:300italic،400italic،700italic،400،700،300") ؛ wp_enqueue_style ("et-googlefonts") ؛
}
add_action ("wp_print_styles"، "load_fonts") ؛

مفتاح هذه الميزة هو الأمر "wp_enqueue_style" ، والذي يجعل WordPress يستدعي أوراق أنماط الخط في رأس كل صفحة. إذا نظرت عن كثب ، فسترى أننا أزلنا الرابط href = و rel = 'stylesheet' type'text / css 'من الكود الذي قدمته لنا Google وستحتاج إلى فعل الشيء نفسه إذا كنت تريد إضافة أي خط Google آخر لـ موقع WordPress الخاص بك.

كل ما عليك فعله الآن هو فتح ملف CSS الرئيسي ولصقه بنمط Open Sans. تنطبق القواعد المعتادة هنا ، لذا أضف الشفرة التالية إلى ورقة الأنماط الخاصة بك ، واحفظها وقم بتحديثها:

الجسم
{
الخط: عادي 1em "Open Sans" ، sans-serif ؛
اللون: # 313131 ؛
}

هذا النمط سيعمل في جميع أنحاء الموقع. يمكنك تعيين نمط مختلف لأجزاء النص الفردية:

نص عريض
{
الخط: غامق 1em "Open Sans"، sans-serif؛
}

كما ترى ، الأمر بسيط جدًا في الواقع. حاول وتحقق من النتيجة :)