examples: Update font utility classes to new v5 versions (#32449)

* site: Fix .font-italic to .fst-italic in blog example

The font utility class was renamed from .font-italic to .fst-italic
but a few references didn't get updated.

* site: Fix .font-weight-* to .fw-* in RTL examples

These font utility classes were renamed from .font-weight-* to .fw-*
but a few references didn't get updated.

Co-authored-by: XhmikosR <xhmikosr@gmail.com>

site/content/docs/5.0/examples/album-rtl/index.html

@@ -41,7 +41,7 @@ direction: rtl
   <section class="py-5 text-center container">
     <div class="row py-lg-5">
       <div class="col-lg-6 col-md-8 mx-auto">
-        <h1 class="font-weight-light">مثال الألبوم</h1>
+        <h1 class="fw-light">مثال الألبوم</h1>
         <p class="lead text-muted">شيء قصير وقائد حول المجموعة أدناه - محتوياتها ، ومنشئها ، وما إلى ذلك. اجعلها قصيرة ولطيفة ، ولكن ليست قصيرة جدًا حتى لا يتخطى الناس ببساطة هذه المجموعة تمامًا.</p>
         <p>
           <a href="#" class="btn btn-primary my-2">الدعوة الرئيسية للعمل</a>

site/content/docs/5.0/examples/blog-rtl/index.html

@@ -47,9 +47,9 @@ include_js: false
 <main class="container">
   <div class="p-4 p-md-5 mb-4 text-white rounded bg-dark">
     <div class="col-md-6 px-0">
-      <h1 class="display-4 font-italic">عنوان مشاركة مدونة مميزة أطول</h1>
+      <h1 class="display-4 fst-italic">عنوان مشاركة مدونة مميزة أطول</h1>
       <p class="lead my-3">أسطر نصية متعددة تشكل الجزء الأمامي ، لإعلام القراء الجدد بسرعة وكفاءة حول أكثر الأشياء إثارة للاهتمام في محتويات هذه المشاركة.</p>
-      <p class="lead mb-0"><a href="#" class="text-white font-weight-bold">أكمل القراءة...</a></p>
+      <p class="lead mb-0"><a href="#" class="text-white fw-bold">أكمل القراءة...</a></p>
     </div>
   </div>
 
@@ -86,7 +86,7 @@ include_js: false
 
   <div class="row">
     <div class="col-md-8">
-      <h3 class="pb-4 mb-4 font-italic border-bottom">
+      <h3 class="pb-4 mb-4 fst-italic border-bottom">
         من Firehose
       </h3>
 
@@ -158,12 +158,12 @@ include_js: false
 
     <div class="col-md-4">
       <div class="p-4 mb-3 bg-light rounded">
-        <h4 class="font-italic">حول</h4>
+        <h4 class="fst-italic">حول</h4>
         <p class="mb-0">بل مدن وإعلان بتخصيص إيطاليا. حيث عقبت أساسي وتنامت و, وباءت وايرلندا وقد بـ, مرمى سقطت إحكام يكن و. كل ومن تصفح بالرّغم الاندونيسية. ٣٠ انتباه والروسية كلّ, الوراء ولكسمبورغ عن لكل. الخاصّة والإتحاد لان بل, وقد الهجوم وتنامت و.</p>
       </div>
 
       <div class="p-4">
-        <h4 class="font-italic">أرشيف</h4>
+        <h4 class="fst-italic">أرشيف</h4>
         <ol class="list-unstyled mb-0">
           <li><a href="#">مارس 2014</a></li>
           <li><a href="#">شباط 2014</a></li>
@@ -181,7 +181,7 @@ include_js: false
       </div>
 
       <div class="p-4">
-        <h4 class="font-italic">في مكان آخر</h4>
+        <h4 class="fst-italic">في مكان آخر</h4>
         <ol class="list-unstyled">
           <li><a href="#">GitHub</a></li>
           <li><a href="#">Twitter</a></li>

site/content/docs/5.0/examples/blog/index.html

@@ -46,7 +46,7 @@ include_js: false
 <main class="container">
   <div class="p-4 p-md-5 mb-4 text-white rounded bg-dark">
     <div class="col-md-6 px-0">
-      <h1 class="display-4 font-italic">Title of a longer featured blog post</h1>
+      <h1 class="display-4 fst-italic">Title of a longer featured blog post</h1>
       <p class="lead my-3">Multiple lines of text that form the lede, informing new readers quickly and efficiently about what’s most interesting in this post’s contents.</p>
       <p class="lead mb-0"><a href="#" class="text-white fw-bold">Continue reading...</a></p>
     </div>
@@ -85,7 +85,7 @@ include_js: false
 
   <div class="row">
     <div class="col-md-8">
-      <h3 class="pb-4 mb-4 font-italic border-bottom">
+      <h3 class="pb-4 mb-4 fst-italic border-bottom">
         From the Firehose
       </h3>
 
@@ -156,12 +156,12 @@ include_js: false
 
     <div class="col-md-4">
       <div class="p-4 mb-3 bg-light rounded">
-        <h4 class="font-italic">About</h4>
+        <h4 class="fst-italic">About</h4>
         <p class="mb-0">Saw you downtown singing the Blues. Watch you circle the drain. Why don't you let me stop by? Heavy is the head that <em>wears the crown</em>. Yes, we make angels cry, raining down on earth from up above.</p>
       </div>
 
       <div class="p-4">
-        <h4 class="font-italic">Archives</h4>
+        <h4 class="fst-italic">Archives</h4>
         <ol class="list-unstyled mb-0">
           <li><a href="#">March 2014</a></li>
           <li><a href="#">February 2014</a></li>
@@ -179,7 +179,7 @@ include_js: false
       </div>
 
       <div class="p-4">
-        <h4 class="font-italic">Elsewhere</h4>
+        <h4 class="fst-italic">Elsewhere</h4>
         <ol class="list-unstyled">
           <li><a href="#">GitHub</a></li>
           <li><a href="#">Twitter</a></li>