{"id":136,"date":"2023-11-01T15:51:28","date_gmt":"2023-11-01T06:51:28","guid":{"rendered":"https:\/\/miginihitsuji.com\/prog\/?p=136"},"modified":"2023-11-01T15:51:29","modified_gmt":"2023-11-01T06:51:29","slug":"vite-vue3-google-fonts","status":"publish","type":"post","link":"https:\/\/miginihitsuji.com\/prog\/vite-vue3-google-fonts\/","title":{"rendered":"Vite + Vue 3 \u3067Google Fonts\u3092\u4f7f\u3046"},"content":{"rendered":"\n<p>Vite + Vue 3 \u3067Google Fonts\u306a\u3069 Web\u30d5\u30a9\u30f3\u30c8\u3092\u4f7f\u3048\u308b\u3088\u3046\u306b\u74b0\u5883\u3092\u6574\u3048\u308b\u65b9\u6cd5\u3067\u3059\u3002\u30d7\u30e9\u30b0\u30a4\u30f3\u300c<a href=\"https:\/\/webfont-dl.feat.agency\/\">Vite Plugin WebFont DL<\/a> \u300d\u3092\u4f7f\u7528\u3057\u3001<span class=\"swl-bg-color has-swl-pale-01-background-color\">vite.config.js<\/span> \u3067 import \u3059\u308b\u65b9\u6cd5\u3067\u3059\u3002<\/p>\n\n\n\n<p>\u4eca\u56de\u306f\u3001Google Fonts \u3067\u8aac\u660e\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/h2>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-bash\" data-lang=\"Bash\"><code>$ npm i vite-plugins-webfont-dl -D<\/code><\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">\u30d5\u30a9\u30f3\u30c8\u306eCSS URL(s)\u3092\u53d6\u5f97<\/h2>\n\n\n\n<p>\u4f7f\u7528\u3059\u308bGoogle Fonts \u306e CSS URL(s) \u3092\u53d6\u5f97\u3057\u3001\u30b3\u30d4\u30fc\u3057\u3066\u304a\u304d\u307e\u3059\u3002CSS URL(s) \u306f\u3001\u4f7f\u7528\u3057\u305f\u3044Google Fonts\u30da\u30fc\u30b8\u3067\u78ba\u8a8d\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;link href=&quot;[CSS URL]&quot; rel=&quot;stylesheet&quot;&gt;<\/code><\/pre><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"672\" src=\"https:\/\/miginihitsuji.com\/prog\/wp\/wp-content\/uploads\/Libre_Baskerville_-_Google_Fonts-1-1024x672.jpg\" alt=\"\" class=\"wp-image-139\" srcset=\"https:\/\/miginihitsuji.com\/prog\/wp\/wp-content\/uploads\/Libre_Baskerville_-_Google_Fonts-1-1024x672.jpg 1024w, https:\/\/miginihitsuji.com\/prog\/wp\/wp-content\/uploads\/Libre_Baskerville_-_Google_Fonts-1-300x197.jpg 300w, https:\/\/miginihitsuji.com\/prog\/wp\/wp-content\/uploads\/Libre_Baskerville_-_Google_Fonts-1-768x504.jpg 768w, https:\/\/miginihitsuji.com\/prog\/wp\/wp-content\/uploads\/Libre_Baskerville_-_Google_Fonts-1.jpg 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Vite \u306e\u8a2d\u5b9a\u30d5\u30a1\u30a4\u30eb<\/h2>\n\n\n\n<p>vite.config.js \uff08TypeScript\u306e\u5834\u5408\u306f\u3001vite.config.ts\uff09\u3067\u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u3001\u5148\u307b\u3069\u53d6\u5f97\u3057\u305fCSS URL(s)\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-file=\"vite.config.js\" data-lang=\"JavaScript\"><code>import webfontDownload from &#39;vite-plugin-webfont-dl&#39;;\n\nexport default {\n  plugins: [\n    webfontDownload([\n      &#39;https:\/\/fonts.googleapis.com\/css2?family=Libre+Baskerville&display=swap&#39;,\n      &#39;https:\/\/fonts.googleapis.com\/css2?family=Montserrat&display=swap&#39;\n    ]),\n  ],\n};<\/code><\/pre><\/div>\n\n\n\n<p>\u30d5\u30a9\u30f3\u30c8\u3092\u8907\u6570\u5c0e\u5165\u3059\u308b\u5834\u5408\u306f\u3001\u4e0a\u306e\u3088\u3046\u306b\u8a18\u8ff0\u3059\u308b\u3088\u3046\u306b\u516c\u5f0f\u30da\u30fc\u30b8\u3067\u306f\u7d39\u4ecb\u3055\u308c\u3066\u3044\u307e\u3059\u304c\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306b Google Fonts \u3067\u307e\u3068\u3081\u3066\u4e00\u3064\u306e CSS URL \u3067\u53d6\u5f97\u3057\u3066\u3082\u4e0a\u624b\u304f\u3044\u304d\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-file=\"vite.config.js\" data-lang=\"JavaScript\"><code>import webfontDownload from &#39;vite-plugin-webfont-dl&#39;;\n\nexport default {\n  plugins: [\n    webfontDownload([\n      &#39;https:\/\/fonts.googleapis.com\/css2?family=Libre+Baskerville&family=Montserrat&display=swap&#39;\n    ]),\n  ],\n};<\/code><\/pre><\/div>\n\n\n\n<p>\u3053\u308c\u3060\u3051\u3067\u8a2d\u5b9a\u5b8c\u4e86\u3067\u3059\u3002<\/p>\n\n\n\n<p>\u3042\u3068\u306f\u3001CSS\u3067 font-family \u3092\u6307\u5b9a\u3059\u308b\u3060\u3051\u3067OK<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-css\" data-lang=\"CSS\"><code>:root {\n  --font-serif: &#39;Libre Baskerville&#39;, serif;\n  --font-sans_serif: &#39;Montserrat&#39;, sans-serif;\n}<\/code><\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Vite + Vue 3 \u3067Google Fonts\u306a\u3069 Web\u30d5\u30a9\u30f3\u30c8\u3092\u4f7f\u3048\u308b\u3088\u3046\u306b\u74b0\u5883\u3092\u6574\u3048\u308b\u65b9\u6cd5\u3067\u3059\u3002\u30d7\u30e9\u30b0\u30a4\u30f3\u300cVite Plugin WebFont DL \u300d\u3092\u4f7f\u7528\u3057\u3001vite.config.js \u3067 impo [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":143,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"swell_btn_cv_data":"","footnotes":""},"categories":[8],"tags":[15,16],"class_list":["post-136","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend","tag-vite","tag-vue-3"],"_links":{"self":[{"href":"https:\/\/miginihitsuji.com\/prog\/wp-json\/wp\/v2\/posts\/136","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/miginihitsuji.com\/prog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/miginihitsuji.com\/prog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/miginihitsuji.com\/prog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/miginihitsuji.com\/prog\/wp-json\/wp\/v2\/comments?post=136"}],"version-history":[{"count":4,"href":"https:\/\/miginihitsuji.com\/prog\/wp-json\/wp\/v2\/posts\/136\/revisions"}],"predecessor-version":[{"id":142,"href":"https:\/\/miginihitsuji.com\/prog\/wp-json\/wp\/v2\/posts\/136\/revisions\/142"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/miginihitsuji.com\/prog\/wp-json\/wp\/v2\/media\/143"}],"wp:attachment":[{"href":"https:\/\/miginihitsuji.com\/prog\/wp-json\/wp\/v2\/media?parent=136"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/miginihitsuji.com\/prog\/wp-json\/wp\/v2\/categories?post=136"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/miginihitsuji.com\/prog\/wp-json\/wp\/v2\/tags?post=136"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}