how to use google font in a Qwik application?

Question

how to use google font in a Qwik application?

393 views Asked by thinklikeatechy At 13 September 2023 at 05:02

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

The steps I followed:

since qwik applications doesn't have a index.html like react, I imported selected font into global.css file.
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.

Original Q&A

There are 1 answers

**Harsh Mangalam** · Accepted Answer · 2023-09-14T01:20:14+00:00

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

Open codesandbox using https://codesandbox.io/p/sandbox/damp-wind-7mx64g
Visit /demo/todolist
google font added in todo heading

TechQA.

how to use google font in a Qwik application?

There are 1 answers

Related Questions in WEB-APPLICATIONS

Related Questions in GOOGLE-FONTS

Related Questions in QWIKJS

Popular Questions

Popular Tags

Trending Questions