Add New Font To Max Control Responsive Options !

Question

Hi
Can I use My Custom Fonts In This Theme ?

Comments

???????????????

Answer 1

Yes, you can add custom fonts to Max Control theme. Do following to add custom fonts.

You can add any custom or overriding css rule to custom.css file. That will override the default css.

CSS path: qa-theme/MaxControl/css/custom.css

Let's say for example you want to change fonts for Question list title and Question page title.

To add google fonts

1. So first choose your fonts from Google-font or embed your font
   using @font-face (don't forget to put font files on server)
2. Now in custom.css file add below code

note: I am using google fonts but you can embed your own using font-face

Code:

/*-------------------------------------------------------
-----------------[ CUSTOM CSS RULE ]---------------------
-------------------------------------------------------*/
/* here you can see Oswald font-family by google-fonts */
@import url(//fonts.googleapis.com/css?family=Oswald);
/* adding fonts to q-list and q-view title only */
h2.qa-q-item-title, .entry-title{
    font-family: 'Oswald', sans-serif;
}

To embed custom fonts

1. Store your fonts into folder named fonts and place that folder
   into 'css' folder (e.g. MaxControl/css/fonts/all-your-fonts)
2. Add below code to custom.css file

Code:

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

Important: replace MyWebFont to your font family name and webfont to your real font file name