Alsalam Alykoum> > Hello everyone,> > anyone please know how to add a custom fonts “Arabic” to Dwan theme?> > I have the font file it’s .ttf> > and i change to RTL from theme.liquid> > thanks & stay healthy
Topic summary
Adding a custom Arabic font to the Shopify Dawn theme. The requester had a .ttf file and had already set RTL in theme.liquid.
Recommended method:
- Convert .ttf to web-safe formats (.woff, .woff2, .eot) using a tool like transfonter.org for broad browser support.
- Upload the converted files to the theme’s assets directory.
- Declare the font with @font-face in base.css/style.scss/theme.css and then apply it to desired elements.
The requester shared their store URL and tried an alternative approach by uploading the font to Content files, following community and blog guides. This alternative also worked.
Images were included to illustrate the asset upload location and example CSS, but they are not essential to reproduce the steps.
Outcome: The font integration was successful and confirmed by the requester. The issue is resolved with no pending questions.
Hi @Abdullah_6
To integrate a custom font into your website, follow these steps:
-
Convert your .ttf file to .woff, .woff2, and .eot formats to ensure compatibility across all browsers. You can use the following website for conversion: https://transfonter.org/
-
Upload the converted font files to your assets directory.
- Incorporate the font into your styles by adding it to your base.css, style.scss, or theme.css file. Here’s an example of how to do this:
- Apply the font to any element as needed.
I hope this helps! If you need further assistance, feel free to share your store URL.
1 Like
Thanks @Priyanka_1 , i just try to upload the file in content files,
as in this way: Here by @MRamzan
Following these steps : Here
Thanks again & have a nice day
It works perfectly, Thanks