1. Home
  2. ReHub Theme
  3. How to …
  4. How to add custom font in theme

How to add custom font in theme

You can change fonts in  Theme option   Font options 

But sometimes, you need custom font which is not available in Google fonts. Here, steps for this.

First of all, you need to upload fonts in site. Create folder /fonts/ in root folder of site and upload there your fonts.

Then, assign fonts to site. For this, use next example in  Theme options   General options   Custom CSS .

  1. Delete your font styles from style.css, they are wrong.
  2. Add next code to  Theme options   General options   Custom CSS :
@font-face {
font-family: IRANSans;
font-style: normal;
font-weight: bold;
src: url('fonts/eot/IRANSansWeb_Bold.eot');
src: url('fonts/eot/IRANSansWeb_Bold.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
url('fonts/woff2/IRANSansWeb_Bold.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
url('fonts/woff/IRANSansWeb_Bold.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('fonts/ttf/IRANSansWeb_Bold.ttf') format('truetype');

This is example for “IRANSans” font. You will have own code, usually, font provider will give you CSS code to assign font to site.

Please, check also your path. Fonts must be added to root folder of site (not in the theme) and have the same URL structure. So, for example /fonts/eot/IRANSansWeb.eot means that font must be available from link http://site.com/fonts/eot/IRANSansWeb.eot
Then, to overwrite headings font-family, Add in the same place next code:
.priced_block .btn_offer_block,
.btn_block_part .btn_offer_block,
.woocommerce div.product p.price,
.rehub_feat_block div.offer_title,
.rh_wrapper_video_playlist .rh_video_title_and_time .rh_video_title,
.main_slider .flex-overlay h2,
.main_slider .flex-overlay a.btn_more,
.woo_sell_block .price,
.related_articles ul li > a,
.news_out_tabs .tabs-menu li,
.cats_def a,
.widget.tabs > ul > li,
.widget .title,
.video_widget p,
.title h1,
.title h5,
.small_post blockquote p,
.related_articles .related_title,
#comments .title_comments,
.commentlist .comment-author .fn,
.commentlist .comment-author .fn a,
#commentform #submit,
.media_video > p,
.rate_bar_wrap .review-top .review-text span.review-header,
.ap-pro-form-field-wrapper input[type="submit"],
.wpsm-numbox.wpsm-style6 span.num,
.wpsm-numbox.wpsm-style5 span.num,
.woocommerce ul.product_list_widget li a,
.logo .textlogo{font-family: IRANSans !important}
to change menu fonts, use:
.dl-menuwrapper li a, nav.top_menu ul li a, #re_menu_near_logo li, #re_menu_near_logo li {font-family: IRANSans !important}
to change body fonts:
.news .detail p, article, .small_post > p, .title_star_ajax, .breadcrumb, footer div.f_text, .header-top .top-nav li, .related_articles ul li > a, .commentlist .comment-content p, .sidebar, .prosconswidget, .rehub-body-font, body{font-family: IRANSans !important}

Of course, you need to change “IRANSans” on own font name.

Was this article helpful to you? Yes No

How can we help?