{"id":5278,"date":"2021-11-24T09:07:11","date_gmt":"2021-11-24T00:07:11","guid":{"rendered":"https:\/\/hanami-web.tokyo.jp\/blog\/?p=5278"},"modified":"2021-11-24T09:48:51","modified_gmt":"2021-11-24T00:48:51","slug":"custom-font-setting","status":"publish","type":"post","link":"https:\/\/hanami-web.tokyo.jp\/blog\/en\/website-running\/oceanwp\/custom-font-setting\/","title":{"rendered":"[OceanWP Explanation] How to set custom fonts such as Japanese fonts"},"content":{"rendered":"<p>This time, we will explain how to set custom fonts, such as Japanese fonts, in the WordPress theme OceanWP.<\/p>\n\n\n\n\n<div class=\"sc\"><a href=\"https:\/\/hanami-web.tokyo.jp\/blog\/en\/howto-oceanwp-setting\/\" title=\"OceanWP Theme Explanation Table of Contents\">\r\n\t<p class=\"sc-txt01\">Our site is designed using the OceanWP theme and Brizy plugin.<\/p>\r\n\t<p class=\"sc-txt01\">I have created an explanatory article on how to set it up as a reminder, so please feel free to use it as a reference!<\/p>\r\n\t<p class=\"sc-txt02\">OceanWP Explanation Index \u2192<\/p>\r\n<\/a><\/div>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 ez-toc-wrap-center counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">table of contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #000000;color:#000000\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #000000;color:#000000\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/hanami-web.tokyo.jp\/blog\/en\/website-running\/oceanwp\/custom-font-setting\/#oceanwp%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%a0%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e8%bf%bd%e5%8a%a0%e3%81%ae%e6%b5%81%e3%82%8c\" >How to add custom fonts to OceanWP<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/hanami-web.tokyo.jp\/blog\/en\/website-running\/oceanwp\/custom-font-setting\/#oceanwp%e5%ad%90%e3%83%86%e3%83%bc%e3%83%9e%e8%a8%ad%e5%ae%9a\" >OceanWP child theme settings<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/hanami-web.tokyo.jp\/blog\/en\/website-running\/oceanwp\/custom-font-setting\/#web%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e3%82%92%e6%8e%a2%e3%81%99\" >Find web fonts<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/hanami-web.tokyo.jp\/blog\/en\/website-running\/oceanwp\/custom-font-setting\/#oceanwp%e5%ad%90%e3%83%86%e3%83%bc%e3%83%9e%e9%9a%8e%e5%b1%a4%e3%81%abfonts%e3%83%95%e3%82%a9%e3%83%ab%e3%83%80%e3%83%bc%e3%82%92%e8%bf%bd%e5%8a%a0\" >Add fonts folder to OceanWP child theme hierarchy<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/hanami-web.tokyo.jp\/blog\/en\/website-running\/oceanwp\/custom-font-setting\/#web%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e3%83%95%e3%82%a1%e3%82%a4%e3%83%ab%e3%82%92%e3%83%80%e3%82%a6%e3%83%b3%e3%83%ad%e3%83%bc%e3%83%89\" >Download the web font file<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/hanami-web.tokyo.jp\/blog\/en\/website-running\/oceanwp\/custom-font-setting\/#%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e3%81%ae%e5%a4%aa%e3%81%95%e3%82%92%e9%81%b8%e6%8a%9e\" >Select a font weight<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/hanami-web.tokyo.jp\/blog\/en\/website-running\/oceanwp\/custom-font-setting\/#%e3%82%b3%e3%83%bc%e3%83%89%e3%82%92%e7%a2%ba%e8%aa%8d\" >Check the code<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/hanami-web.tokyo.jp\/blog\/en\/website-running\/oceanwp\/custom-font-setting\/#%e3%83%80%e3%82%a6%e3%83%b3%e3%83%ad%e3%83%bc%e3%83%89%e3%81%97%e3%81%9fweb%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e3%83%95%e3%82%a1%e3%82%a4%e3%83%ab\" >Downloaded web font files<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/hanami-web.tokyo.jp\/blog\/en\/website-running\/oceanwp\/custom-font-setting\/#oceanwp%e5%ad%90%e3%83%86%e3%83%bc%e3%83%9e%e9%9a%8e%e5%b1%a4fonts%e3%83%95%e3%82%a9%e3%83%ab%e3%83%80%e3%81%ab%e3%82%a2%e3%83%83%e3%83%97%e3%83%ad%e3%83%bc%e3%83%89\" >Upload to the fonts folder in the OceanWP child theme hierarchy<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/hanami-web.tokyo.jp\/blog\/en\/website-running\/oceanwp\/custom-font-setting\/#oceanwp%e5%ad%90%e3%83%86%e3%83%bc%e3%83%9e%e3%81%aestylecss%e3%81%ab%e7%a7%bb%e5%8b%95\" >Go to style.css in your OceanWP child theme<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/hanami-web.tokyo.jp\/blog\/en\/website-running\/oceanwp\/custom-font-setting\/#stylecss%e3%81%ab%e3%82%b3%e3%83%bc%e3%83%89%e3%82%92%e8%bf%bd%e5%8a%a0\" >Add the code to style.css<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/hanami-web.tokyo.jp\/blog\/en\/website-running\/oceanwp\/custom-font-setting\/#functionphp%e3%81%ab%e8%bf%bd%e8%a8%98\" >Add to function.php<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/hanami-web.tokyo.jp\/blog\/en\/website-running\/oceanwp\/custom-font-setting\/#%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%9e%e3%82%a4%e3%82%ba%e3%81%ab%e8%bf%bd%e5%8a%a0%e3%81%95%e3%82%8c%e3%81%9f%e3%81%8b%e7%a2%ba%e8%aa%8d\" >Check if it was added to customization<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/hanami-web.tokyo.jp\/blog\/en\/website-running\/oceanwp\/custom-font-setting\/#%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%a0%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e3%82%92%e8%a8%ad%e5%ae%9a%e3%81%97%e3%81%a6%e3%81%bf%e3%81%a6%e3%81%ae%e6%84%9f%e6%83%b3\" >My impressions after setting a custom font<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"oceanwp%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%a0%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e8%bf%bd%e5%8a%a0%e3%81%ae%e6%b5%81%e3%82%8c\"><\/span>How to add custom fonts to OceanWP<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Setting up custom fonts in OceanWP is a setup for intermediate to advanced users.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Create a child theme<\/li><li>Download the web font file<\/li><li>Add the fonts file to your child theme and upload the downloaded file.<\/li><li>Add the code to the child theme&#039;s style.css<\/li><li>Add the code to function.php in your child theme<\/li><li>Confirm that the custom font you added can be selected in Appearance \u2192 Customize \u2192 Typography.<\/li><\/ol>\n\n\n\n<p>The process is as follows.<\/p>\n\n\n\n<p>Now, let&#039;s explain the settings!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"oceanwp%e5%ad%90%e3%83%86%e3%83%bc%e3%83%9e%e8%a8%ad%e5%ae%9a\"><\/span>OceanWP child theme settings<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p> OceanWP is a theme made overseas, so it does not include many Japanese fonts by default. <\/p>\n\n\n\n<p> To set custom fonts in OceanWP, you must set up a child theme. If you haven&#039;t set up a child theme yet, please follow the instructions below to set up a child theme. <\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-hanamiweb-blog wp-block-embed-hanamiweb-blog\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"wSVG3i13nY\"><a href=\"https:\/\/hanami-web.tokyo.jp\/blog\/en\/website-running\/oceanwp\/theme-install\/\">How to install the free WordPress theme Ocean WP<\/a><\/blockquote><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"\u201cHow to install the free WordPress theme Ocean WP\u201d \u2014 How to create a homepage using WordPress\" src=\"https:\/\/hanami-web.tokyo.jp\/blog\/website-running\/oceanwp\/theme-install\/embed\/#?secret=OaHiiinKmf#?secret=wSVG3i13nY\" data-secret=\"wSVG3i13nY\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"web%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e3%82%92%e6%8e%a2%e3%81%99\"><\/span>Find web fonts<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>I think the most common one is Google Fonts.<\/p>\n\n\n\n<div class=\"wp-block-cocoon-blocks-button-1 button-block\"><a href=\"https:\/\/fonts.google.com\/?subset=japanese\" class=\"btn btn-circle has-background has-key-color-background-color\" target=\"_blank\" rel=\"noopener\">google japanese font<\/a><\/div>\n\n\n\n<p>For example, Google Font &quot;<a href=\"https:\/\/fonts.google.com\/specimen\/M+PLUS+1?subset=japanese\" target=\"_blank\" rel=\"noreferrer noopener\">M PLUS 1<\/a>&quot; Let&#039;s say you want to use<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"458\" src=\"https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/11\/image-39-1024x458.png\" alt=\"\" class=\"wp-image-5280\" srcset=\"https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/11\/image-39-1024x458.png 1024w, https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/11\/image-39-300x134.png 300w, https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/11\/image-39-768x344.png 768w, https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/11\/image-39-1536x687.png 1536w, https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/11\/image-39.png 1802w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"oceanwp%e5%ad%90%e3%83%86%e3%83%bc%e3%83%9e%e9%9a%8e%e5%b1%a4%e3%81%abfonts%e3%83%95%e3%82%a9%e3%83%ab%e3%83%80%e3%83%bc%e3%82%92%e8%bf%bd%e5%8a%a0\"><\/span>Add fonts folder to OceanWP child theme hierarchy<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Add the [fonts] folder to the OceanWP child theme hierarchy.<\/p>\n\n\n\n<p>The child theme file hierarchy is<\/p>\n\n\n\n<p>wp-content\/themes\/oceanwp-child-theme-master<\/p>\n\n\n\n<p>It will be.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"564\" height=\"216\" src=\"https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/11\/image-38.png\" alt=\"\" class=\"wp-image-5276\" srcset=\"https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/11\/image-38.png 564w, https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/11\/image-38-300x115.png 300w\" sizes=\"(max-width: 564px) 100vw, 564px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"web%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e3%83%95%e3%82%a1%e3%82%a4%e3%83%ab%e3%82%92%e3%83%80%e3%82%a6%e3%83%b3%e3%83%ad%e3%83%bc%e3%83%89\"><\/span>Download the web font file<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Return to the screen where you searched for the font you want to use on Google Fonts.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e3%81%ae%e5%a4%aa%e3%81%95%e3%82%92%e9%81%b8%e6%8a%9e\"><\/span>Select a font weight<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Click on the text &quot;Select this style&quot; and select the thickness you need.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"464\" src=\"https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/11\/image-40-1024x464.png\" alt=\"\" class=\"wp-image-5281\" srcset=\"https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/11\/image-40-1024x464.png 1024w, https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/11\/image-40-300x136.png 300w, https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/11\/image-40-768x348.png 768w, https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/11\/image-40-1536x697.png 1536w, https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/11\/image-40.png 1832w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%e3%82%b3%e3%83%bc%e3%83%89%e3%82%92%e7%a2%ba%e8%aa%8d\"><\/span>Check the code<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Click the icon in the upper left corner of the screen and click the [Download all] button to download the font file.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"519\" src=\"https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/11\/image-37-1024x519.png\" alt=\"\" class=\"wp-image-5285\" srcset=\"https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/11\/image-37-1024x519.png 1024w, https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/11\/image-37-300x152.png 300w, https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/11\/image-37-768x389.png 768w, https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/11\/image-37-1536x778.png 1536w, https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/11\/image-37.png 1756w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%e3%83%80%e3%82%a6%e3%83%b3%e3%83%ad%e3%83%bc%e3%83%89%e3%81%97%e3%81%9fweb%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e3%83%95%e3%82%a1%e3%82%a4%e3%83%ab\"><\/span>Downloaded web font files<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>If you check the downloaded font file, it will look like this.<\/p>\n\n\n\n<p>MPLUS1-variableFont_wght.ttf<\/p>\n\n\n\n<p>Here is the font file.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"316\" height=\"131\" src=\"https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/11\/image-44.png\" alt=\"\" class=\"wp-image-5286\" srcset=\"https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/11\/image-44.png 316w, https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/11\/image-44-300x124.png 300w\" sizes=\"(max-width: 316px) 100vw, 316px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"oceanwp%e5%ad%90%e3%83%86%e3%83%bc%e3%83%9e%e9%9a%8e%e5%b1%a4fonts%e3%83%95%e3%82%a9%e3%83%ab%e3%83%80%e3%81%ab%e3%82%a2%e3%83%83%e3%83%97%e3%83%ad%e3%83%bc%e3%83%89\"><\/span>Upload to the fonts folder in the OceanWP child theme hierarchy<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p> Upload the MPLUS1-variableFont_wght.ttf file into the fonts folder.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"595\" height=\"150\" src=\"https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/11\/image-45.png\" alt=\"\" class=\"wp-image-5287\" srcset=\"https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/11\/image-45.png 595w, https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/11\/image-45-300x76.png 300w\" sizes=\"(max-width: 595px) 100vw, 595px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"oceanwp%e5%ad%90%e3%83%86%e3%83%bc%e3%83%9e%e3%81%aestylecss%e3%81%ab%e7%a7%bb%e5%8b%95\"><\/span>Go to style.css in your OceanWP child theme<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Add code to sytyle.css so that the fonts can be used in OceanWP.<\/p>\n\n\n\n<p>style.css is in the child theme.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"570\" height=\"192\" src=\"https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/11\/image-42.png\" alt=\"\" class=\"wp-image-5283\" srcset=\"https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/11\/image-42.png 570w, https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/11\/image-42-300x101.png 300w\" sizes=\"(max-width: 570px) 100vw, 570px\" \/><\/figure>\n\n\n\n<p>The attached image is the screen that appears when connecting from FTP or the server&#039;s file manager.<\/p>\n\n\n\n<p>If you want to add it from the WordPress dashboard:<\/p>\n\n\n\n<p>It is [style.css] located in [Appearance] &gt; [Theme Editor].<\/p>\n\n\n\n<div class=\"wp-block-cocoon-blocks-icon-box alert-box common-icon-box block-box\">\n<p>At this time, please make sure that you are editing a child theme file before proceeding.<\/p>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"403\" src=\"https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/11\/image-43-1024x403.png\" alt=\"\" class=\"wp-image-5284\" srcset=\"https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/11\/image-43-1024x403.png 1024w, https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/11\/image-43-300x118.png 300w, https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/11\/image-43-768x303.png 768w, https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/11\/image-43-1536x605.png 1536w, https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/11\/image-43.png 1906w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"stylecss%e3%81%ab%e3%82%b3%e3%83%bc%e3%83%89%e3%82%92%e8%bf%bd%e5%8a%a0\"><\/span>Add the code to style.css<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>\u5148\u307b\u3069google\u30d5\u30a9\u30f3\u30c8\u3067\u78ba\u8a8d\u3092\u3057\u305f@import\u30b3\u30fc\u30c9\u3092style.css\u306b\u8ffd\u8a18\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@font-face { font-family: &#039;M PLUS 1&#039;; src: url(&#039;fonts\/MPLUS1-VariableFont_wght.ttf&#039;) format(&#039;ttf&#039;); }<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cocoon-blocks-icon-box alert-box common-icon-box block-box\">\n<p>The part of the code you need to change is this<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>font-family - This is the font name you choose on OceanWP. Any string<\/li><li>The url will be fonts\/\u25cf\u25cf\u25cf, where \u25cf\u25cf\u25cf is the name of the uploaded font file.<\/li><li>format - In this case, it was a ttf file, so I typed in ttf.<\/li><\/ul>\n<\/div>\n\n\n\n<p>I added it to style.css like this.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"785\" height=\"422\" src=\"https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/11\/image-46.png\" alt=\"\" class=\"wp-image-5288\" srcset=\"https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/11\/image-46.png 785w, https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/11\/image-46-300x161.png 300w, https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/11\/image-46-768x413.png 768w\" sizes=\"(max-width: 785px) 100vw, 785px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"functionphp%e3%81%ab%e8%bf%bd%e8%a8%98\"><\/span>Add to function.php<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Next, add the code to function.php of your OceanWP child theme and set it up so that the font can be selected in [Appearance] &gt; [Customize] &gt; [Typography].<\/p>\n\n\n\n<p>If you want to make edits from the WordPress dashboard, open the function.php file, which is next to style.css.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"360\" src=\"https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/11\/image-47-1024x360.png\" alt=\"\" class=\"wp-image-5289\" srcset=\"https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/11\/image-47-1024x360.png 1024w, https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/11\/image-47-300x105.png 300w, https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/11\/image-47-768x270.png 768w, https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/11\/image-47-1536x540.png 1536w, https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/11\/image-47.png 1870w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>The code to enter is<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function ocean_add_custom_fonts() { return array( &#039;M PLUS 1&#039; );<\/code><\/pre>\n\n\n\n<p>I added it at the very end.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"347\" src=\"https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/11\/image-48-1024x347.png\" alt=\"\" class=\"wp-image-5290\" srcset=\"https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/11\/image-48-1024x347.png 1024w, https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/11\/image-48-300x102.png 300w, https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/11\/image-48-768x260.png 768w, https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/11\/image-48.png 1211w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%9e%e3%82%a4%e3%82%ba%e3%81%ab%e8%bf%bd%e5%8a%a0%e3%81%95%e3%82%8c%e3%81%9f%e3%81%8b%e7%a2%ba%e8%aa%8d\"><\/span>Check if it was added to customization<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Finally, let&#039;s check that the configuration is OK.<\/p>\n\n\n\n<p>In the WordPress dashboard, go to Appearance &gt; Customize &gt; Typography<\/p>\n\n\n\n<p>Go to. Either one will do, but try selecting [Body text], and if the font family you added appears in the font family selection area, then it&#039;s OK!<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"486\" height=\"727\" src=\"https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/11\/image-49.png\" alt=\"\" class=\"wp-image-5291\" srcset=\"https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/11\/image-49.png 486w, https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/11\/image-49-201x300.png 201w\" sizes=\"(max-width: 486px) 100vw, 486px\" \/><\/figure>\n\n\n\n\n<div class=\"sc\"><a href=\"https:\/\/hanami-web.tokyo.jp\/blog\/en\/howto-oceanwp-setting\/\" title=\"OceanWP Theme Explanation Table of Contents\">\r\n\t<p class=\"sc-txt01\">Our site is designed using the OceanWP theme and Brizy plugin.<\/p>\r\n\t<p class=\"sc-txt01\">I have created an explanatory article on how to set it up as a reminder, so please feel free to use it as a reference!<\/p>\r\n\t<p class=\"sc-txt02\">OceanWP Explanation Index \u2192<\/p>\r\n<\/a><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%a0%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e3%82%92%e8%a8%ad%e5%ae%9a%e3%81%97%e3%81%a6%e3%81%bf%e3%81%a6%e3%81%ae%e6%84%9f%e6%83%b3\"><\/span>My impressions after setting a custom font<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Setting up custom fonts in OceanWP can be quite a hassle.<\/p>\n\n\n\n<p>However, once you set it up, it&#039;s easy to use and reflects the changes.<\/p>\n\n\n\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>\u4eca\u56de\u306f\u3001WordPress\u30c6\u30fc\u30deOceanWP\u3067\u306e\u65e5\u672c\u8a9e\u30d5\u30a9\u30f3\u30c8\u306a\u3069\u3001\u30ab\u30b9\u30bf\u30e0\u30d5\u30a9\u30f3\u30c8\u3092\u8a2d\u5b9a\u3059\u308b\u65b9\u6cd5\u3092\u89e3\u8aac\u3057\u307e\u3059\u3002 OceanWP\u30ab\u30b9\u30bf\u30e0\u30d5\u30a9\u30f3\u30c8\u8ffd\u52a0\u306e\u6d41\u308c OceanWP\u306b\u30ab\u30b9\u30bf\u30e0\u30d5\u30a9\u30f3\u30c8\u3092\u8a2d\u5b9a\u3059\u308b\u65b9\u6cd5\u306f\u4e2d\u30fb\u4e0a\u7d1a\u8005\u5411\u3051 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":5291,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"content-type":"","_uag_custom_page_level_css":"","footnotes":""},"categories":[1486],"tags":[1487,280],"class_list":["post-5278","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-oceanwp","tag-oceanwp","tag-280"],"blocksy_meta":[],"aioseo_notices":[],"uagb_featured_image_src":{"full":["https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/11\/image-49.png",486,727,false],"thumbnail":["https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/11\/image-49-150x150.png",150,150,true],"medium":["https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/11\/image-49-201x300.png",201,300,true],"medium_large":["https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/11\/image-49.png",486,727,false],"large":["https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/11\/image-49.png",486,727,false],"1536x1536":["https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/11\/image-49.png",486,727,false],"2048x2048":["https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/11\/image-49.png",486,727,false],"trp-custom-language-flag":["https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/11\/image-49.png",8,12,false]},"uagb_author_info":{"display_name":"\u682a\u5f0f\u4f1a\u793eHanamiWEB \u4ee3\u8868\u53d6\u7de0\u5f79 \u677e\u6d66\u307f\u3055","author_link":"https:\/\/hanami-web.tokyo.jp\/blog\/en\/author\/hanami\/"},"uagb_comment_info":0,"uagb_excerpt":"\u4eca\u56de\u306f\u3001WordPress\u30c6\u30fc\u30deOceanWP\u3067\u306e\u65e5\u672c\u8a9e\u30d5\u30a9\u30f3\u30c8\u306a\u3069\u3001\u30ab\u30b9\u30bf\u30e0\u30d5\u30a9\u30f3\u30c8\u3092\u8a2d\u5b9a\u3059\u308b\u65b9\u6cd5\u3092\u89e3\u8aac\u3057\u307e&hellip;","brizy_media":[],"_links":{"self":[{"href":"https:\/\/hanami-web.tokyo.jp\/blog\/en\/wp-json\/wp\/v2\/posts\/5278","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hanami-web.tokyo.jp\/blog\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hanami-web.tokyo.jp\/blog\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hanami-web.tokyo.jp\/blog\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hanami-web.tokyo.jp\/blog\/en\/wp-json\/wp\/v2\/comments?post=5278"}],"version-history":[{"count":0,"href":"https:\/\/hanami-web.tokyo.jp\/blog\/en\/wp-json\/wp\/v2\/posts\/5278\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hanami-web.tokyo.jp\/blog\/en\/wp-json\/wp\/v2\/media\/5291"}],"wp:attachment":[{"href":"https:\/\/hanami-web.tokyo.jp\/blog\/en\/wp-json\/wp\/v2\/media?parent=5278"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hanami-web.tokyo.jp\/blog\/en\/wp-json\/wp\/v2\/categories?post=5278"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hanami-web.tokyo.jp\/blog\/en\/wp-json\/wp\/v2\/tags?post=5278"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}