Loading the stylesheets and scripts on my website
While your code is technically review-able, any review won't help you with your request, because the limited example page doesn't provide a realistic use case for your site, mostly because it doesn't have a style sheet and doesn't actually use any of the fonts, so they won't be downloaded.

Why do want to have the HTML "remain legible"? (Minifying HTML usually doesn't help much with performance anyway, but it's a strange reason for not wanting to do it).

There are automatized performance tests out there, which should be your first stop. For example, Google Chrome's Lighthouse: https://googlechrome.github.io/lighthouse/viewer/?psiurl=http%3A%2F%2Fdiscourse.rf.gd%2F%3Fi%3D1&amp;strategy=mobile&amp;category=performance&amp;category=accessibility&amp;category=best-practices&amp;category=seo&amp;category=pwa&amp;utm_source=lh-chrome-ext

One big resource hog is jQuery. Unless you are using every single feature it provides multiple times, you shouldn't be using it, if performance is important to you.

Make sure you are actually using the fonts and corresponding style sheets.



Some remarks to the HTML:


Don't use on* attributes to add JavaScript event listeners. You generally want to keep HTML, CSS and JavaScript separate. Event handlers are part of the JavaScript and don't belong in the HTML, just like you don't use style attributes to assign CSS in the HTML. See https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Inline_event_handlers_%E2%80%94_dont_use_these
Don't (only) use JavaScript to handle the login. Use a normal HTTP POST from the form.
Don't use &lt;br&gt;s for line breaks or spacing. They are for logical line breaks such as lines in a postal address or in the stanzas of poems. To separate the input fields of a form wrap each label/field  pair in a block element, such as a div, or put the input inside the label and give the label display: block.