Themes Store

    How To Use Custom Fonts On Your Site premium free

    There are several ways to embed your own fonts into the theme.

    Google Fonts

    After selecting your font on Google Fonts, copy its import code and paste it into Appearance > Customize > Additional CSS.

    159.png

    160.png

    Typekit

    Similarly to embedding Google Fonts, you can copy the import code and paste it in Appearance > Customize > Additional CSS.

    161.png

    Other fonts

    Upload your font files to your server. It’s important to have several different file formats because different file formats will be loaded by different browsers.

    Step 1 － Upload your font files to your server. It’s important to have several different file formats because different file formats will be loaded by different browsers.

    Step 2 － Add the following custom CSS to Appearance > Customize > Additional CSS.

    @font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ }

    Step 3 － Change the ULRs to link to absolute paths to your font files.

    Using your font

    Please note that embedding your custom font in one of the aforementioned ways will not make it appear in the dropdown lists in Theme Options or in WPBakery shortcodes. You will need to add some custom CSS in order to target the text on your site.

    For example, you could add the following code to Appearance > Customize > Additional CSS:

    h1, h2, h3, h4, h5, h6 {
    font-family: 'Your Font', sans-serif;
}

    This will change your headings to your font of choice.

    Some customers have suggested Use Any Font 3rd party plugin.

    You can also take a look at our tutorial on Custom Fonts here.

    Related articles