How to add a custom Font, Arabic included!
Latest update: February 4, 2019 | Reading time: 1 to 2 minutesHello,
All Plethora’s templates are 100% .po/.mo compatible.
That means that we provide all necessary files that will help you do a perfect translation.
In case that you wish to add a custom font, go to Theme Options > Advanced, and add the following lines in the CUSTOM CSS field:
@font-face {
font-family: 'Droid Arabic Naskh';
src: url('http://openfontlibrary.org/assets/fonts/droid-arabic-naskh/fd4b27f3b16500224174d4930a24ddfc/0968720cd2bfeb792da963c918c4b9a6/DroidArabicNaskhBold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Droid Arabic Naskh';
src: url('http://openfontlibrary.org/assets/fonts/droid-arabic-naskh/fd4b27f3b16500224174d4930a24ddfc/791f577ddc8e608ef0d842d070bcac23/DroidArabicNaskhRegular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
html, body,
h1,h2,h3,h4,h5,h6, .h1,.h2,.h3,.h4,.h5,.h6,
header, .full_page_photo, .section_header {
font-family: 'Droid Arabic Naskh';
}
Please, note that this is just an example code. You’ll have to upload your font files to your server, and then change the appropriate path in the src: URL(‘/…) field above. If for example, you’ve uploaded your font files in your uploads folder, you’ll have to replace the src with the following string:
src: URL(‘/wp-content/uploads/myfont.ttf’);
In the example above, We’ve used some free Arabic fonts from http://openfontlibrary.org/.
For more help, check also this nice tutorial!