How Fonts Work on a Web Page and How to Change Them

By the Qorlize team · Last reviewed November 11, 2026

Finipage guide · Edit HTML files without code. Open Finipage

You change the font in a page, it looks right on your laptop, and a colleague opening the same file sees something plain and different. Or bold headings look smeared. Both come from how browsers pick fonts: a page does not contain its fonts, it only asks for them.

font-family is a wish list, not an order

A font is chosen in CSS with font-family:

body {
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

The browser reads this list left to right and uses the first font it can actually find. If Pretendard is neither loaded nor installed, it tries Apple SD Gothic Neo (on Macs and iPhones), then Malgun Gothic (on Windows), and finally sans-serif, a generic name for the device's default plain font. Names with spaces go in quotes; always end with a generic name, unquoted.

This explains "looks right on my computer". A font installed on your own machine and listed in font-family is found by your browser. Your visitors do not have it, so they get the next item on the list.

System fonts and web fonts

System fonts are already installed on the visitor's device: Malgun Gothic on Windows, Apple SD Gothic Neo on Apple devices, and so on. They cost nothing to load, but they differ by device, so the same page looks slightly different on each.

Web fonts are font files the browser downloads along with the page, so everyone sees the same typeface. There are two common ways to load one. The first is a stylesheet link from a font service. Google Fonts gives you a line like this to paste into the head:

<link rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap">

wght@400;700 requests regular and bold. display=swap shows text in a fallback font right away and switches when the web font arrives, instead of hiding the text. Then name the font in your CSS: font-family: "Noto Sans KR", sans-serif;.

The second way is a CDN link published by the font's own project. Pretendard's official repository documents a jsDelivr link such as:

<link rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">

Version numbers change over time, so copy the current link from the project page, not an old tutorial. You can also host font files yourself next to the HTML and declare them with @font-face.

Why Korean web fonts are heavy, and what subsetting does

A Latin font needs a few hundred characters. Unicode defines 11,172 precomposed Hangul syllables, and a Korean font usually also carries Latin letters, symbols and often Hanja. A complete Korean font file is therefore many times larger than an English one, often megabytes rather than tens of kilobytes, and each weight you load adds another file.

The fix is subsetting: shipping only the characters a page needs.

Splitting by character range. The font is cut into many small files, each covering a slice of characters, and the browser downloads only the slices that appear on the page. Pretendard publishes a "dynamic subset" stylesheet, pretendard-dynamic-subset.min.css, that works this way, plus a variable-font version of it.
Exact text. Google Fonts accepts a text= parameter that returns a font containing only the characters you list. Its documentation says this can cut file size by up to 90%. It suits a logo or one headline, not body text that changes.
Fewer weights. Each weight is a separate download. Two weights (400 and 700) cover most pages.

Pretendard and Noto Sans KR are the Korean web fonts you will meet most often. Pretendard is an open-source sans-serif on GitHub with nine weights plus a variable version; Noto Sans KR, the Korean member of Google's Noto family, loads directly from Google Fonts.

Licenses: free to download is not the same as free to use

Fonts are licensed software. Check the license before using one on a commercial site.

Pretendard is released under the SIL Open Font License (OFL). The project states that commercial use, modification and redistribution are allowed, with selling the font on its own as the exception.
Noto Sans CJK, which Noto Sans KR comes from, is also under the SIL Open Font License 1.1, per the license file in its official repository.
Google Fonts describes its catalogue as open source. Most fonts there use the OFL, and a few use other licenses such as Apache, so open the license on each font's page.

Be more careful with fonts from "free font" collections. Some are free for personal use only, some forbid web embedding, and some Korean fonts released by companies carry their own terms. Find the license file or the maker's license page and check three things: commercial use, use on websites, and whether you may modify or subset the file. No license, no business use.

Weights, and why bold sometimes looks fake

font-weight takes values from 100 to 900; normal equals 400 and bold equals 700. The browser can only show weights that were actually loaded. If you load 400 and 700 and ask for 600, the browser picks the nearest loaded weight according to a set rule, so 600 shows up as 700. Ask for 300 when only 400 and 700 exist and you get 400.

When no bold face is available and the text is bold, browsers may synthesize one by thickening the regular letters. This faux bold looks smudged, especially on dense Hangul strokes; MDN notes that many Chinese, Japanese and Korean fonts lack bold and italic faces. Two fixes:

Load the weight you use, for example add 700 to the Google Fonts URL.
Or tell the browser not to fake it with font-synthesis: none;, accepting that the text then stays regular.

If you set a weight like 800 and it looks the same as 700, the 800 file probably was not loaded. Check the font link in the head and the weights it requests.

Line height and letter spacing for Korean

Hangul blocks are tall and dense, so Korean body text usually needs more line spacing than English. A line-height of roughly 1.6 to 1.8 is a common starting point for paragraphs; headings can be tighter, around 1.3. Write it without units (line-height: 1.7;) so it scales with the font size.

For letter-spacing, many Korean sites tighten large headings slightly, such as -0.02em. Keep body text at or near zero; tightening small Hangul quickly hurts readability. Also useful: word-break: keep-all; stops lines from breaking in the middle of a Korean word, so headings wrap more naturally.

Changing fonts in your own file

To switch the typeface itself, you edit code: add the font's <link> line to the head and change the font-family value in the <style> block or the CSS file. Notepad or VS Code is the right tool for this. The guide on HTML file structure shows where those lines live and how to find the rule with the browser's Inspect tool.

Finipage covers the other half. Select a heading or paragraph and the properties panel lets you set font size, line height (as a multiplier), weight from 100 to 900, and alignment, plus bold, italic, underline and strikethrough. Selecting part of a sentence applies size or weight to just that part. It has no font-family field, so changing which font is used still means the text-editor step above. A practical order: add the font link and font-family in a text editor, then open the file in the editor to tune sizes and spacing at desktop and phone widths. Choosing 600 in the panel only differs from 700 if a 600 weight was loaded.

Then check the page on a phone, where slow font loading and tight spacing show first.

Want to try it on your own file? Open the Finipage editor. It runs in your browser and your file stays on your device.