Our Blog

HOW TO ADD CUSTOM FONT IN MAGENTO?

1. Visit the font link and download the font to be used in website.
For ex: http://www.fontspace.com/nimavisual/trench
Once the file is downloaded, you can see two types of font file i.e. .otf (Open Type Font) and .ttf (True Type Font).
Note: Here Font name is TRENCH

2. Upload the font.ttf file in your font folder.
(If there is no such folder existing, you can upload the file in your CSS folder)

3. Navigate to your website CSS file through cpanel or via FTP. (If you are using theme with magento, navigate to theme’s CSS folder)
For ex: /skin/frontend/smartwave/porto/css

4. Edit the custom.css file and write the following syntax:
a) Option 1
@font-face {
font-family: 'YourFontName'; /*a name to be used later*/
src: url('http://domain.com/fonts/font.ttf'); /*URL to font*/
}
Note: Mention your font name and path where the font file has been uploaded.

3. Click on the checkbox – Agreement and download the zip file.
4. Open the zip file. Upload .woff and .woff2 files to font folder.
5. Open the style sheet file in your editor. Copy the code and paste in your main CSS file.