Adding a new font to Max Control Theme

Question

I have a font named "Iranian Sans" with the file name "irsans.ttf" that I want to use for Max Control theme. How can I add this font to my theme?

Answer 1

To add custom fonts in MaxControl theme, first place your fonts at below path

qa-theme/MaxControl/css/fonts/place your fonts file here. (you need to create folder named fonts)

Now in qa-theme/MaxControl/css/custom.css file add below code
Note: replace MyWebFont with your font name and wefont with fonts/your-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.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

---

To add option for heading fonts

File name: qa-plugin/q2am-max-control-options/q2am-max-control-options.php
Line #696
Find below code

    'Vollkorn'     => 'Vollkorn'
);

Replace with:

    'Vollkorn'     => 'Vollkorn', //notice the comma here ,
    'Your-font-name' => 'Your-font-name'
);

---

Now to make it works, you need to modify one more file

File name:
For LTR: qa-theme/MaxControl/css/dynamic-style.php
For RTL: qa-theme/MaxControl/css/dynamic-style-rtl.php

Line #161 or #163 in RTL

Find below code

case 'Vollkorn':
    $heading_fonts = '"Vollkorn", serif;';
    break;
default:
    $heading_fonts = '"Roboto", sans-serif;';
    break;

Replace with:
Note: Your-font-family is what you set the font-family: 'MyWebFont' in @font-face in custom.css

case 'Vollkorn':
    $heading_fonts = '"Vollkorn", serif;';
    break;
case 'Your-font-name':
    $heading_fonts = '"Your-font-family", serif;'; 
    break;
default:
    $heading_fonts = '"Roboto", sans-serif;';
    break;

With this you will be able to set your heading fonts from the option panel, heading font setting.

---

To add option for body/content fonts

File name: qa-plugin/q2am-max-control-options/q2am-max-control-options.php

Line #712
Find below code

// body fonts options
$body_fonts = array(
    'Arial'   => 'Arial',
    'Lucida'  => 'Lucida',
    'Roboto'  => 'Roboto',
    'Tahoma'  => 'Tahoma',
    'Verdana' => 'Verdana');

Replace with:

// body fonts options
$body_fonts = array(
    'Arial'   => 'Arial',
    'Lucida'  => 'Lucida',
    'Roboto'  => 'Roboto',
    'Tahoma'  => 'Tahoma',
    'Verdana' => 'Verdana', //notice the comma ,
    'your-font' => 'your-font'
);

---

Now to make it works, you need to modify one more file

File name:
For LTR: qa-theme/MaxControl/css/dynamic-style.php
For RTL: qa-theme/MaxControl/css/dynamic-style-rtl.php

Line #210
Find below code

case 'Verdana':
    $body_fonts = 'Verdana, Geneva, sans-serif';
    break;
default:
    $body_fonts = 'Arial, Helvetica, sans-serif';
    break;

Replace with:
Note: Your-font-family is what you set the font-family: 'MyWebFont' in @font-face in custom.css

case 'Verdana':
    $body_fonts = 'Verdana, Geneva, sans-serif';
    break;
case 'Your-font-name':
    $body_fonts = '"Your-font-family", serif;'; 
    break;
default:
    $body_fonts = 'Arial, Helvetica, sans-serif';
    break;

Now you should be able to set both heading and body fonts from the Max Control options.

Comments

I have checked all of that and I did as you instructed. Please see the second and the third images (I have shown the problematic one in a red box).

---

Text are hard for me to understand, since all looks the same to me. :( can you please try to give me any specific class for the content so I can look into that?

---

Does the following two images help? In each image, the texts inside blue boxes did not change.

In this image, I am taking about "Answer This Question" and "Answer".

In this image, I am talking about "Questions".

---

If you mean by tooltip text in the blue box with arrow than do following

In theme-script.js.php

Line # 94

Find

// add tooltip to elements
$('.qa-nav-main, .qa-q-view-buttons, .qa-a-item-buttons, .qa-a-selection, .qa-vote-up-button, .qa-vote-down-button, .qa-voted-up-button, .qa-voted-down-button').tooltip({
  position: {
    my: "center bottom-20",
    at: "center top",
    using: function( position, feedback ) {
      $( this ).css( position );
      $( "<div>" )
        .addClass( "arrow" )
        .addClass( feedback.vertical )
        .addClass( feedback.horizontal )
        .appendTo( this );
    }
  }   
});

Replace
Note: change your-font-family with your font name

// add tooltip to elements
$('.qa-nav-main, .qa-q-view-buttons, .qa-a-item-buttons, .qa-a-selection, .qa-vote-up-button, .qa-vote-down-button, .qa-voted-up-button, .qa-voted-down-button').tooltip({
  position: {
    my: "center bottom-20",
    at: "center top",
    using: function( position, feedback ) {
      $( this ).css( position );
          $( this ).css( "font-family", "Your-font-family");
      $( "<div>" )
        .addClass( "arrow" )
        .addClass( feedback.vertical )
        .addClass( feedback.horizontal )
        .appendTo( this );
    }
  }   
});

---

Wonderful. Fixed. Thanks