Use new font in RTL

alireza_yassini
Inactive member
Topic Author
New Member

3 years 2 months ago #48141 by alireza_yassini

Use new font in RTL was created by alireza_yassini

Hello,
I have a font in woff , eot and ttf format and I want to use this font in RTL mode.
How can I do this?
Thanks for your help in advance.

Please Log in to join the conversation.

milos
Support Staff
Moderator

3 years 2 months ago #48146 by milos

Replied by milos on topic Use new font in RTL

Hello,

1. You must have this font in EOT and TTF format to make sure it will work on all browsers.

2. Upload fonts in /templates/sparky_framework/css folder. Font file names should be in example myfont.ttf and myfont.eot

3. Go to the template settings and under Custom > CSS, in the beginning, add this

Code:

@font-face {
	font-family: 'MyFont';
	src: url('myfont.eot');
	src: local('☺'), url('myfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

4. Use your font in CSS, for example like this:

Code:

h1 {
font-family: "MyFont", Arial;
}

You can't use this font in template settings, under the Style tab, as it supports only system and Google fonts.

Regards,
Milos

Please Log in to join the conversation.

alireza_yassini
Inactive member
Topic Author
New Member

3 years 2 months ago #48150 by alireza_yassini

Replied by alireza_yassini on topic Use new font in RTL

Hello,
my font name is ab and I upload it in eot and ttf in CSS folder.
I add the code to custom CSS too but about the fourth step - 4. Use your font in CSS, I see custom.css and custom_rtl.css and I add this code to both.
I'm sure about the font it's working fine in Persian.
Here is the sample site working the same font:
livetemplate.ir/maximum/

This message contains confidential information

Thanks,

Please Log in to join the conversation.

milos
Support Staff
Moderator

3 years 2 months ago #48152 by milos

Replied by milos on topic Use new font in RTL

Hello,

Perhaps the ab.eot file is missing in /templates/sparky_framework/css folder. Also, TTF fonts are sometimes not readable by browsers. So, it's recommended to use WOFF font. More details: www.w3schools.com/cssref/css3_pr_font-face_rule.asp

When you load the font successfully using @font-face rules, then you can apply this font to some elements or classes. In your example, I tried to apply this font to the body element, but since the font is not loaded or compatible, it shows the default browser font.

Code:

body {
	padding: 15px;
  	font-family: ab;
}

Regards,
Milos

Please Log in to join the conversation.

alireza_yassini
Inactive member
Topic Author
New Member

3 years 2 months ago #48153 by alireza_yassini

Replied by alireza_yassini on topic Use new font in RTL

Hello,
I checked again and the font has already been uploaded.
I send the panel host details for you.

This message contains confidential information

Check the print folder.
Thanks,

Please Log in to join the conversation.

milos
Support Staff
Moderator

3 years 2 months ago #48155 by milos

Replied by milos on topic Use new font in RTL

Hello,

Yes, you are right. But for some reason, the font is not recognized in the browser. I don't know the Persian language, maybe it's an incomplete font, maybe it's not in proper format... If you can, please consult the font authors.

The approach I explained is a proper way to load the external font into the website. Please try with a different font.

Regards,
Milos

Please Log in to join the conversation.

Time to create page: 0.289 seconds