Taiga / Adding Custom Fonts

It's good to know that by default the theme uses two font families, one for body and one for headings. The body font family is also supported in bold, cursive and bold+cursive. Meaning the theme will upload dedicated fonts for each of those styles.

By default we support five (5) font files in the theme:

Font for Heading (matching the desired weight and style)
Fonts for Body
Body font regular
Body font when bold applied
Body font when cursive applied
Body font when cursive and bold applied

Adding Google Web Fonts

1. Get embed code from fonts.google.com The embed code must contain the following styles:

For heading: One style
For body font: Regular, Italic, Bold, Bold and Italic

2. Add the embed code to Theme Settings > Advanced > Custom liquid <head>

3. Change the font families and style and weight values on the attached <style> code

4. Add the updated <style> code after the embed code in the same field (Theme Settings > Advanced > Custom liquid <head>)

5. Turn off Theme's original custom fonts for better performance by changing them to system font: Theme Settings > Typography > Heading/Body font

Example of the Custom Liquid <head> value below:

<link rel="preconnect" href="https://fonts.googleapis.com/">https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com/">https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bungee+Spice&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap">https://fonts.googleapis.com/css2?family=Bungee+Spice&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap" rel="stylesheet">


<style type="text/css">
:root {
--font-body-family: "Josefin Sans", sans-serif; /* Use the previously defined font-family */
--font-body-style: normal; /* Use the previously defined font-style */
--font-body-weight: 300; /* Use the previously defined font-weight */

--font-heading-family: "Bungee Spice", sans-serif; /* Use the previously defined font-family */
--font-heading-style: normal; /* Use the previously defined font-style */
--font-heading-weight: 400; /* Use the previously defined font-weight */
}
</style>

Custom fonts instructions:

Upload the font files to Shopify files. File names should match the weight and style of the font. Woff2 is our recommended font file format.
Create preload links code for each uploaded file (sample below). Add the code to Theme Settings > Advanced > Custom liquid <head>
Create CSS @fontface-specs for each uploaded font. Add the code to Theme Settings > Advanced > Custom liquid <head>
Overwrite the default font-related CSS variables with your custom settings. Add the code to Theme Settings > Advanced > Custom liquid <head>
(Use a system font as default font in the theme settings to prevent uploading unused font files. Theme settings > Typography > Heading/Body Font.)

<link rel="preload" as="font" fetchpriority="high" href="{{ 'ABCProphet-Heading-bold.woff2' | file_url }}" type="font/woff2" crossorigin>
<link rel="preload" as="font" fetchpriority="high" href="{{ 'ABCProphet-Body-Light.woff2' | file_url }}" type="font/woff2" crossorigin>
<link rel="preload" as="font" fetchpriority="high" href="{{ 'ABCProphet-Body-Bold.woff2' | file_url }}" type="font/woff2" crossorigin>
<link rel="preload" as="font" fetchpriority="high" href="{{ 'ABCProphet-Body-Italic.woff2' | file_url }}" type="font/woff2" crossorigin>
<link rel="preload" as="font" fetchpriority="high" href="{{ 'ABCProphet-Body-Bold-Italic.woff2' | file_url }}" type="font/woff2" crossorigin>
<style>
/* STEP 3 */
@font-face {
font-family: 'Prophet Heading'; /* Match the family name. Don't include font weight into the name. */
font-weight: 700; /* Match the font weight */
font-style: normal; /* normal || italic */
font-display: swap;
src: url("{{ 'ABCProphet-Heading-bold.woff2' | file_url }}") format("woff2");
}
@font-face {
font-family: 'Prophet Body'; /* Match the family name. Don't include font weight into the name. */
font-weight: 300; /* Match the font weight */
font-style: normal; /* normal || italic */
font-display: swap;
src: url("{{ 'ABCProphet-Body-Light.woff2' | file_url }}") format("woff2");
}
@font-face {
font-family: 'Prophet Body'; /* Match the family name. Don't include font weight into the name. */
font-weight: 700; /* Match the font weight */
font-style: normal; /* normal || italic */
font-display: swap;
src: url("{{ 'ABCProphet-Body-Bold.woff2' | file_url }}") format("woff2");
}
@font-face {
font-family: 'Prophet Body'; /* Match the family name. Don't include font weight into the name. */
font-weight: 300; /* Match the font weight */
font-style: italic; /* normal || italic */
font-display: swap;
src: url("{{ 'ABCProphet-Body-Italic.woff2' | file_url }}") format("woff2");
}
@font-face {
font-family: 'Prophet Body'; /* Match the family name. Don't include font weight into the name. */
font-weight: 700; /* Match the font weight */
font-style: italic; /* normal || italic */
font-display: swap;
src: url("{{ 'ABCProphet-Body-Bold-Italic.woff2' | file_url }}") format("woff2");
}

/* STEP 4 */
:root {
--font-body-family: 'Prophet Body', sans-serif; /* Use the previously defined font-family */
--font-body-style: normal; /* Use the previously defined font-style */
--font-body-weight: 300; /* Use the previously defined font-weight */
--font-heading-family: 'Prophet Heading', sans-serif; /* Use the previously defined font-family */
--font-heading-style: normal; /* Use the previously defined font-style */
--font-heading-weight: 700; /* Use the previously defined font-weight */
}
</style>