Google’s Webfonts

Put the following in an HTML page

<link href="https://fonts.googleapis.com/css?family=Cormorant" rel="stylesheet"> 
<div style="font-family: 'Cormorant', serif;font-size: 48px;  text-align: center;">Know Yourself</div>

See the output below

Know Yourself

What about Arabic text?

<link href="https://fonts.googleapis.com/css?family=Aref+Ruqaa" rel="stylesheet"> 
<div style="font-family: 'Aref Ruqaa', serif;font-size: 48px;">آفة العقل الهوى</div>
آفة العقل الهوى

For more Google fonts, check out this link

It’s not just Google

There are not many suppliers of Arabic webfonts. And while Google is the best one it is not the only source. I found this website, for example, which offers more Arabic webfonts but not with the same quality (the characters don’t even map to Arabic characters in some cases). See the usage below for Latin and Arabic scripts.

The devil is in the details
<link href="//db.onlinewebfonts.com/c/f1f423da5ef965e1fc6aa23caa546e71?family=Technical" rel="stylesheet" type="text/css">
<style>
@import url(//db.onlinewebfonts.com/c/f1f423da5ef965e1fc6aa23caa546e71?family=Technical);
@font-face {font-family: "Technical";
    src: url("//db.onlinewebfonts.com/t/f1f423da5ef965e1fc6aa23caa546e71.eot");
    src: url("//db.onlinewebfonts.com/t/f1f423da5ef965e1fc6aa23caa546e71.eot?#iefix") format("embedded-opentype"),
    url("//db.onlinewebfonts.com/t/f1f423da5ef965e1fc6aa23caa546e71.woff2") format("woff2"),
    url("//db.onlinewebfonts.com/t/f1f423da5ef965e1fc6aa23caa546e71.woff") format("woff"),
    url("//db.onlinewebfonts.com/t/f1f423da5ef965e1fc6aa23caa546e71.ttf") format("truetype"),
    url("//db.onlinewebfonts.com/t/f1f423da5ef965e1fc6aa23caa546e71.svg#Technical") format("svg");}
</style>
<div style="font-family: 'Technical', serif;font-size: 48px;  text-align: center;">The devil is in the details</div>
هنا بعض التفاصيل

<link href="//db.onlinewebfonts.com/c/c9ad35a9667e1beb3d96bf1a51c9dfde?family=PFDinTextArabicW21-XBlack" rel="stylesheet" type="text/css"/>
<style>
@import url(//db.onlinewebfonts.com/c/c9ad35a9667e1beb3d96bf1a51c9dfde?family=PFDinTextArabicW21-XBlack);
@font-face {font-family: "PFDinTextArabicW21-XBlack";
    src: url("//db.onlinewebfonts.com/t/c9ad35a9667e1beb3d96bf1a51c9dfde.eot");
    src: url("//db.onlinewebfonts.com/t/c9ad35a9667e1beb3d96bf1a51c9dfde.eot?#iefix") format("embedded-opentype"),
    url("//db.onlinewebfonts.com/t/c9ad35a9667e1beb3d96bf1a51c9dfde.woff2") format("woff2"),
    url("//db.onlinewebfonts.com/t/c9ad35a9667e1beb3d96bf1a51c9dfde.woff") format("woff"),
    url("//db.onlinewebfonts.com/t/c9ad35a9667e1beb3d96bf1a51c9dfde.ttf") format("truetype"),
    url("//db.onlinewebfonts.com/t/c9ad35a9667e1beb3d96bf1a51c9dfde.svg#PFDinTextArabicW21-XBlack") format("svg");
}
</style>
<div style="font-family: 'PFDinTextArabicW21-XBlack', serif;font-size: 48px;  text-align: center;">هنا بعض التفاصيل</div>

RTL Text

The above is easy for short sentences. But, what about alignment and right to left (RTL) text? From Stackoverflow

<p dir="rtl" lang="ar" style="color:#ff0000;font-size:20px;">رَبٍّ زِدْنٍي عِلمًا و فهما و أدبا!</p>

Output

رَبّ زِدْني عِلمًا و فهما و أدبا!

Things can get even more complicated. What about itemized lists and paragraphs? Is there a way to convert all that html?

Output from Word Processors

You can copy HTML from a Word processor such as LibreOffice Writer and paste it into an HTML. I have yet to figure out how to do this in Word. Example below:

Resources