[Feature Request]: Change Font, width of blog and remove posts from permalink

[krinacool]

Hi,

I have tried so many times to change the fonts in loadGooglefont file but it's not showing in preview. I want to set font family "font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");"

This will help to improve speed of blog also please help me to change width of the website.

I have a blog in wordpress, which I want to move to astro and in that website post url is www.blogname.com/post-slug/ but in AstroPaper its www.blogname.com/posts/post-slug/. So I want to change it for seo purpose.

Waiting for reply

[guspatagonico]

Hi! I think loadGoogleFonts is being used only for Satori to create the Opengraph images in png, not for the blog's normal web view.

For the blog itself you can change fonts:

1. by adding them to the project as in pnpm add @fontsource/space-mono or pnpm add @fontsource-variable/inter (example with fonts I'm using successfully).
2. importing them into Layout.astro like this:

import "@fontsource/space-mono";
import "@fontsource-variable/inter";

3. adding them in src/styles/global.css in the @theme inline section this way:

@theme inline {
  --font-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --font-sans: "Inter Variable", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-accent: var(--accent);
  --color-muted: var(--muted);
  --color-border: var(--border);
}

And at least for me this was enough to make the font changes I needed.

---

To change the blog's width you can find all the max-w-3xl occurrences (Tailwind's utility class) and replace it with max-w-5xl (for instance).

I hope this will be helpful.

Regards

[krinacool]

Hi! I think loadGoogleFonts is being used only for Satori to create the Opengraph images in png, not for the blog's normal web view.

For the blog itself you can change fonts:

1. by adding them to the project as in pnpm add @fontsource/space-mono or pnpm add @fontsource-variable/inter (example with fonts I'm using successfully).
2. importing them into Layout.astro like this:

import "@fontsource/space-mono";
import "@fontsource-variable/inter";
3. adding them in src/styles/global.css in the @theme inline section this way:

@theme inline {
--font-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--font-sans: "Inter Variable", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-accent: var(--accent);
--color-muted: var(--muted);
--color-border: var(--border);
}
And at least for me this was enough to make the font changes I needed.

To change the blog's width you can find all the max-w-3xl occurrences (Tailwind's utility class) and replace it with max-w-5xl (for instance).

I hope this will be helpful.

Regards

Thanks for your reply.

I will try it and let you know that worked or not.

I also want to change permalink of posts. I want to migrate my wordpress blog and there is permalink looks like domain.com/post-url while here it looks like domain.com/posts/post-url

Is it possible to change it.

Waiting for reply.

[guspatagonico]

Hey @krinacool, how are you?

I also want to change permalink of posts. I want to migrate my wordpress blog and there is permalink looks like domain.com/post-url while here it looks like domain.com/posts/post-url

You can achieve this by moving /src/pages/posts/[...slug].astro to /src/pages/[...slug].astro and in the Card.astro file change add false as a third parameter to getPath in the anchor to the posts contents:

<a href={getPath(id, filePath, false)} class="inline-block text-lg font-medium text-accent decoration-dashed underline-offset-4 focus-visible:no-underline focus-visible:underline-offset-0">

Make a backup or a git commit first in case you need to revert changes.

Best regards