How do I change my theme’s fonts?
In this page, you will learn how to add customized web fonts to your website by using the “Easy Google Fonts” plugin.
This plugin is 100% compatible and integrated into all our WordPress themes. You can start to add more than 600 fonts by following this simple procedure:
Step 1: Install the “Easy Google Fonts” plugin.
In your WP Dashboard’s Menu go to Plugins > Add New.
Search for the Easy Google Fonts plugin, then click on “Install Now” and “Activate”.
Step 2 – Go to the plugin dashboard.
You can go to the plugin dashboard from Settings > Google Fonts.
Step 3 – Add a new “Control Font” for each CSS text selector you want to change.
In this example, we will change the whole body of our website, from “Montserrat” to “Open Sans”.
In “Control Name” we insert “Change Titles Font” and click on “Create Font Control”.
Note: You can create all the “Font Control” needed, by adding them in the “Control Name” fields and clicking on “Create Font Control”. We recommend you to not use more than 2-3 different fonts since this could slow down the loading time of your website.
Step 4 – Add the CSS Selector to your new rule.
In the field “Add CSS Selectors” we add all the classes of the website that contain the Montserrat website. You will find all the “Montserrat” classes used in the theme near the end of this article.
Remember also to check the box “Force Styles Override” (Important) and click on “Save Font Control”.
Step 5 – Select your new font
Now it’s time to select your new font by going to Appearance > Customize > typography > Theme Typography > Your font control name (In our example: “Change titles font” and we select the “Open Sans” font).
Step 6 – Done!
Congratulations! You just created your first font customization. This system will allow you to customize each text element of your website with your favorite fonts.
If you want to know exactly how to find a CSS selector in your website, we advise you to use the “Inspect Element” functionality included with the Chrome browser. You can find more information about it at this link.
Tuulikki Theme: Fonts used and our CSS selectors list
In our Tuulikki theme, we used the fonts Montserrat and Merriweather.
Montserrat font: CSS selectors
In the following list, you can find all the CSS selectors we used with the Montserrat font. If you want to replace completely this font from your website you just need to copy this list and paste it into a new “Font Control” rule, as explained above.
h1,h2,h3,h4,h5,h6, .e_com_menu .nav-menu li, .nav-mobile > li, .floating-labels .cd-label, .content-comment h3, .thecomment .comment-text span.date, .post-header h2, .post-header .meta_item, ul.meta-share, .read-more, .list-item .post-header h2, .entry-footer-meta .meta_item, .entry-footer-meta .meta_item, .ig-below-area h2, .ig_widget ul li, .ig_widget .tit_widget span, .ig_widget .tagcloud a, .cont-aboutme p.tit, .cont-aboutme p.subtit, .ig_recent_big_post_details, a.ig_recent_post_title, .ig_recent_post_details span, .author-block .title_author, .big_slidepost .slidepost__desc h3 a, .big_slidepost .slidepost__desc .slide_date, .small-post-slider .slidepost__desc h3, .small-post-slider .slidepost__desc .slide_date, .slidepost__desc .slide_cat, .promobox__desc h3, .widget_promobox__desc h3, .instagram-title, .subscribe-box h4, .subscribe-box input, .featured-promobox__desc .featured_cat, .featured-promobox__desc h3, .featured-promobox__desc .slide_date, .sub_footer, #yrecipe-container .yrecipe-print-link .butn-link, #yrecipe-container #yrecipe-title, .ig_cat_product_details span, .woocommerce .cart .button, .woocommerce .cart input.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, a.edit, ul.product_list_widget li a span, .ig_widget ul.product_list_widget li > a, ul.product_list_widget li span, .woocommerce .woocommerce-ordering select, .woocommerce div.product .woocommerce-tabs ul.tabs li a, .woocommerce div.product .stock, .woocommerce-product-search input[type="submit"], .widget_shopping_cart_content p.buttons a, .woocommerce div.product form.cart .variations label, .product_meta, .woocommerce ul.products li.product .price, .woocommerce ul.products li.product .onsale, .woocommerce span.onsale, a.ig_cat_product_title, .woocommerce nav.woocommerce-pagination ul, .no_product_in_cart, .woocommerce .woocommerce-result-count, .woocommerce div.product .stock, .woocommerce div.product .entry-summary p.price, .woocommerce table.shop_table th, .woocommerce form .form-row label, #instagram-footer p.clear, #ig-shopping-login, .num_items, .subtotal_cont
Merriweather font: CSS selectors
In the following list, you can find all the CSS selectors we used with the Merriweather font. If you want to replace completely this font from your website you just need to copy this list and paste it into a new “Font Control” rule, as explained above.
body, .post-header h3.post_subtitle, .list-item .post-header h3.post_subtitle, .post-header-single h3.post_subtitle, .ig_cont_single_only_title h3.post_subtitle, #logo_single h1 a, .menu li, .nav-menu li, .container-select-box select, .panel-body .widget_search form input[type='search'], .ig_widget, #instagram-footer, .slidepost__desc h3, .postTime, .wp-caption-text.gallery-caption, .post-header-single h1, .ig_cont_single_only_title h1, .post-header-single .meta_item, .ig_cont_single_only_title .meta_item, .title_about h1, .read-more-list, .title-line, .animsition-loading:after, .textt, .ilgelo_pagination, .wp-caption .wp-caption-text, #commentform input, #commentform textarea, #commentform .submit, .wpcf7 p, div.wpcf7-response-output, #yrecipe-container p, #yrecipe-container li, #yrecipe-container .notes, #yrecipe-container .h-4.strong
Specific CSS selector
If you want to customize the font of main menu, scroll menu, mobile menu you need to insert this custom selector
.nav-mobile > li > a, .nav-mobile ul.sub-menu > li > a, .top_menu .nav-menu li a, .top_menu .menu li a,
