{"id":88398,"date":"2018-11-10T17:57:53","date_gmt":"2018-11-10T17:57:53","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/system-fonts\/"},"modified":"2024-12-30T12:08:37","modified_gmt":"2024-12-30T12:08:37","slug":"system-fonts","status":"publish","type":"plugin","link":"https:\/\/bal.wordpress.org\/plugins\/system-fonts\/","author":13994457,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","version":"0.6","stable_tag":"trunk","tested":"6.7.5","requires":"4.6","requires_php":"5.6","requires_plugins":null,"header_name":"System Fonts","header_author":"Nilo Velez","header_description":"Enqueues a stylesheet that let's you use the native font on each operating system","assets_banners_color":"","last_updated":"2024-12-30 12:08:37","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"https:\/\/www.nilovelez.com\/system-fonts\/","header_author_uri":"https:\/\/www.nilovelez.com","rating":0,"author_block_rating":0,"active_installs":40,"downloads":2923,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation"],"tags":[],"upgrade_notice":[],"ratings":[],"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":2720585,"resolution":"128x128","location":"assets","locale":""},"icon-256x256.png":{"filename":"icon-256x256.png","revision":2720585,"resolution":"256x256","location":"assets","locale":""}},"assets_banners":[],"assets_blueprints":{},"all_blocks":[],"tagged_versions":[],"block_files":[],"assets_screenshots":[],"screenshots":[],"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[2788,5126],"plugin_category":[43],"plugin_contributors":[125970],"plugin_business_model":[],"class_list":["post-88398","plugin","type-plugin","status-publish","hentry","plugin_tags-front-end","plugin_tags-typography","plugin_category-customization","plugin_contributors-nilovelez","plugin_committers-nilovelez"],"banners":[],"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/system-fonts\/assets\/icon-128x128.png?rev=2720585","icon_2x":"https:\/\/ps.w.org\/system-fonts\/assets\/icon-256x256.png?rev=2720585","generated":false},"screenshots":[],"raw_content":"<!--section=description-->\n<p>System Fonts enqueues a stylesheet that lets you use the native font on each operating system and defines a system-ui css @font-face that you can use on the customizer, your theme\u2019s settings or your own code.<\/p>\n\n<h4>Usage example<\/h4>\n\n<p>The Twenty Seventeen theme uses this css selector for the body text:<\/p>\n\n<pre><code>body, button, input, select, textarea {\n  font-family: \"Libre Franklin\", \"Helvetica Neue\", helvetica, arial, sans-serif;\n}\n<\/code><\/pre>\n\n<p>We are going to replace it with the default system font.\nIn you WordPress site, go to <code>Appearance &gt; Customize &gt; Additional CSS<\/code> and paste this code<\/p>\n\n<pre><code>body, button, input, select, textarea {\n  font-family: system-ui;\n}\n<\/code><\/pre>\n\n<p>Appart from them font-family, there are other font-properties available:<\/p>\n\n<ul>\n<li>font-style: normal or italic;<\/li>\n<li>font-weight: 300 (light), 400 (regular), 500 (medium), 700 (bold);<\/li>\n<\/ul>\n\n<p>For example this is the code make an element's text semibold and cursive:<\/p>\n\n<pre><code>#my-element {\n  font-family: system-ui;\n  font-weight: 500;\n  font-style: italic;\n}\n<\/code><\/pre>\n\n<!--section=installation-->\n<ol>\n<li>Upload the plugin files to the <code>\/wp-content\/plugins\/system-fonts<\/code> directory, or install the plugin through the WordPress plugins screen.<\/li>\n<li>Activate the plugin through the 'Plugins' screen in WordPress<\/li>\n<\/ol>","raw_excerpt":"Enqueues a stylesheet that lets you use the native font on each operating system.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/bal.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/88398","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bal.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/bal.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/bal.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=88398"}],"author":[{"embeddable":true,"href":"https:\/\/bal.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/nilovelez"}],"wp:attachment":[{"href":"https:\/\/bal.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=88398"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/bal.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=88398"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/bal.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=88398"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/bal.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=88398"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/bal.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=88398"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/bal.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=88398"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}