<?xml version="1.0"?>
<rss version="2.0"><channel><title><![CDATA[Question & Answer | 問答環節 最新的主题]]></title><link>https://forum.woodao.net/forum/4/</link><description><![CDATA[Question & Answer | 問答環節 最新的主题]]></description><language>zh</language><item><title>Convert MySQL MyISAM tables to InnoDB</title><link>https://forum.woodao.net/topic/21/</link><description><![CDATA[<p>
	Since MySQL 5.5, InnoDB is the default storage engine due to its reliability, performance, and feature set. Switching from MyISAM to InnoDB is strongly recommended for most modern MySQL applications.
</p>

<p>
	InnoDB is a transactional storage engine, meaning it fully supports ACID (Atomicity, Consistency, Isolation, Durability) properties. You can safely roll back transactions in case of an error, preserving data integrity. MyISAM is non-transactional; it cannot roll back incomplete operations, which can lead to data corruption and inconsistencies in the event of a crash or error.
</p>

<p>
	InnoDB uses row-level locking. This lets multiple users update different rows simultaneously without locking the entire table, so it excels in write-heavy and highly concurrent environments—like e-commerce platforms or busy web apps. MyISAM, by contrast, uses table-level locking, meaning any write operation locks the whole table, making it much less efficient for concurrent reads and writes.
</p>

<p>
	InnoDB comes with robust automatic crash recovery. Its transactional logs allow it to recover data automatically in case of a server crash or power failure. MyISAM has only basic recovery options and is much more prone to corruption after unexpected shutdowns.
</p>

<p>
	To list all MyISAM databases on your MySQL server, run
</p>

<pre class="ipsCode prettyprint lang-sql prettyprinted" id="ips_uid_4368_5" style=""><span class="pln">SELECT
    table_schema AS database_name</span><span class="pun">,</span><span class="pln">
    table_name
FROM
    information_schema</span><span class="pun">.</span><span class="pln">tables
WHERE
    engine </span><span class="pun">=</span><span class="pln"> </span><span class="str">'MyISAM'</span><span class="pln">
    AND table_schema NOT IN </span><span class="pun">(</span><span class="str">'information_schema'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'sys'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'performance_schema'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'mysql'</span><span class="pun">);</span></pre>

<p>
	To list all MyISAM tables in a specific database, run
</p>

<pre class="ipsCode prettyprint lang-sql prettyprinted" id="ips_uid_4368_7" style=""><span class="pln">SELECT
    table_name
FROM
    information_schema</span><span class="pun">.</span><span class="pln">tables
WHERE
    table_schema </span><span class="pun">=</span><span class="pln"> </span><span class="str">'your_database_name'</span><span class="pln">
    AND engine </span><span class="pun">=</span><span class="pln"> </span><span class="str">'MyISAM'</span><span class="pun">;</span></pre>

<p>
	To convert a table into InnoDB engine, use:
</p>

<pre class="ipsCode prettyprint lang-sql prettyprinted" id="ips_uid_4368_9" style=""><span class="pln">ALTER TABLE your_table_name ENGINE</span><span class="pun">=</span><span class="typ">InnoDB</span><span class="pun">;</span></pre>

<p>
	 
</p>
]]></description><guid isPermaLink="false">21</guid><pubDate>Mon, 23 Feb 2026 15:26:32 +0000</pubDate></item><item><title>How to Open Port on Oracle Cloud Ubuntu Server</title><link>https://forum.woodao.net/topic/20/</link><description><![CDATA[<p>
	Oracle Cloud Ubuntu virtual machines are not compatible with UFW firewall. This is because oracle cloud needs some iptables rules to communicate with storage devices.
</p>

<p>
	To open a port in Oracle cloud Ubuntu Virtual Machine, edit file
</p>

<pre class="ipsCode prettyprint lang-py prettyprinted" id="ips_uid_7833_5" style=""><span class="pln">vi </span><span class="pun">/</span><span class="pln">etc</span><span class="pun">/</span><span class="pln">iptables</span><span class="pun">/</span><span class="pln">rules</span><span class="pun">.</span><span class="pln">v4</span></pre>

<p>
	Find the line
</p>

<pre class="ipsCode prettyprint lang-html prettyprinted" id="ips_uid_7833_7" style=""><span class="pln">-A INPUT -p tcp -m state --state NEW -m tcp --dport 22 -j ACCEPT</span></pre>

<p>
	This is the rule for opening port 22 (SSH). To open another port, duplicate this line, replace 22 with the port you need to open.
</p>

<p>
	For example, to open ports 80 and 443, add these 2 lines below.
</p>

<pre class="ipsCode prettyprint lang-css prettyprinted" id="ips_uid_7833_9" style=""><span class="pln">-A INPUT -p tcp -m state </span><span class="pun">--</span><span class="pln">state NEW -m tcp </span><span class="pun">--</span><span class="pln">dport </span><span class="lit">80</span><span class="pln"> -j ACCEPT
-A INPUT -p tcp -m state </span><span class="pun">--</span><span class="pln">state NEW -m tcp </span><span class="pun">--</span><span class="pln">dport </span><span class="lit">443</span><span class="pln"> -j ACCEPT</span></pre>

<p>
	IMPORTANT: Do not remove the entry for port 22. If you remove this line, you won’t be able to SSH into the server.
</p>

<p>
	To activate the firewall rules, run the command
</p>

<pre class="ipsCode prettyprint lang-javascript prettyprinted" id="ips_uid_7833_11" style=""><span class="pln">sudo iptables</span><span class="pun">-</span><span class="pln">restore </span><span class="pun">&lt;</span><span class="pln"> </span><span class="str">/etc/</span><span class="pln">iptables</span><span class="pun">/</span><span class="pln">rules</span><span class="pun">.</span><span class="pln">v4</span></pre>

<p>
	To see the INPUT rules, run the command
</p>

<pre class="ipsCode prettyprint lang-javascript prettyprinted" id="ips_uid_7833_13" style=""><span class="pln">root@oc1</span><span class="pun">-</span><span class="pln">serverok</span><span class="pun">-</span><span class="pln">in</span><span class="pun">:~#</span><span class="pln"> iptables </span><span class="pun">-</span><span class="pln">L INPUT
</span><span class="typ">Chain</span><span class="pln"> INPUT </span><span class="pun">(</span><span class="pln">policy ACCEPT</span><span class="pun">)</span><span class="pln">
target     prot opt source               destination         
ACCEPT     all  </span><span class="pun">--</span><span class="pln">  anywhere             anywhere             state RELATED</span><span class="pun">,</span><span class="pln">ESTABLISHED
ACCEPT     icmp </span><span class="pun">--</span><span class="pln">  anywhere             anywhere            
ACCEPT     all  </span><span class="pun">--</span><span class="pln">  anywhere             anywhere            
ACCEPT     udp  </span><span class="pun">--</span><span class="pln">  anywhere             anywhere             udp spt</span><span class="pun">:</span><span class="pln">ntp
ACCEPT     tcp  </span><span class="pun">--</span><span class="pln">  anywhere             anywhere             state NEW tcp dpt</span><span class="pun">:</span><span class="pln">ssh
ACCEPT     tcp  </span><span class="pun">--</span><span class="pln">  anywhere             anywhere             state NEW tcp dpt</span><span class="pun">:</span><span class="pln">http
ACCEPT     tcp  </span><span class="pun">--</span><span class="pln">  anywhere             anywhere             state NEW tcp dpt</span><span class="pun">:</span><span class="pln">https
REJECT     all  </span><span class="pun">--</span><span class="pln">  anywhere             anywhere             reject</span><span class="pun">-</span><span class="kwd">with</span><span class="pln"> icmp</span><span class="pun">-</span><span class="pln">host</span><span class="pun">-</span><span class="pln">prohibited
root@oc1</span><span class="pun">-</span><span class="pln">serverok</span><span class="pun">-</span><span class="pln">in</span><span class="pun">:~#</span><span class="pln"> </span></pre>

<p>
	 
</p>
]]></description><guid isPermaLink="false">20</guid><pubDate>Mon, 23 Feb 2026 15:18:58 +0000</pubDate></item><item><title>How to use custom webfonts with Invision Community 4 and 5</title><link>https://forum.woodao.net/topic/19/</link><description><![CDATA[<p>
	<a class="ipsAttachLink ipsAttachLink_image" href="https://forum.woodao.net/uploads/monthly_2026_02/photo-1575314027842-c33656c1f3dc.jpg.19f35a0e64ba47fb5fcfd43c4ed5db00.jpg.daa7ddda3ce1d500c8b939f5c1daf90f.jpg" data-fileid="5" data-fileext="jpg" rel=""><img class="ipsImage ipsImage_thumbnailed" data-fileid="5" data-ratio="51.70" data-unique="plb0s8vxw" width="1000" alt="photo-1575314027842-c33656c1f3dc.jpg.19f35a0e64ba47fb5fcfd43c4ed5db00.jpg" data-src="https://forum.woodao.net/uploads/monthly_2026_02/photo-1575314027842-c33656c1f3dc.jpg.19f35a0e64ba47fb5fcfd43c4ed5db00.thumb.jpg.3f1a1958f5e6c3128f8458cf789f881a.jpg" src="https://forum.woodao.net/applications/core/interface/js/spacer.png"></a>
</p>

<div style="background-color:oklch(1 0 260); color:oklch(0.43 0.0492 260); font-size:16px; padding:32px; text-align:start">
	<section data-controller="core.front.core.lightboxedImages" style="font-size:17.6px; padding:0px">
		<p style="padding:0px">
			Invision Community currently comes with a choice of seven webfonts in the default theme. If you want to use different fonts, you have to customize your theme. This article explains, how this is done. 
		</p>
	</section>
</div>

<hr style="border-width:0px; color:inherit; font-size:16px; padding:0px; text-align:start">
<div data-controller="core.front.core.lightboxedImages" style="background-color:oklch(1 0 260); color:oklch(0.43 0.0492 260); font-size:17.6px; padding:32px; text-align:start">
	<div style="padding:8px 0px">
		<div data-controller="core.front.core.lightboxedImages" style="padding:0px">
			<p style="padding:0px">
				 Using a custom webfont requires three steps:
			</p>

			<ol style="padding:0px">
				<li style="padding:0px">
					<p style="padding:0px">
						Turning off the webfonts that the IPS theme is using
					</p>
				</li>
				<li style="padding:0px">
					<p style="padding:0px">
						Linking a new custom font
					</p>
				</li>
				<li style="padding:0px">
					<p style="padding:0px">
						Activating the new custom font for your entire website or parts of it
					</p>
				</li>
			</ol>

			<h1 style="color:oklch(0.15 0.0204 260); font-size:clamp(1.7em, 1em + 2.3vw, 3em); padding:0px">
				A) Linking fonts from a webfont service like Google Fonts
			</h1>

			<p style="padding:0px">
				First, turn off the webfonts currently used by switching the “Body Font” and Headline Font” to “Default” in the theme’s text settings. 
			</p>

			<p style="padding:0px">
				<a data-fileext="png" data-fileid="52" href="https://opentype.space/uploads/monthly_2022_09/397304733_Bildschirmfoto2022-09-25um06_47_24.png.66ebb9ee848dd22b235b81541fd82680.png" rel="external nofollow" style="color:oklch(0.15 0.0204 260); padding:0px"><img alt="Bildschirmfoto 2022-09-25 um 06.47.24.png" data-fileid="52" loading="lazy" style="border:0px; padding:0px; vertical-align:top" width="1000" data-src="https://opentype.space/uploads/monthly_2022_09/1728398819_Bildschirmfoto2022-09-25um06_47_24.thumb.png.e20310e9521982d0b1837c3f1e9c72ef.png" src="https://forum.woodao.net/applications/core/interface/js/spacer.png"></a>
			</p>

			<p style="padding:0px">
				Now choose a font family you want to use from Google Fonts (or any other webfont service).
			</p>

			<p style="padding:0px">
				You should always use a complete family consisting of at least four styles: regular,<span> </span><em style="padding:0px">italic</em>,<span> </span><strong style="padding:0px">bold</strong><span> </span>and<span> </span><strong style="padding:0px"><em style="padding:0px">bold italic</em></strong>. This is important because all those styles will be called on your website and you want to have a proper font available when that happens. Otherwise the browsers will generate the fonts artificially, which will look bad and will not be very legible.
			</p>

			<p style="padding:0px">
				You are however free to choose which font weights you define as the “regular” and “bold” weight if there are more than two choices available. 
			</p>

			<p style="padding:0px">
				First, pick a font family you would like to use from<span> </span><a href="https://fonts.google.com/" rel="external nofollow" style="color:oklch(0.15 0.0204 260); padding:0px" target="_blank">Google Fonts</a>. Then click the plus symbol next to the styles you want to use. 
			</p>

			<p style="padding:0px">
				<a data-fileext="png" data-fileid="53" href="https://opentype.space/uploads/monthly_2022_09/Bildschirmfoto-2022-09-25-um-07_52_57.png.d946ae71be06eb00b503b0a38c32b150.png" rel="external nofollow" style="color:oklch(0.15 0.0204 260); padding:0px"><img alt="Bildschirmfoto-2022-09-25-um-07.52.57.png" data-fileid="53" loading="lazy" style="border:0px; padding:0px; vertical-align:top" width="1000" data-src="https://opentype.space/uploads/monthly_2022_09/Bildschirmfoto-2022-09-25-um-07_52_57.thumb.png.9d615c01b7082e3b29b01b7e0094637e.png" src="https://forum.woodao.net/applications/core/interface/js/spacer.png"></a>
			</p>

			<p style="padding:0px">
				Once the family is complete, copy the &lt;link&gt; code that appears in the sidebar. 
			</p>

			<p style="padding:0px">
				<a data-fileext="png" data-fileid="54" href="https://opentype.space/uploads/monthly_2022_09/Bildschirmfoto-2022-09-25-um-07_57_50.png.8eea087a444b6cc3cdf5cdc084cd2632.png" rel="external nofollow" style="color:oklch(0.15 0.0204 260); padding:0px"><img alt="Bildschirmfoto-2022-09-25-um-07.57.50.png" data-fileid="54" loading="lazy" style="border:0px; padding:0px; vertical-align:top" width="1000" data-src="https://opentype.space/uploads/monthly_2022_09/Bildschirmfoto-2022-09-25-um-07_57_50.thumb.png.2063cc9fab349f2d1f1c134cb1497c04.png" src="https://forum.woodao.net/applications/core/interface/js/spacer.png"></a>
			</p>

			<p style="padding:0px">
				 
			</p>

			<h2 style="color:oklch(0.15 0.0204 260); font-size:clamp(1.5em, 1em + 1.9vw, 2.2em); padding:0px">
				Option 1: Linking the font from the globalTemplate
			</h2>

			<p style="padding:0px">
				Now open your ACP and go to your theme settings. Next to your default theme, click “Edit HTML and CSS” and open the “globalTemplate”. 
			</p>

			<div data-i-background-color="indigo" style="border-color:color(srgb 0.706589 0.600032 0.920042); border-image:none 100% / 1 / 0 stretch; border-inline-start-width:4px; border-radius:6px; border-style:solid; border-width:0px; color:color(srgb 0.255479 0.22057 0.533939); padding:1.3em">
				<div style="border-bottom:1px solid color-mix(in srgb, currentcolor 20%, transparent); color:color(srgb 0.0977782 0.0308725 0.294291); padding:1em 0px">
					<p style="padding:0px">
						Update for Invision Community 5
					</p>
				</div>

				<p style="padding:0px">
					<a href="https://opentype.space/support/ips-community-tips/how-to-add-something-to-the-global-template-in-invision-community-5-r37/" rel="external nofollow" style="color:oklch(0.15 0.0204 260); padding:0px">Check out this article</a><span> </span>to learn how to add something to the HTML header in Invision Community 5.
				</p>
			</div>

			<p style="padding:0px">
				Paste the &lt;link&gt; code at the end of the &lt;head&gt; section before the closing &lt;/head&gt;
			</p>

			<p style="padding:0px">
				<a data-fileext="png" data-fileid="55" href="https://opentype.space/uploads/monthly_2022_09/Bildschirmfoto-2022-09-25-um-08_13_05.png.d34a43d2a36dcf4c6dccc02ce8193663.png" rel="external nofollow" style="color:oklch(0.15 0.0204 260); padding:0px"><img alt="Bildschirmfoto-2022-09-25-um-08.13.05.png" data-fileid="55" loading="lazy" style="border:0px; padding:0px; vertical-align:top" width="1000" data-src="https://opentype.space/uploads/monthly_2022_09/Bildschirmfoto-2022-09-25-um-08_13_05.thumb.png.3ac2d10a5415b8351e8171a4e49136b6.png" src="https://forum.woodao.net/applications/core/interface/js/spacer.png"></a>
			</p>

			<p style="padding:0px">
				This process will be similar for all webfont services. As an example, this is the &lt;link&gt; code you get for Adobe Fonts and you would paste it in the same place in your “globalTemplate”.  
			</p>

			<p style="padding:0px">
				<a data-fileext="png" data-fileid="56" href="https://opentype.space/uploads/monthly_2022_09/Bildschirmfoto-2022-09-25-um-08_18_15.png.0bfa4510249a69a06433a323d97d8203.png" rel="external nofollow" style="color:oklch(0.15 0.0204 260); padding:0px"><img alt="Bildschirmfoto-2022-09-25-um-08.18.15.png" data-fileid="56" loading="lazy" style="border:0px; padding:0px; vertical-align:top" width="1000" data-src="https://opentype.space/uploads/monthly_2022_09/Bildschirmfoto-2022-09-25-um-08_18_15.thumb.png.8c47a5df0a1baa8673637768af123a4e.png" src="https://forum.woodao.net/applications/core/interface/js/spacer.png"></a>
			</p>

			<p style="padding:0px">
				 
			</p>

			<h2 style="color:oklch(0.15 0.0204 260); font-size:clamp(1.5em, 1em + 1.9vw, 2.2em); padding:0px">
				Option 2: Linking the font from the custom.css
			</h2>

			<p style="padding:0px">
				Keep in mind that editing your “globalTemplate” has its downsides. There will likely be future updates to this template and once you have changed it, you will have to deal with future updates of the template manually. So, as an alternative you can also link your Google Fonts from the “custom.css”, which is designed to be edited by you. So, instead of copying the &lt;link&gt; code from Google, you can also copy the &lt;@import&gt; code (without the &lt;style&gt; and &lt;/style&gt;) and paste it at the beginning of your “custom.css”. The downside of this method is that the fonts are loaded slower this way, because the download of the fonts and their CSS can only start once the browser has downloaded your “custom.css”. So, you have to decide whether you want to prioritize speed or convenience. 
			</p>

			<p style="padding:0px">
				<img alt="Bildschirmfoto 2022-09-25 um 08.24.53.png" data-fileid="57" data-ratio="55.23" loading="lazy" style="border:0px; padding:0px; vertical-align:top" title="Enlarge image" width="612" data-src="https://opentype.space/uploads/monthly_2022_09/912038236_Bildschirmfoto2022-09-25um08_24_53.png.352bab6791a4ec7d5a5a6836f6e481f2.png" src="https://forum.woodao.net/applications/core/interface/js/spacer.png">
			</p>

			<p style="padding:0px">
				<a data-fileext="png" data-fileid="58" href="https://opentype.space/uploads/monthly_2022_09/Bildschirmfoto-2022-09-25-um-08_35_09.png.d8d7921685fee9da44aeb3ccb8976366.png" rel="external nofollow" style="color:oklch(0.15 0.0204 260); padding:0px"><img alt="Bildschirmfoto-2022-09-25-um-08.35.09.png" data-fileid="58" data-ratio="41.50" loading="lazy" style="border:0px; padding:0px; vertical-align:top" width="1000" data-src="https://opentype.space/uploads/monthly_2022_09/Bildschirmfoto-2022-09-25-um-08_35_09.thumb.png.0af65dac6a2b264ac74f4038bbea03ad.png" src="https://forum.woodao.net/applications/core/interface/js/spacer.png"></a>
			</p>

			<p style="padding:0px">
				Now that your webfonts are called with either the &lt;link&gt; or the &lt;@import&gt; method, you only need to assign them to your entire website or parts of it. Google gives you an example of the necessary “font-family” declaration. If you want to apply the webfont family to your entire website, all you have to do is apply it to the “body” element of your website in the “custom.css”.  
			</p>

			<p style="padding:0px">
				<a data-fileext="png" data-fileid="59" href="https://opentype.space/uploads/monthly_2022_09/349055609_Bildschirmfoto2022-09-25um08_38_23.png.32b51b55bafecc717a75503bcc0db714.png" rel="external nofollow" style="color:oklch(0.15 0.0204 260); padding:0px"><img alt="Bildschirmfoto 2022-09-25 um 08.38.23.png" data-fileid="59" data-ratio="41.50" loading="lazy" style="border:0px; padding:0px; vertical-align:top" width="1000" data-src="https://opentype.space/uploads/monthly_2022_09/1407196176_Bildschirmfoto2022-09-25um08_38_23.thumb.png.cd4aa973192165f38a1d2326ba0542f3.png" src="https://forum.woodao.net/applications/core/interface/js/spacer.png"></a>
			</p>

			<p style="padding:0px">
				That’s it! Your website should now use the webfont from Google’s webfont service. If you want to add more variations, you could also load additional fonts and assign them to dedicated areas, for example certain headlines. But keep in mind: with every font you add you slow down the loading of your pages a little bit. 
			</p>

			<p style="padding:0px">
				<a data-fileext="png" data-fileid="60" href="https://opentype.space/uploads/monthly_2022_09/1874262506_Bildschirmfoto2022-09-25um08_47_07.png.345ed217801d64b7e4e13567afe41d96.png" rel="external nofollow" style="color:oklch(0.15 0.0204 260); padding:0px"><img alt="Bildschirmfoto 2022-09-25 um 08.47.07.png" data-fileid="60" data-ratio="44.90" loading="lazy" style="border:0px; padding:0px; vertical-align:top" width="1000" data-src="https://opentype.space/uploads/monthly_2022_09/1888493498_Bildschirmfoto2022-09-25um08_47_07.thumb.png.8f257bf607c84dc889285b889d4cc483.png" src="https://forum.woodao.net/applications/core/interface/js/spacer.png"></a>
			</p>

			<p style="padding:0px">
				<em style="padding:0px">Example where another font is used just for main headlines</em>
			</p>

			<p style="padding:0px">
				 
			</p>

			<h1 style="color:oklch(0.15 0.0204 260); font-size:clamp(1.7em, 1em + 2.3vw, 3em); padding:0px">
				B) Delivering the webfonts from your web server
			</h1>

			<p style="padding:0px">
				Loading the webfonts directly from the webfont service is certainly the most convenient way. But you might also want to deliver all resources directly from your website, for example for privacy reasons. In Germany, website owners can even be sued for using webfonts in a way that unnecessarily contacts Google servers. In this section we discuss how you can deliver your webfonts from your own web server. 
			</p>

			<p style="padding:0px">
				Before using this method, make sure you have a license to upload the fonts to your server. This use is certainly allowed for Google Fonts and other fonts using liberal licenses like the Open Font License (OFL). But for commercial fonts, you usually need to purchase a dedicated webfont licence. Keep in mind: just because you can find a font for free on the internet doesn’t mean that it is actually free to use. 
			</p>

			<p style="padding:0px">
				The Google Font service allows you to download the fonts you selected. Unfortunately, the download contains the source fonts, not the optimized webfont versions you need for self-hosting. You should never upload the original TTF fonts to your website, because their file size will be way too large. A TTF font might have 300 KB while as a webfont in the WOFF format it might have just 30 KB. 
			</p>

			<p style="padding:0px">
				So, make sure you have a proper package of webfonts in the WOFF format. For commercial fonts, this is usually delivered after the purchase of a webfont license. For free fonts, you can also create webfont packages with the<span> </span><a href="https://www.fontsquirrel.com/tools/webfont-generator" rel="external nofollow" style="color:oklch(0.15 0.0204 260); padding:0px" target="_blank">Fontsquirrel Wefont Generator</a>. But for Google fonts, I suggest to rely on a separate service like the Google Webfonts Helper:
			</p>

			<p style="padding:0px">
				<a href="https://gwfh.mranftl.com/fonts" rel="external nofollow" style="color:oklch(0.15 0.0204 260); padding:0px" target="_blank">https://gwfh.mranftl.com/fonts</a>
			</p>

			<p style="padding:0px">
				Let’s go through an example and choose the<span> </span><a href="https://google-webfonts-helper.herokuapp.com/fonts/vollkorn?subsets=latin" rel="external nofollow" style="color:oklch(0.15 0.0204 260); padding:0px" target="_blank">Vollkorn type family</a><span> </span>this time. 
			</p>

			<p style="padding:0px">
				<a data-fileext="png" data-fileid="61" href="https://opentype.space/uploads/monthly_2022_09/1242735608_Bildschirmfoto2022-09-25um09_27_32.png.f69142be8ee9bf8c1c2b7791170f3fd1.png" rel="external nofollow" style="color:oklch(0.15 0.0204 260); padding:0px"><img alt="Bildschirmfoto 2022-09-25 um 09.27.32.png" data-fileid="61" data-ratio="69.30" loading="lazy" style="border:0px; padding:0px; vertical-align:top" width="1000" data-src="https://opentype.space/uploads/monthly_2022_09/642009932_Bildschirmfoto2022-09-25um09_27_32.thumb.png.776b0974ff96caf5eb28d6360d1476cf.png" src="https://forum.woodao.net/applications/core/interface/js/spacer.png"></a>
			</p>

			<p style="padding:0px">
				Let’s pick four styles again (regular, italic, bold and bold italic). You can also pick the language system support you need. This is useful, because if your website is English-only, you don’t need to deliver Greek and Cyrillic characters. 
			</p>

			<p style="padding:0px">
				You can also choose which font formats will be created. “Best support” sounds reasonable, but it also creates really outdated font format options. I recommend the choice “Modern Browsers” and in fact, you could reduce it even more. Usually there is only a small file size improvement between WOFF and WOFF2. As a result, it is usually enough to just deliver the WOFF files. 
			</p>

			<p style="padding:0px">
				The following step depends on whether you are a self-hosted IPS client or not. If you are self-hosted, you can just upload the fonts to your web server via FTP. If you a cloud customer, you need to use a work-around. 
			</p>

			<h2 style="color:oklch(0.15 0.0204 260); font-size:clamp(1.5em, 1em + 1.9vw, 2.2em); padding:0px">
				Option 1: Upload fonts via FTP
			</h2>

			<p style="padding:0px">
				Download the font package and upload it to a new folder (for example labelled “webfonts”) to your server. Make sure you know the public path to this folder. Now copy the font-face declaration you got from Google Webfonts Helper or your webfont provider. Paste it into your custom.css and adjust the URLs to the font files. Below is only one style to show the principle.
			</p>

			<pre data-ips-text-highlighted="yes" data-language="CSS" spellcheck="" style="border-color:color(srgb 0.860637 0.875456 0.899268); border-image:none 100% / 1 / 0 stretch; border-inline-start-width:4px; border-radius:6px; border-style:solid; border-width:0px; color:#383a42; font-size:max(0.9em, 13px); padding:1.3em"><code style="padding:0px"><span style="color:#a626a4; padding:0px">@font-face</span> {
  <span style="color:#50a14f; padding:0px">font-family</span>: <span style="color:#50a14f; padding:0px">'Vollkorn'</span>;
  <span style="color:#50a14f; padding:0px">font-style</span>: normal;
  <span style="color:#50a14f; padding:0px">font-weight</span>: <span style="color:#986801; padding:0px">400</span>;
  <span style="color:#50a14f; padding:0px">src</span>: <span style="color:#c18401; padding:0px">url</span>(<span style="color:#50a14f; padding:0px">'/xtra/webfonts/vollkorn-v21-latin-ext_latin-regular.woff'</span>) <span style="color:#c18401; padding:0px">format</span>(<span style="color:#50a14f; padding:0px">'woff'</span>); 
}</code></pre>

			<p style="padding:0px">
				As before, we need to apply our new family to our website. 
			</p>

			<pre data-ips-text-highlighted="yes" data-language="CSS" spellcheck="" style="border-color:color(srgb 0.860637 0.875456 0.899268); border-image:none 100% / 1 / 0 stretch; border-inline-start-width:4px; border-radius:6px; border-style:solid; border-width:0px; color:#383a42; font-size:max(0.9em, 13px); padding:1.3em"><code style="padding:0px"><span style="color:#e45649; padding:0px">body</span> {
<span style="color:#50a14f; padding:0px">font-family</span>: <span style="color:#50a14f; padding:0px">'Vollkorn'</span>, serif;
}</code></pre>

			<h2 style="color:oklch(0.15 0.0204 260); font-size:clamp(1.5em, 1em + 1.9vw, 2.2em); padding:0px">
				Option 2: Upload fonts as a theme resource
			</h2>

			<p style="padding:0px">
				If you cannot use FTP you can also upload the webfonts as a theme resource. In this case, it it especially useful to limit the font format option and only use WOFF. We use the Google font “Work Sans” this time.
			</p>

			<p style="padding:0px">
				Start with your main theme and access the Theme Resources as shown below.
			</p>

			<p style="padding:0px">
				<img alt="Bildschirmfoto 2022-10-04 um 10.42.56.png" data-fileid="62" data-ratio="36.23" loading="lazy" style="border:0px; padding:0px; vertical-align:top" title="Enlarge image" width="806" data-src="https://opentype.space/uploads/monthly_2022_10/1659850525_Bildschirmfoto2022-10-04um10_42_56.png.d0bec3323f4f57b483794bcd86b14bad.png" src="https://forum.woodao.net/applications/core/interface/js/spacer.png">
			</p>

			<p style="padding:0px">
				Now click the button “Add resource”. Leave all the settings as they are. You want to create a global System resource. Select your WOFF file using the “Resource” button or drag the font file on this button. Click the “Save” button. Find your file in the list of theme resources. Copy the template tag that was assigned to the font file. 
			</p>

			<p style="padding:0px">
				<a data-fileext="png" data-fileid="63" href="https://opentype.space/uploads/monthly_2022_10/Bildschirmfoto-2022-10-04-um-10_51_42.png.dd606132b669d2909afa0dc114b6885a.png" rel="external nofollow" style="color:oklch(0.15 0.0204 260); padding:0px"><img alt="Bildschirmfoto-2022-10-04-um-10.51.42.png" data-fileid="63" data-ratio="5.00" loading="lazy" style="border:0px; padding:0px; vertical-align:top" width="1000" data-src="https://opentype.space/uploads/monthly_2022_10/Bildschirmfoto-2022-10-04-um-10_51_42.thumb.png.517a5be03551a2a1c9759574174cee35.png" src="https://forum.woodao.net/applications/core/interface/js/spacer.png"></a>
			</p>

			<p style="padding:0px">
				Now use the template tag as URL for your “font-face” declaration in your “custom.css”.
			</p>

			<pre data-ips-text-highlighted="yes" data-language="CSS" spellcheck="" style="border-color:color(srgb 0.860637 0.875456 0.899268); border-image:none 100% / 1 / 0 stretch; border-inline-start-width:4px; border-radius:6px; border-style:solid; border-width:0px; color:#383a42; font-size:max(0.9em, 13px); padding:1.3em"><code style="padding:0px"><span style="color:#a626a4; padding:0px">@font-face</span> {
  <span style="color:#50a14f; padding:0px">font-family</span>: <span style="color:#50a14f; padding:0px">'Work Sans'</span>;
  <span style="color:#50a14f; padding:0px">font-style</span>: normal;
  <span style="color:#50a14f; padding:0px">font-weight</span>: <span style="color:#986801; padding:0px">400</span>;
  <span style="color:#50a14f; padding:0px">src</span>: <span style="color:#c18401; padding:0px">url</span>(<span style="color:#50a14f; padding:0px">'{resource="work-sans-v18-latin-regular.woff" app="core" location="global"}'</span>) <span style="color:#c18401; padding:0px">format</span>(<span style="color:#50a14f; padding:0px">'woff'</span>); 
}</code></pre>

			<p style="padding:0px">
				Repeat this step for all font styles you want to use in this theme. For your main font family, you should have these four fonts available:
			</p>

			<ol style="padding:0px">
				<li style="padding:0px">
					<p style="padding:0px">
						regular (font-style: normal, font-weight 400)
					</p>
				</li>
				<li style="padding:0px">
					<p style="padding:0px">
						italic (font-style italic, font-weight 400)
					</p>
				</li>
				<li style="padding:0px">
					<p style="padding:0px">
						bold (font-style normal, font-weight 700)
					</p>
				</li>
				<li style="padding:0px">
					<p style="padding:0px">
						bold italic (font-style: italic, font-weight 700)
					</p>
				</li>
			</ol>

			<p style="padding:0px">
				Always assign these values if you use four styles. It doesn’t really matter if the values match the numbers from the webfont provider. You could prefer a light style but declare it the “regular” by defining it as “font-weight: 400" or you define the extra-black as “bold” by setting it as “font-weight: 700”. Of course every style needs to be distinct. If you assign a combination of font-style and font-weight twice, the first declaration will be overwritten. 
			</p>

			<p style="padding:0px">
				If you have multiple themes, you can go through all your themes and assign different families or the same font family. Just make sure you use the template tags from the current theme. 
			</p>
		</div>
	</div>
</div>
]]></description><guid isPermaLink="false">19</guid><pubDate>Sun, 22 Feb 2026 10:23:17 +0000</pubDate></item></channel></rss>
