How do I implement code on the head of my site?

Implement scripts on site head

Integrations

Hi everyone,

I'm trying to figure out how to implement scripts like google fonts or adobe fonts to my site head.

how/where do I do this?

Hi Melissa,

You can do that by adding a filter to your app /src/index.ts file, here's an adobe fonts implementation example:

import { addFilter, setting } from "@factor/api"

export const setup = (): void => {
  addFilter({
    key: "adobeFont",
    hook: "factor_head",
		callback: (_: string[]): string[] => {
      const addCustomFont = `<link rel="stylesheet" href="https://use.typekit.net/yhi6nor.css" />`

      return [..._, addCustomFont]
    },
    priority: 200
  })
}

setup()

then just call the font via css in any component or your factor-styles.less file

font-family: "font-name", sans-serif;

this example loads external styles on your site head but you can load external scripts the same way via filter.

hey Melissa, Factor uses the Vue Meta module to handle adding things like meta information.

You can use metaInfo in any component or in factor-settings to add this information without using a filter.

To add something globally to meta info (head)

// factor-settings
export default {
	metaInfo: {
		 // add using Vue Meta api
	}
}