{"id":3227,"date":"2020-12-10T14:27:57","date_gmt":"2020-12-10T22:27:57","guid":{"rendered":"https:\/\/mx.fruininc.com\/?page_id=3227"},"modified":"2021-01-21T14:55:08","modified_gmt":"2021-01-21T22:55:08","slug":"add-font-to-app-content","status":"publish","type":"page","link":"https:\/\/mx.fruininc.com\/en\/help\/getting-started-with-church-admin\/app-admin\/add-font-to-app-content\/","title":{"rendered":"Add Font to App Content"},"content":{"rendered":"<h2 id=\"wp-block-themeisle-blocks-advanced-heading-e0a80b90\" class=\"wp-block-themeisle-blocks-advanced-heading wp-block-themeisle-blocks-advanced-heading-e0a80b90\">Adding Fonts to App Content<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Because of not being able to add content to the &lt;head&gt; &#8230; &lt;\/head&gt; section of a WordPress page we can not import fonts but here is a workaround to add Google Fonts that can be used on the App Content pages directly.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Go to https:\/\/fonts.google.com and locate the font you would like to use.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/mx.fruininc.com\/wp-content\/uploads\/2020\/12\/GoogleFonts-1024x544.png\" alt=\"\" class=\"wp-image-3255\" width=\"779\" height=\"414\" srcset=\"https:\/\/mx.fruininc.com\/wp-content\/uploads\/2020\/12\/GoogleFonts-1024x544.png 1024w, https:\/\/mx.fruininc.com\/wp-content\/uploads\/2020\/12\/GoogleFonts-300x159.png 300w, https:\/\/mx.fruininc.com\/wp-content\/uploads\/2020\/12\/GoogleFonts-768x408.png 768w, https:\/\/mx.fruininc.com\/wp-content\/uploads\/2020\/12\/GoogleFonts.png 1434w\" sizes=\"auto, (max-width: 779px) 100vw, 779px\" \/><figcaption>Click on the font you would like.<\/figcaption><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Click on &#8220;+ Select this style&#8221; for each style you would like.<br><br>Then locate the &#8220;Use on the web&#8221; block on the right, select @import!, and copy the web address only (like the one highlighted in blue).<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/mx.fruininc.com\/wp-content\/uploads\/2020\/12\/GoogleFontsSelect-1024x541.png\" alt=\"\" class=\"wp-image-3256\" width=\"788\" height=\"416\" srcset=\"https:\/\/mx.fruininc.com\/wp-content\/uploads\/2020\/12\/GoogleFontsSelect-1024x541.png 1024w, https:\/\/mx.fruininc.com\/wp-content\/uploads\/2020\/12\/GoogleFontsSelect-300x159.png 300w, https:\/\/mx.fruininc.com\/wp-content\/uploads\/2020\/12\/GoogleFontsSelect-768x406.png 768w, https:\/\/mx.fruininc.com\/wp-content\/uploads\/2020\/12\/GoogleFontsSelect.png 1417w\" sizes=\"auto, (max-width: 788px) 100vw, 788px\" \/><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><br><br>Paste that address in a web browser and you will be presented with a page like the following.<br><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/mx.fruininc.com\/wp-content\/uploads\/2020\/12\/GoogleFontIndex.png\" alt=\"\" class=\"wp-image-3257\" width=\"867\" height=\"396\" srcset=\"https:\/\/mx.fruininc.com\/wp-content\/uploads\/2020\/12\/GoogleFontIndex.png 1006w, https:\/\/mx.fruininc.com\/wp-content\/uploads\/2020\/12\/GoogleFontIndex-300x137.png 300w, https:\/\/mx.fruininc.com\/wp-content\/uploads\/2020\/12\/GoogleFontIndex-768x350.png 768w\" sizes=\"auto, (max-width: 867px) 100vw, 867px\" \/><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Highlight the &#8220;latin-ext&#8221; portion (as shown above), copy it, then paste it into the top of your App Content page that you created inside the &lt;style> &lt;\/style> tags.<br>NOTE:  It will not work to insert this into the App Settings CSS field.  It must be included page by page but, performance wise, this is not a problem as the font itself will be cached and, therefore, have very little impact on the speed of the page load.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;style&gt;\n\/* latin-ext *\/\n@font-face {\n  font-family: 'JetBrains Mono';\n  font-style: italic;\n  font-weight: 100;\n  font-display: swap;\n  src: url(https:\/\/fonts.gstatic.com\/s\/jetbrainsmono\/v1\/tDba2o-flEEny0FZhsfKu5WU4xD-IQ-PuZJJXxfpAO-Lf2OZmaKjhw.woff2) format('woff2');\n  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;\n}\n\n&lt;\/style&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Now you will be able to reference that font family on the current App Content page effectively.<\/p>","protected":false},"excerpt":{"rendered":"<p>Because of not being able to add content to the &lt;head&gt; &#8230; &lt;\/head&gt; section of a WordPress page we can not import fonts but here is a workaround to add Google Fonts that can be used on the App Content pages directly. Go to https:\/\/fonts.google.com and locate the font you would like to use. Click [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":0,"parent":3236,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3227","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mx.fruininc.com\/en\/wp-json\/wp\/v2\/pages\/3227","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mx.fruininc.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mx.fruininc.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mx.fruininc.com\/en\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/mx.fruininc.com\/en\/wp-json\/wp\/v2\/comments?post=3227"}],"version-history":[{"count":0,"href":"https:\/\/mx.fruininc.com\/en\/wp-json\/wp\/v2\/pages\/3227\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/mx.fruininc.com\/en\/wp-json\/wp\/v2\/pages\/3236"}],"wp:attachment":[{"href":"https:\/\/mx.fruininc.com\/en\/wp-json\/wp\/v2\/media?parent=3227"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}