Dear sir,
I have changed font name for print packing slip from admin panel
and when i press preview it works ok
but when i press print packing slip button it shows default font again and new font not applied in printed slip.
help please
How did you change the font? Please provide us with more details
I have edited print_packing_slip.tpl file and changed font to my desired utf-8 arabic.
and also changed fonts in notifications>documents>packing slip>code snippets
What Email templates mode is used in your store?
sorry, i didnt get what you mean.
which email template modes do we have?
Im using bright theme on my store
Please check the Settings > Appearance page. There, at its bottom, you can find this setting. Could you please let me know its value?
1 Like
In this case there is no need to edit TPL templates, since all the data is stored in the database.
In this case you need to make the necessary changes in the Header snippet at the Administration > Notifications > Code snippets page.
2 Likes
Already did it. font name: shabnam-light-fd
and in preview works ok.
but when i generate packing slip for printing, font not applied and shows default arabic font and it prints with default old font
How did you add the font? I think, it should be loaded by URL (e.g. from Google) and not stored in the file system
As @ecomlabs correctly states, please try to add the font explicitly to the head of the HTML document (in other words - snippet) used to generate the email notification. See for example these instructions:
1 Like
I have added font family code in themes/bright_theme / styles / data / bright.css
@font-face {
font-family: ‘Shabnam-Light-FD’;
src: url(‘/design/themes/bright_theme/media/fonts/Shabnam-FD.eot’); /* IE9 Compat Modes /
src: url(‘/design/themes/bright_theme/media/fonts/Shabnam-FD.eot’) format(‘embedded-opentype’), / IE6-IE8 /
url(‘/design/themes/bright_theme/media/fonts/Shabnam-FD.woff2’) format(‘woff2’), / Super Modern Browsers /
url(‘/design/themes/bright_theme/media/fonts/Shabnam-FD.woff’) format(‘woff’), / Pretty Modern Browsers /
url(‘/design/themes/bright_theme/media/fonts/Shabnam-FD.ttf’) format(‘truetype’); / Safari, Android, iOS */
}
my snippet code should be like below ?
<head>
<link rel="stylesheet" href="/design/themes/bright_theme/media/fonts/Shabnam-Light-FD">
<style>
body {
font-family: "Shabnam-Light-FD", sans-serif;
}
</style>
</head>
CSS from the theme does not affect the styles in the email notifications, so it won’t work there.
The Header snippet already contains the head element, please make sure, you won’t add it twice. Simply add the
<link rel="stylesheet" href="/design/themes/bright_theme/media/fonts/Shabnam-Light-FD">
<style>
body {
font-family: "Shabnam-Light-FD", sans-serif;
}
</style>
into the head element. Also please replace
href="/design/themes/bright_theme/media/fonts/Shabnam-Light-FD"
with the actual URL of the font.
1 Like
the actual url of my font is
/design/themes/bright_theme/media/fonts/
but your code calling for font family.
I dont know how to create font-familiy for my fonts.
another Idea is that where sans-serif font familiy calling from?
so i can edit it’s font-family file and change to my own custom fonts.
i have created a css file include below code:
@font-face {
font-family: 'Shabnam-Light-FD';
src: url('/design/themes/bright_theme/media/fonts/Shabnam-FD.eot'); /* IE9 Compat Modes */
src: url('/design/themes/bright_theme/media/fonts/Shabnam-FD.eot') format('embedded-opentype'), /* IE6-IE8 */
url('/design/themes/bright_theme/media/fonts/Shabnam-FD.woff2') format('woff2'), /* Super Modern Browsers */
url('/design/themes/bright_theme/media/fonts/Shabnam-FD.woff') format('woff'), /* Pretty Modern Browsers */
url('/design/themes/bright_theme/media/fonts/Shabnam-FD.ttf') format('truetype'); /* Safari, Android, iOS */
font-weight: normal;
font-style: normal;
}
body {
margin: 0;
background-color: hsl(0, 0%, 100%);
color: hsl(0, 0%, 10%);
line-height: 1.5;
font-family: Shabnam-Light-FD, "PT Sans", Calibri, Tahoma, sans-serif;
}
the issue is how to call this css file with below code in snippet file
<link rel="stylesheet" href="urlofmycssfile ?family=Shabnam-Light-FD">
<style>
body {
font-family: "Shabnam-Light-FD", sans-serif;
}
</style>
You should understand that the font files are stored on your server and will not be processed by e-mail client at all
1 Like
Ok, but notice that I wanted to use it for print packing slip.
not for email.