AFCP, Arabic Font for Common Phrases, is a set of CSS rules that provide common phrases for Arabic language. You can customize colors, rotatation, size, and any powerful CSS delaration.
All what we want to do is adding html element with a proper class, for example:
<span class="afcp afcp-5x afcp-islam"></span>Just add your following code into your <head> element:
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/amughrabi/afcp/master/bin/afcp-v1.min.css"/>You can download AFCP as a zip file, and add it as a part of your project, for example:
Place all fonts from the dwonloaded zip file into your project /fonts/ dirctory, and place the afcp.css file into your proper directory (anywhere in your webapp directory), then open the afcp.css and change @font-face font paths there:
@font-face {
font-family:"AFCP";
src:url("${FONT_PATH}/AGA_Islamic_Phrases.eot?") format("eot"),
url("${FONT_PATH}/AGA_Islamic_Phrases.woff") format("woff"),
url("${FONT_PATH}/AGA_Islamic_Phrases.ttf") format("truetype"),
url("${FONT_PATH}/AGA_Islamic_Phrases.svg#AGAIslamicPhrases") format("svg");
font-weight:normal;
font-style:normal;
}Finally, you need to include the edited afcp.css into your project <head> element:
<link rel="stylesheet" type="text/css" href="${AFCP_PATH}/afcp.css"/>We are using font2u.com font that available us to draw more than 90 common arabic phrases, and these phrases are listed as bellow:
This font is for personal use.
See the Pen Arabic Font for Common Phrases - AFCP by Ahmad AlMughrabi (@amughrabi) on CodePen.
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>