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. Edit header.php file


2. Find:


 <?php wp_head(); ?>

3. Add following code above it:



<?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/ 


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