إضافة خطوط مخصصة
لا يمكن أن تحتوي صفحات AMP على صفحات أنماط خارجية، باستثناء الخطوط المخصصة. ويمكنك تضمين الخطوط المخصصة في صفحتك بطريقتين:
- من خلال علامة
<link>
(مزودي الخطوط المدرجين في قائمة السماح فقط) - عبر
@font-face
(لا قيود مفروضة، جميع الخطوط مسموح بها)
1. استخدام <link>
استخدم علامة <link>
(عادة في رأس صفحتك)، مثل:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
الأصول التالية مدرجة في قائمة السماح ومسموح بها لعرض الخط عبر علامات الارتباط:
- Typography.com: https://cloud.typography.com
- Fonts.com: https://fast.fonts.net
- Google Fonts: https://fonts.googleapis.com
- Typekit: https://use.typekit.net
- Font Awesome: https://maxcdn.bootstrapcdn.com, https://use.fontawesome.com
2. استخدام @font-face
بدلًا عن ذلك، يمكنك استخدام @font-face
ضمن صفحة الأنماط الخاصة بـ AMP لديك:
<style amp-custom> @font-face { font-family: "Bitstream Vera Serif Bold"; src: url("https://somedomain.org/VeraSeBd.ttf"); } body { font-family: "Bitstream Vera Serif Bold", serif; } </style>
ملحوظة – يجب إحضار الخطوط المضمنة في
@font-face
عبر مخطط HTTP أو HTTPS. -
Written by @pbakaus