{"id":594,"date":"2015-03-29T17:01:45","date_gmt":"2015-03-29T17:01:45","guid":{"rendered":"https:\/\/www.megamenu.com\/?page_id=594"},"modified":"2021-02-19T10:33:35","modified_gmt":"2021-02-19T10:33:35","slug":"google-fonts","status":"publish","type":"ht_kb","link":"https:\/\/www.megamenu.com\/documentation\/google-fonts\/","title":{"rendered":"Google Fonts"},"content":{"rendered":"<h3>Using Google Fonts<\/h3>\n<p>A list of all available Google Fonts will be automatically added to the Theme Editor upon installation of Max Mega Menu Pro.<\/p>\n<p><a href=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/03\/screenshot-google-fonts.png\" rel=\"attachment wp-att-7642\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-7642\" src=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/03\/screenshot-google-fonts.png\" alt=\"Google Fonts\" width=\"1325\" height=\"790\" srcset=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/03\/screenshot-google-fonts.png 1325w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/03\/screenshot-google-fonts-300x179.png 300w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/03\/screenshot-google-fonts-768x458.png 768w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/03\/screenshot-google-fonts-1024x611.png 1024w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/03\/screenshot-google-fonts-125x75.png 125w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/03\/screenshot-google-fonts-75x45.png 75w\" sizes=\"auto, (max-width: 1325px) 100vw, 1325px\" \/><\/a><\/p>\n<h4>Dequeueing Styles<\/h4>\n<p>Max Mega Menu will automatically include the required Google Font CSS on your site. If your theme already includes the Google Font(s) you&#8217;re using, you can stop Max Mega Menu from including a copy of the font by adding the following code to your themes functions.php file.<\/p>\n<pre class=\"lang:default decode:true \">function megamenu_dequeue_google_fonts() {\r\n   wp_dequeue_style( 'megamenu-google-fonts' );\r\n}\r\nadd_action( 'wp_print_styles', 'megamenu_dequeue_google_fonts', 100 );<\/pre>\n<h4>Adding support for extra font weights<\/h4>\n<p>Max Mega Menu enqueues google fonts with the 400 (normal) and 700 (bold) font weights.<\/p>\n<p>In the following example we&#8217;ll add support for the &#8220;<a href=\"https:\/\/fonts.google.com\/specimen\/Open+Sans?selection.family=Open+Sans\">Open Sans Semi Bold<\/a>&#8221; font.<\/p>\n<p><strong>Step 1:<\/strong><\/p>\n<p>Add the following code to your functions.php file;<\/p>\n<pre class=\"lang:default decode:true \">function megamenu_add_font_weights($weights) {\r\n    $weights['200'] = \"Extra Light (200)\";\r\n    $weights['600'] = \"Semi Bold (600)\";\r\n    return $weights;\r\n}\r\nadd_filter('megamenu_font_weights', 'megamenu_add_font_weights');<\/pre>\n<p>This will make the Extra Light and Semi Bold font available for selection within the theme editor:<\/p>\n<p><a href=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2018\/02\/semi-bold-font-weight.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-144227\" src=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2018\/02\/semi-bold-font-weight.png\" alt=\"\" width=\"2058\" height=\"240\" srcset=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2018\/02\/semi-bold-font-weight.png 2058w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2018\/02\/semi-bold-font-weight-300x35.png 300w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2018\/02\/semi-bold-font-weight-768x90.png 768w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2018\/02\/semi-bold-font-weight-1024x119.png 1024w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2018\/02\/semi-bold-font-weight-50x6.png 50w\" sizes=\"auto, (max-width: 2058px) 100vw, 2058px\" \/><\/a><\/p>\n<p><strong>Step 2:<\/strong><\/p>\n<p>If your theme already includes support for this particular font and weight, you can stop here. Otherwise, add the following code to your themes functions.php to tell Max Mega Menu to load the 200 and 600 font weight for the Open Sans font:<\/p>\n<pre class=\"lang:default decode:true\">function enqueue_open_sans_font_weight($weights, $font) {\r\n    if ( $font == 'Open Sans' ) { \/\/ check we're loading the Open Sans font\r\n        $weights[] = 200; \/\/ add 200 to the array of required font weights\r\n        $weights[] = 600; \/\/ add 600 to the array of required font weights\r\n    }\r\n    return $weights;\r\n}\r\nadd_filter('megamenu_google_font_weights', 'enqueue_open_sans_font_weight', 10, 2);<\/pre>\n<p>&nbsp;<\/p>\n<h3>Adding &#8220;display: swap&#8221;<\/h3>\n<p>To append &#8220;&amp;display=swap&#8221; to the Google Fonts URL, add the following to your themes functions.php file.<\/p>\n<pre>function megamenu_google_fonts_display_swap( $string ) {\r\n\treturn $string .= \"&amp;display=swap\";\r\n}\r\nadd_filter(\"megamenu_google_fonts_url\", \"megamenu_google_fonts_display_swap\");<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Using Google Fonts A list of all available Google Fonts will be automatically added to the Theme Editor upon installation of Max Mega Menu Pro. Dequeueing Styles Max Mega Menu will automatically include the required Google Font CSS on your site. If your theme already includes the Google Font(s) you&#8217;re&#8230;<\/p>\n","protected":false},"author":1,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"ht-kb-category":[16],"ht-kb-tag":[],"class_list":["post-594","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-pro-features"],"uagb_featured_image_src":[],"uagb_author_info":{"display_name":"Tom Hemsley","author_link":"https:\/\/www.megamenu.com\/author\/megamenu\/"},"uagb_comment_info":0,"uagb_excerpt":"Using Google Fonts A list of all available Google Fonts will be automatically added to the Theme Editor upon installation of Max Mega Menu Pro. Dequeueing Styles Max Mega Menu will automatically include the required Google Font CSS on your site. If your theme already includes the Google Font(s) you&#8217;re...","_links":{"self":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/594","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/comments?post=594"}],"version-history":[{"count":10,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/594\/revisions"}],"predecessor-version":[{"id":283464,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/594\/revisions\/283464"}],"wp:attachment":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/media?parent=594"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-category?post=594"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-tag?post=594"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}