Why Blogspot (Blogger) Fonts Keep Changing — and How to Lock Yours In
When you first start using Blogspot (Google Blogger), one of the most confusing things is font behavior. You pick a font in the editor, but the public-facing page sometimes shows something else. Or you change themes and suddenly the whole site uses a different typeface. It feels like the editor is ignoring you.
That frustration is real. Fonts and spacing are not just decoration — they shape readability, tone, and the visual identity of your blog. If you can’t make them stable, you end up fixing the same thing repeatedly. That wastes time and makes your site look inconsistent.
Why fonts change when you switch themes
The theme you apply in Blogger does more than pick colors and layout. It also includes CSS rules for fonts, headings, paragraph spacing, link styles and many other visual details. When you swap themes, the theme’s CSS takes precedence. That overrides any choices you made inside the editor unless you explicitly override them.
So each time you apply or upload a theme, you may need to reapply font changes unless you use a method that wins over the theme's CSS.
You can avoid repeating the same edits. The solution: load your chosen font at the site level, then force it inside posts with CSS using higher priority rules.
Step 1 — Load the font so the entire blog can use it
First, declare which webfont the blog will use and make sure that font is loaded for every page. Doing this at the theme level avoids missing fonts and reduces FOUT (flash of unstyled text).
How to get a Google Fonts embed link
- Open Google Fonts.
- Choose the font you want and click “Select this style” or the "Get" option.
- Click the embed (<>) panel and copy the <link> code shown.
Pick a font in Google Fonts, then click the embed code (<> Get embed code).
Next, paste that <link> into your Blogger theme HTML.
Where to paste the embed link in Blogger
- Admin → Theme → click the triangle dropdown → Edit HTML.
- Find the <head> tag near the top of the theme file and paste the <link> immediately after it.
- Save the theme.
Blogger admin → Theme → dropdown → Edit HTML
Once the font link is added, the chosen webfont is available to every page. This step only needs to be done once per blog.
If you plan to use a system font (one already installed on users’ devices), loading from Google Fonts is optional. But for consistent appearance, webfonts are more reliable.
Step 2 — Force the font per-post so the theme won’t override it
In the post editor, switch to HTML view and paste a short style snippet at the very top of the post. This snippet sets the font-family (and optional font-size) for the post body and uses the CSS rule !important to override theme rules.
Example: Add this inside the post (HTML view)
<style>
.post-body, .post-body p, .post-body span {
font-family: 'Your Chosen Font', sans-serif !important;
font-size: 16px !important;
}
</style>Replace 'Your Chosen Font' with the exact name you used on Google Fonts (for example, 'Nanum Gothic' or 'Roboto'). After adding this, write your post as usual. The per-post style will hold even if the theme is swapped later.
<style>
/* Example for Nanum Gothic */
.post-body, .post-body p, .post-body span {
font-family: 'Nanum Gothic', sans-serif !important;
font-size: 16px !important;
}
</style>How this works — a short primer
- font-family: specifies the font stack.
- sans-serif: acts as a fallback if the primary font isn't available.
- !important: forces the rule to take precedence over theme CSS.
After setting this up, your posts will keep the font you want. That removes a lot of the stress of theme switching.
If you prefer not to load a webfont, you can specify a system font stack that lists preferred fonts and falls back gracefully. For instance:
font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif !important;In that example, Windows readers get 'Malgun Gothic', macOS/iOS readers get Apple SD Gothic Neo, otherwise the browser will use the generic sans-serif.
Fonts are part of your blog’s impression
Readers notice subtle things. A consistent typeface across multiple posts creates a coherent experience. That matters for blogs focused on information, storytelling, or branding.
- Readability: stable fonts and line-height help visitors read longer articles with less strain.
- Branding: a distinctive but readable font contributes to a blog’s identity.
- Visual unity: matching images, headings and body text with a single font family looks polished.
Quick troubleshooting tips
- If the font still doesn't show, check that the Google Fonts <link> is correct and saved in the theme's <head>.
- Inspect the live page with browser developer tools (right-click → Inspect) to see what CSS rule is active for
font-family. - Ensure the font name in your per-post style exactly matches the Google Fonts name (capitalization and spacing matter).
- Avoid conflicting plugins or widgets that inject CSS after your styles — they could override rules unless your snippet uses
!important.
Recommended workflow
- Choose a webfont from Google Fonts that fits your blog’s tone.
- Add the Google Fonts <link> into the theme <head> once.
- When publishing a post, paste a small <style> snippet at the post top to enforce the font.
- Test the live page and verify with dev tools that the post’s CSS is applied.
References & official docs
- Google Fonts — font selection and embed code
- Blogger Help — Customize theme — official guidance on theme and fonts
Wrapping up — keep your font steady
Once you load your chosen webfont and apply a concise per-post style, theme changes stop being a problem. You get a steady look without repeated edits. Think of it as setting a default that you own — not something the theme can overwrite.
Quick summary
| Step | What to do | Notes |
|---|---|---|
| 1 | Add Google Fonts <link> under the theme's <head> | Loads the font site-wide (do once) |
| 2 | Paste a short <style> block at the top of each post using !important |
Locks the font for each post (survives theme changes) |
| Key | !important — forces priority over theme CSS | Makes your per-post style win |
FAQ
Q: Can I apply the font site-wide without editing each post?
A: Yes — you can add global CSS to the theme that targets body and post selectors. But theme updates or some themes may still inject stronger rules. The per-post snippet is a fail-safe. If you can edit the theme's CSS and are comfortable, add a global rule there with proper specificity.
Q: Why does the font still not appear for some visitors?
A: Possible reasons: slow font loading, browser caching, or a network blocker. Check with an incognito window and use developer tools to see if the font file is requested and served correctly.
Q: What about headings and widgets — do they need separate rules?
A: If headings, sidebar widgets, or other elements use different selectors in the theme, you may need to add those selectors to your style snippet. For example: .post-body h1, .post-body h2 { font-family: 'Your Font' !important; }
Q: Is using many webfonts bad for performance?
A: Yes. Load only the weights and styles you need. Each additional font variant increases page load. Consider limiting to 1–2 font families and a small set of weights.
Q: How should I set font sizes for mobile?
A: Use responsive CSS or relative units (rem, em). For example, set a base font-size in the theme and adjust with media queries if needed. That ensures readability across devices.
댓글 쓰기