Skip to content
Log in Sign up

WPML - How to use different fonts for different languages?

1 minute read

You may use 2 different fonts for 2 languages.

We will show you how to do it on example of "English" and "Spanish" (Languages codes: "en" and "es", you need to change it for your own languages codes)

  1. 1 Edit header.php file
  2. 2 Find:
php 
<?php wp_head(); ?>

3. Add following code above it:

php 
<?php if ( ICL_LANGUAGE_CODE == 'en' ) { ?>

    <style>

        /* English Font */
        @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 */
        }

        body,
        button,
        input,
        optgroup,
        select,
        textarea,
        .mh-accordion .ui-accordion-header,
        .mh-estate-horizontal__subheading,
        .mh-estate-horizontal__primary,
        .mh-estate-vertical__subheading,
        .mh-estate-vertical__primary,
        .mh-map-infobox,
        .mh-user-panel-info__heading,
        .mh-font-body,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        .mh-estate__details__price,
        .mh-top-header,
        .mh-top-header-big__panel,
        .mh-caption__inner,
        .mh-slider-single__price,
        .mh-heading-font-bold,
        .mh-search__results,
        .mh-user-panel__user__content {
            font-family: MyWebFont!important;
        }
    </style>

<?php } elseif( ICL_LANGUAGE_CODE == 'es' ) { ?>
    
    <style>

        /*  Spanish Font */
        @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 */
        }

        body,
        button,
        input,
        optgroup,
        select,
        textarea,
        .mh-accordion .ui-accordion-header,
        .mh-estate-horizontal__subheading,
        .mh-estate-horizontal__primary,
        .mh-estate-vertical__subheading,
        .mh-estate-vertical__primary,
        .mh-map-infobox,
        .mh-user-panel-info__heading,
        .mh-font-body,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        .mh-estate__details__price,
        .mh-top-header,
        .mh-top-header-big__panel,
        .mh-caption__inner,
        .mh-slider-single__price,
        .mh-heading-font-bold,
        .mh-search__results,
        .mh-user-panel__user__content {
            font-family: MyWebFont!important;
        }

    </style>

<?php } ?>

4. Customize your font paths. You can read more about it here: https://css-tricks.com/snippets/css/using-font-face/

plain 
@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 */
}

Ask the people who build MyHome WPBakery

We answer by email from support@tangiblewp.com. With Premium Support, we also fix your site when something breaks.

Send us a message What Premium Support covers 

We can also run your site for you, or build a new one.

Was this guide helpful?