web-applicationsgoogle-fontsqwikjs

how to use google font in a Qwik application?

I want to use a font from google-font in my newly created qwik project.

The steps I followed:

  1. since qwik applications doesn't have a index.html like react, I imported selected font into global.css file.
  2. tried to refer the font name on css's font-family property.

Expected result: I should able to refer the imported google font anywhere in a css file.

Solution

  • import google font inside global.css

    @import url("https://fonts.googleapis.com/css2?family=Rokkitt:wght@200;800&display=swap");

    Next you can use font-family: 'Rokkitt', serif; anywhere inside your project.

    Also qwik have root.tsx where you can put your scripts and styles in head or body according to your use cases.

    If you need to apply any changes in html element you can use entry.ssr.tsx file

    import {
  renderToStream,
  type RenderToStreamOptions,
} from "@builder.io/qwik/server";
import { manifest } from "@qwik-client-manifest";
import Root from "./root";

export default function (opts: RenderToStreamOptions) {
  return renderToStream(<Root />, {
    manifest,
    ...opts,
    // Use container attributes to set attributes on the html tag.
    containerAttributes: {
      lang: "en-us", // <html lang="en-us">
      theme: "dark",  // <html theme="dark">
      ...opts.containerAttributes,
    },
  });
}

    I have created a working examples for you and integrated google fonts