Use Custom Fonts with @font-face on WordPress

1. Selector a Font, for instance, Noto Sans;

2. Use Squirrels @font-face generator to convert your chosen font to all the formats needed and will generate the CSS code you will require.

3. Upload Font Files To Your Site
The next step is uploading the font to your site. The four files you need to upload are the .eot, .svg, .woff, and .ttf formats from the downloaded .zip file. The fonts should be uploaded to the base directory of you chosen WordPress theme.

4. Paste the code to stylesheet.css

@font-face {
    font-family: 'noto_sansregular';
    src: url('fonts/notosans-regular-webfont.eot');
    src: url('fonts/notosans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/notosans-regular-webfont.woff') format('woff'),
         url('fonts/notosans-regular-webfont.ttf') format('truetype'),
         url('fonts/notosans-regular-webfont.svg#noto_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

Leave a Reply

Your email address will not be published. Required fields are marked *