Custom font in magento


0  0 2017-02-22 09:10:08

1. Visit the font link and download the font to be used in website.
For ex:
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(''); /*URL to font*/
Note: Mention your font name and path where the font file has been uploaded.


b) Option 2
Certain fonts don’t work in all the browsers, for that you can use ( generator to convert the font in the form of CSS style sheet and can use the same code in CSS file.
Steps to be followed:
1. Visit the link(
2. Click on upload fonts and upload your font.ttf file.

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.

For ex:
    font-family: 'trenchthin';
    src: url('trench100free-webfont.woff2') format('woff2'),
    url('trench100free-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
Note: Here, trenchthin is the FONT name.

Once the code is added to CSS file. You can use it anywhere. Just you need to use your class name and change the font family name.
    font-family: 'YourFontName';

-Where class name is your selector


Comments (0)

Post Your Comments


Hong Kong Office

Find Us On