إضافة الخط الأميري في مدونات بلوقر

الخط الأميري من أجمل الخطوط للكتابة العربية وبالذات في النصوص الطويلة والكتب. ومطوره الطبيب خالد حسني [khaledGhetas@] الذي يقول عنه “الخط الأميري هو إحياء و محاكاة للخط الطباعي الجميل الذي تميزت به مطبعة بولاق منذ أوائل القرن العشرين، و التي عرفت أيضا بالمطبعة الأميرية، و من هنا أخذ الخط اسمه.”[amirifont.org].

لإضافة هذا الخط إلى مدونة بلوقر لمن لا هو مثلي لا يجيد أكواد HTML ولا CSS، اضغط على زر

 1. قالب|Template ثم >> تخصيص ثم >> متقدم >> ثم >> إضافة CSS >> ثم الصق الكود التالي واضغط على [تطبيق على المدونة]:

@font-face { font-family: 'Amiri';
 font-style: normal;
 font-weight: 400;
 src: local('Amiri'), local('Amiri-Regular'),
 url(http://fonts.gstatic.com/s/amiri/v7/7uGqdnOlOhcFsG_5_cvW9A.woff2) format('woff2'), url(http://fonts.gstatic.com/s/amiri/v7/D_PVP9E1Aq8vyzac0KeksA.woff) format('woff');
 }
@font-face { font-family: 'Amiri';
 font-style: normal;
 font-weight: 700;
 src: local('Amiri Bold'), local('Amiri-Bold'),
 url(http://fonts.gstatic.com/s/amiri/v7/mmHwJz0KRs9eU5Fnp3rH_vesZW2xOQ-xsNqO47m55DA.woff2) format('woff2'),
url(http://fonts.gstatic.com/s/amiri/v7/nO3N_1h-pW60LUWtaG4Bs_esZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
 @font-face { font-family: 'Amiri';
 font-style: italic;
 font-weight: 400;
 src: local('Amiri Slanted'), local('Amiri-Slanted'),
 url(http://fonts.gstatic.com/s/amiri/v7/-lr-LWHMSMdNwvzVms9K_g.woff2) format('woff2'),
 url(http://fonts.gstatic.com/s/amiri/v7/A2heUVapL2_UIIJmxv5OFA.woff)
 format('woff');
 }
@font-face { font-family: 'Amiri';
 font-style: italic;
 font-weight: 700;
 src: local('Amiri Bold Slanted'), local('Amiri-BoldSlanted'),
 url(http://fonts.gstatic.com/s/amiri/v7/l_NsyFgdaG0LOV95cZUpq_k_vArhqVIZ0nv9q090hN8.woff2)
 format('woff2'),
url(http://fonts.gstatic.com/s/amiri/v7/l_NsyFgdaG0LOV95cZUpqxsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}

ثم بعد ذلك اضغط قالب واختر >> تحرير HTML  ثم ابحث عن font-family أو font family ستجد داخل القوس مجموعة من الخطوط أو ربما خط واحد. ضع ‘Amiri’ على هذه الصيغة

font-family: 'Amiri', serif; 

 ربما تكون تحت إسم المتغير body font أو Page  أو Page font

هذه أمثلة من مدونات مختلفة أضفت اللون الأحمر فقط :

     <Variable name="body.font" description="Font" type="font"
         default="normal normal 15px 'Amiri', Arial, Tahoma, Helvetica, FreeSans, sans" value="normal normal 15px Amiri, Arial, Tahoma, Helvetica, FreeSans, serif"/>
     <Variable name="body.text.color" description="Text Color" type="color" default="#333333" value="#333333"/>

 هذا مثال آخر :

Group description="Body Text" selector="body">
     <Variable name="body.font" description="Font" type="font"
         default="normal normal 16px 'Amiri',Droid Arabic Naskh, Tahoma,Arial, Helvetica, FreeSans, serif" value="normal normal 20px Amiri, serif"/>
     <Variable name="body.text.color" description="Text Color" type="color" default="#666666" value="#525252"/>
   </Group>

مثال ثالث:

  <Group description="Page">
     <Variable name="page.text.font" description="Font" type="font"
         default="'Amiri', HelveticaNeue-Light, 'Helvetica Neue', Helvetica, Arial, serif" value="'Amiri', HelveticaNeue-Light, 'Helvetica Neue', Helvetica, Arial, serif"/>
     <Variable name="page.text.color" description="Text Color" type="color"
         default="#333333" variants="#333333" value="#333333"/>
     <Variable name="body.background.color" description="Background Color" type="color"
         default="#EEEEEE"
       variants="#dfdfea,#d9f4f4,#e4f2eb,#e9ead9,#f4eed9,#fdead9,#f8e3e0,#fdebed,#ebe5e3" value="#dfdfea"/>
   </Group>

مثال رابع :

body { margin:0; padding:0; background:$pagebgcolor url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgzysjxpb08OTd7X74tZhyphenhyphenZqEhLex_AdaE3lmwvR1vUFl0nNEHfLImmKFJt9hfyAEr9egrDyukxiDy41H6OSwiYA7zEFs0QMseXYfA_v2VijilzUruONj5j1YnEcIk8QhSbsX-nHeIiSo/s1600/topuc.gif) repeat-x 0 -30px; font-family: 'Amiri', Tahoma, arial; text-align:center; font-size:12px ,serif}

وبهذا تظهر مدونتك بالخط الأميري.

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