Useful if you are making a customizable skin, or if you allow users to set font preferences in their account settings.<\/p>\n\n\n\n
Of course, the basic way you include google fonts on your page is like this:<\/p>\n\n\n\n
HTML (preconnects are technically optional):<\/p>\n\n\n\n
<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"FONT SPECIFIC LINK\" rel=\"stylesheet\"><\/code><\/pre>\n\n\n\nOr, CSS Include:<\/p>\n\n\n\n
@import url('FONT SPECIFIC LINK');<\/code><\/pre>\n\n\n\nSo how to generate that link from an array of font names?<\/p>\n\n\n\n
Well, here it is in javascript, which can be used either in node.js or in browser-side javascript with a bit of extra code to create a <link> dom element on the fly:<\/p>\n\n\n\n
const googleFonts = { \n \/* 'Font Name': [] \/\/default weight only\n * or 'Font Name': [list normal weights]\n * or 'Font Name': [[list normal weights], [list italic weights]] *\/\n 'Poiret One' => [],\n 'Merriweather' => [[400, 700, 900], [400, 700, 900]],\n 'Roboto' => [300, 400],\n} \n\nlet googleFontURL = \"https:\/\/fonts.googleapis.com\/css2?\"; \n\nObject.keys(googleFonts).forEach((key) => { \n element = googleFonts[key];\n if (element.length == 0) googleFontURL += `family=${key}&`; \n else if (!Array.isArray(element[0])) googleFontURL += `family=${key}:wgt@${element.join(';')}&`; \n else if (element[0].length == 0) googleFontURL += `family=${key}:ital,wgt@01,${element[1].join(';0,')}&`; \n else googleFontURL += `family=${key}:ital,wgt@0,${element[0].join(';0,')};1,${element[1].join(';0,')}&`; }); \n\ngoogleFontURL += \"display=swap\";<\/code><\/pre>\n\n\n\nAnd in PHP (for WordPress templates, for example):<\/p>\n\n\n\n
$googleFonts = [\n \/* 'Font Name': [] \/\/default weight only\n * or 'Font Name': [list normal weights]\n * or 'Font Name': [[list normal weights], [list italic weights]] *\/\n 'Poiret One' => [],\n 'Merriweather' => [[400, 700, 900], [400, 700, 900]],\n 'Roboto' => [300, 400],\n];\n\nfunction google_webfonts_link($googleFonts)\n{\n $googleFontURL = \"https:\/\/fonts.googleapis.com\/css2?\";\n foreach ($googleFonts as $key => $sizes) {\n if (!is_array($sizes)) { \n \/\/assume someone just put in a plain array of font names\n $googleFontURL .= \"family=\" . str_replace(\" \", \"+\", $sizes) . \"&\"; \n } \n else if (count($sizes) == 0) {\n $googleFontURL .= \"family=\" . str_replace(\" \", \"+\", $key) . \"&\";\n } else if (!is_array($sizes[0])) {\n $googleFontURL .= \"family=\" . str_replace(\" \", \"+\", $key) . \":wgt@\" . implode(';', $sizes) . \"&\";\n } else if (is_array($sizes[0]) && count($sizes[0]) == 0) {\n $googleFontURL .= \"family=\" . str_replace(\" \", \"+\", $key) . \":ital,wgt@01,\" . implode($sizes[1], \";0,\") . \"&\";\n } else {\n $googleFontURL .= \"family=\" . str_replace(\" \", \"+\", $key) . \":ital,wgt@0,\" . implode(';0,', $sizes[0]) . \";1,\" . implode(';1,', $sizes[1]) . \"&\";\n }\n }\n $googleFontURL .= \"display=swap\";\n return $googleFontURL;\n}<\/code><\/pre>\n\n\n\n(Yeah, I could use string interpolation, but my php syntax highlighter doesn’t handle {..} style interpolation. That’s what you get for using free software.)<\/p>\n\n\n\n
WordPress note: php will strip out duplicate query string parameters once it knows it’s a url, so adding a version to wp_enque_styles will ruin your google fonts link.<\/p>\n","protected":false},"excerpt":{"rendered":"