Font file not appearing on dawn theme

Technical Q&A
,
1

Brittany font is not appearing on my theme, the name is brittany but it’s a different font, can someone please help ?

:root {
–alpha-button-background: 1;
–alpha-button-border: 1;
–alpha-link: 0.85;
–alpha-badge-border: 0.1;
}

.product-card-wrapper .card,
.contains-card–product {
–border-radius: var(–product-card-corner-radius);
–border-width: var(–product-card-border-width);
–border-opacity: var(–product-card-border-opacity);
–shadow-horizontal-offset: var(–product-card-shadow-horizontal-offset);
–shadow-vertical-offset: var(–product-card-shadow-vertical-offset);
–shadow-blur-radius: var(–product-card-shadow-blur-radius);
–shadow-opacity: var(–product-card-shadow-opacity);
–shadow-visible: var(–product-card-shadow-visible);
–image-padding: var(–product-card-image-padding);
–text-alignment: var(–product-card-text-alignment);
}

.collection-card-wrapper .card,
.contains-card–collection {
–border-radius: var(–collection-card-corner-radius);
–border-width: var(–collection-card-border-width);
–border-opacity: var(–collection-card-border-opacity);
–shadow-horizontal-offset: var(–collection-card-shadow-horizontal-offset);
–shadow-vertical-offset: var(–collection-card-shadow-vertical-offset);
–shadow-blur-radius: var(–collection-card-shadow-blur-radius);
–shadow-opacity: var(–collection-card-shadow-opacity);
–shadow-visible: var(–collection-card-shadow-visible);
–image-padding: var(–collection-card-image-padding);
–text-alignment: var(–collection-card-text-alignment);
}

.article-card-wrapper .card,
.contains-card–article {
–border-radius: var(–blog-card-corner-radius);
–border-width: var(–blog-card-border-width);
–border-opacity: var(–blog-card-border-opacity);
–shadow-horizontal-offset: var(–blog-card-shadow-horizontal-offset);
–shadow-vertical-offset: var(–blog-card-shadow-vertical-offset);
–shadow-blur-radius: var(–blog-card-shadow-blur-radius);
–shadow-opacity: var(–blog-card-shadow-opacity);
–shadow-visible: var(–blog-card-shadow-visible);
–image-padding: var(–blog-card-image-padding);
–text-alignment: var(–blog-card-text-alignment);
}

.contains-content-container,
.content-container {
–border-radius: var(–text-boxes-radius);
–border-width: var(–text-boxes-border-width);
–border-opacity: var(–text-boxes-border-opacity);
–shadow-horizontal-offset: var(–text-boxes-shadow-horizontal-offset);
–shadow-vertical-offset: var(–text-boxes-shadow-vertical-offset);
–shadow-blur-radius: var(–text-boxes-shadow-blur-radius);
–shadow-opacity: var(–text-boxes-shadow-opacity);
–shadow-visible: var(–text-boxes-shadow-visible);
}

.contains-media,
.global-media-settings {
–border-radius: var(–media-radius);
–border-width: var(–media-border-width);
–border-opacity: var(–media-border-opacity);
–shadow-horizontal-offset: var(–media-shadow-horizontal-offset);
–shadow-vertical-offset: var(–media-shadow-vertical-offset);
–shadow-blur-radius: var(–media-shadow-blur-radius);
–shadow-opacity: var(–media-shadow-opacity);
–shadow-visible: var(–media-shadow-visible);
}

/* base */

.no-js:not(html) {
display: none !important;
}

html.no-js .no-js:not(html) {
display: block !important;
}

.no-js-inline {
display: none !important;
}

html.no-js .no-js-inline {
display: inline-block !important;
}

html.no-js .no-js-hidden {
display: none !important;
}

.page-width {
max-width: var(–page-width);
margin: 0 auto;
padding: 0 1.5rem;
}

body:has(.section-header .drawer-menu) .announcement-bar-section .page-width {
max-width: 100%;
}

.page-width.drawer-menu {
max-width: 100%;
}

.page-width-desktop {
padding: 0;
margin: 0 auto;
}

.utility-bar__grid.page-width {
padding-left: 3rem;
padding-right: 3rem;
}

@media screen and (min-width: 750px) {
.page-width {
padding: 0 5rem;
}

.header.page-width,
.utility-bar__grid.page-width {
padding-left: 3.2rem;
padding-right: 3.2rem;
}

.page-width–narrow {
padding: 0 9rem;
}

.page-width-desktop {
padding: 0;
}

.page-width-tablet {
padding: 0 5rem;
}
}

@media screen and (min-width: 990px) {
.header:not(.drawer-menu).page-width {
padding-left: 5rem;
padding-right: 5rem;
}

.page-width–narrow {
max-width: 72.6rem;
padding: 0;
}

.page-width-desktop {
max-width: var(–page-width);
padding: 0 5rem;
}
}

.isolate {
position: relative;
z-index: 0;
}

.section + .section {
margin-top: var(–spacing-sections-mobile);
}

@media screen and (min-width: 750px) {
.section + .section {
margin-top: var(–spacing-sections-desktop);
}
}

.element-margin-top {
margin-top: 5rem;
}

@media screen and (min-width: 750px) {
.element-margin {
margin-top: calc(5rem + var(–page-width-margin));
}
}

.background-secondary {
background-color: rgba(var(–color-foreground), 0.04);
}

.grid-auto-flow {
display: grid;
grid-auto-flow: column;
}

.page-margin,
.shopify-challenge__container {
margin: 7rem auto;
}

.rte-width {
max-width: 82rem;
margin: 0 auto 2rem;
}

.list-unstyled {
margin: 0;
padding: 0;
list-style: none;
}

.hidden {
display: none !important;
}

.visually-hidden {
position: absolute !important;
overflow: hidden;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
clip: rect(0 0 0 0);
word-wrap: normal !important;
}

.visually-hidden–inline {
margin: 0;
height: 1em;
}

.overflow-hidden {
overflow: hidden;
}

.skip-to-content-link:focus {
z-index: 9999;
position: inherit;
overflow: auto;
width: auto;
height: auto;
clip: auto;
}

.full-width-link {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
}

::selection {
background-color: rgba(var(–color-foreground), 0.2);
}

.text-body {
font-size: 1.5rem;
letter-spacing: 0.06rem;
line-height: calc(1 + 0.8 / var(–font-body-scale));
font-family: var(–font-body-family);
font-style: var(–font-body-style);
font-weight: var(–font-body-weight);
}

h1,
h2,
h3,
h4,
h5,
.h0,
.h1,
.h2,
.h3,
.h4,
.h5 {
font-family: Cinzel !important;
font-style: var(–font-heading-style);
font-weight: var(–font-heading-weight);
letter-spacing: calc(var(–font-heading-scale) * 0.06rem);
color: rgb(var(–color-foreground));
line-height: calc(1 + 0.3 / max(1, var(–font-heading-scale)));
word-break: break-word;
}

.hxl {
font-size: calc(var(–font-heading-scale) * 5rem);
}

@media only screen and (min-width: 750px) {
.hxl {
font-size: calc(var(–font-heading-scale) * 6.2rem);
}
}

.h0 {
font-size: calc(var(–font-heading-scale) * 4rem);
}

@media only screen and (min-width: 750px) {
.h0 {
font-size: calc(var(–font-heading-scale) * 5.2rem);
}
}

h1,
.h1 {
font-size: calc(var(–font-heading-scale) * 3rem);
}

@media only screen and (min-width: 750px) {
h1,
.h1 {
font-size: calc(var(–font-heading-scale) * 4rem);
}
}

h2,
.h2 {
font-size: calc(var(–font-heading-scale) * 2rem);
}

@media only screen and (min-width: 750px) {
h2,
.h2 {
font-size: calc(var(–font-heading-scale) * 2.4rem);
}
}

h3,
.h3 {
font-size: calc(var(–font-heading-scale) * 1.7rem);
}

@media only screen and (min-width: 750px) {
h3,
.h3 {
font-size: calc(var(–font-heading-scale) * 1.8rem);
}
}

h4,
.h4 {
font-family: var(–font-heading-family);
font-style: var(–font-heading-style);
font-size: calc(var(–font-heading-scale) * 1.5rem);
}

h5,
.h5 {
font-size: calc(var(–font-heading-scale) * 1.2rem);
}

@media only screen and (min-width: 750px) {
h5,
.h5 {
font-size: calc(var(–font-heading-scale) * 1.3rem);
}
}

h6,
.h6 {
color: rgba(var(–color-foreground), 0.75);
margin-block-start: 1.67em;
margin-block-end: 1.67em;
}

//adding a new font/
@font-face {
font-family: Brittany;
src: url(https://cdn.shopify.com/s/files/1/0603/7484/3489/files/Lovestory_Alt_SVG_web_optimized.otf?v=1786553567) format(woff2),
url(https://cdn.shopify.com/s/files/1/0603/7484/3489/files/Lovestory_Alt_SVG_web_optimized.otf?v=1786553567) format(woff),
url(https://cdn.shopify.com/s/files/1/0603/7484/3489/files/Lovestory_Alt_SVG_web_optimized.otf?v=1786553567) format(ttf),
url(https://cdn.shopify.com/s/files/1/0603/7484/3489/files/Lovestory_Alt_SVG_web_optimized.otf?v=1786553567) format(.otf?v);
}

//adding a new font all headers when in bold/

h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong {
font-family: Brittany !important;
font-weight: 4px !important;
letter-spacing: 0rem !important;
font-size: 60px;
}

blockquote {
font-style: italic;
color: rgba(var(–color-foreground), 0.75);
border-left: 0.2rem solid rgba(var(–color-foreground), 0.2);
padding-left: 1rem;
}

@media screen and (min-width: 750px) {
blockquote {
padding-left: 1.5rem;
}
}

.caption {
font-size: 1rem;
letter-spacing: 0.07rem;
line-height: calc(1 + 0.7 / var(–font-body-scale));
}

@media screen and (min-width: 750px) {
.caption {
font-size: 1.2rem;
}
}

.caption-with-letter-spacing {
font-size: 1rem;
letter-spacing: 0.13rem;
line-height: calc(1 + 0.2 / var(–font-body-scale));
text-transform: uppercase;
}

.caption-with-letter-spacing–medium {
font-size: 1.2rem;
letter-spacing: 0.16rem;
}

.caption-with-letter-spacing–large {
font-size: 1.4rem;
letter-spacing: 0.18rem;
}

.caption-large,
.customer .field input,
.customer select,
.field__input,
.form__label,
.select__select {
font-size: 1.3rem;
line-height: calc(1 + 0.5 / var(–font-body-scale));
letter-spacing: 0.04rem;
}

.color-foreground {
color: rgb(var(–color-foreground));
}

table:not([class]) {
table-layout: fixed;
border-collapse: collapse;
font-size: 1.4rem;
border-style: hidden;
box-shadow: 0 0 0 0.1rem rgba(var(–color-foreground), 0.2);
/* draws the table border */
}

table:not([class]) td,
table:not([class]) th {
padding: 1em;
border: 0.1rem solid rgba(var(–color-foreground), 0.2);
}

@media screen and (max-width: 749px) {
.small-hide {
display: none !important;
}
}

@media screen and (min-width: 750px) and (max-width: 989px) {
.medium-hide {
display: none !important;
}
}

@media screen and (min-width: 990px) {
.large-up-hide {
display: none !important;
}
}

.left {
text-align: left;
}

.center {
text-align: center;
}

.right {
text-align: right;
}

.uppercase {
text-transform: uppercase;
}

.light {
opacity: 0.7;
}

a:empty,
ul:empty,
dl:empty,
div:empty,
section:empty,
article:empty,
p:empty,
h1:empty,
h2:empty,
h3:empty,
h4:empty,
h5:empty,
h6:empty {
display: none;
}

.link,
.customer a {
cursor: pointer;
display: inline-block;
border: none;
box-shadow: none;
text-decoration: underline;
text-underline-offset: 0.3rem;
color: rgb(var(–color-link));
background-color: transparent;
font-size: 1.4rem;
font-family: inherit;
}

.link–text {
color: rgb(var(–color-foreground));
}

.link–text:hover {
color: rgba(var(–color-foreground), 0.75);
}

.link-with-icon {
display: inline-flex;
font-size: 1.4rem;
font-weight: 600;
letter-spacing: 0.1rem;
text-decoration: none;
margin-bottom: 4.5rem;
white-space: nowrap;
}

.link-with-icon .icon {
width: 1.5rem;
margin-left: 1rem;
}

a:not([href]) {
cursor: not-allowed;
}

2

Hi @shilpa_etsy

WEll like you said it is saying it is Brittany but it is different font, and this code

Confirms it is Lovestory font. What you can try is to upload all Britanny font files, so . woff2, .woff, .ttf, and .otf ( if you have all) to your admin and then copy and replace this Lovestory links. To note of each file type again.

3

It seems like you’re saying that the “Brittany” font is available for you to select in the dropdown, but the font that’s displayed isn’t actually the Brittany font. If that’s the case, I think I know what’s happening. The file you uploaded is called Lovestory_Alt_SVG_web_optimized.otf, which is a font called Lovestory, not Brittany. But you’ve labelled that font as “Brittany” in your CSS, which is probably why you see Brittany in the font selector but it doens’t look like. The proper font URL will be something like https://cdn.shopify.com/s/files/1/0603/7484/3489/files/Brittany.otf?v=1234567890 (but that’s just a guess).

4

@shilpa_etsy,
I think the issue is with the font file rather than the CSS name.

In your @font-face code you have named the font Brittany but the file you are actually loading is

Lovestory_Alt_SVG_web_optimized.otf

So the browser is still loading the Lovestory font even though your CSS calls it Brittany.

If you have the actual Brittany font files I would upload them to Content > Files in Shopify and then replace the Lovestory URLs with the correct Brittany font file URLs.

Also I would recommend using the correct format for each font file rather than declaring the same .otf file as woff2, woff, ttf, and otf.

5

rshrivastava63 has the main issue: the URL currently points to Lovestory rather than Brittany.

One more thing to check in the actual CSS: if those comment lines are literally written with //, CSS does not support that comment syntax. Replace them with /* ... */ comments.

After uploading the real Brittany file, you do not need to declare one .otf URL as four different formats. For one .otf file, use:

/* adding the Brittany font */
@font-face {
font-family: 'Brittany';
src: url('PASTE-THE-ACTUAL-BRITTANY-OTF-URL-HERE') format('opentype');
font-style: normal;
font-weight: 400;
font-display: swap;
}

Also change:

font-weight: 4px;

to a unitless value such as:

font-weight: 400;

Your current selector:

h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong applies Brittany only to text wrapped in strong inside the headings. If you want the entire headings to use Brittany, use:

h1, h2, h3, h4, h5, h6 {
font-family: 'Brittany' !important;
font-weight: 400 !important;
}

A WOFF2 version would be preferable for web delivery, but one correctly referenced OTF file should be enough to test whether the font itself loads.

6

Two things are going wrong in your base.css.

1. Wrong file. Your src points at Lovestory_Alt_SVG_web_optimized.otf. That is the Lovestory font, not Brittany.

2. That file also will not render properly. It is a 12.6 MB SVG color font. Chrome stopped rendering SVG fonts, so your bold headings can show up blank in Chrome (and show Lovestory in other browsers). Either way it is the wrong file to use.

Here is the before/after. Same word, your file vs a normal font file:

Same word: your Lovestory file (blank in Chrome) vs a normal font file
Same word: your Lovestory file (blank in Chrome) vs a normal font file1004×278 91 KB

How to fix it.

  • Get the actual Brittany font file (a normal .otf or .woff2, not the Lovestory one).
  • In your admin go to Content > Files and click Upload files. After it uploads, copy that file’s link with the chain icon.

Content > Files: upload the real Brittany font, then copy its link
Content > Files: upload the real Brittany font, then copy its link1248×570 86.5 KB

  • In your base.css, replace your whole Brittany @font-face block with this clean one, and paste your copied URL into it:
@font-face {
  font-family: 'Brittany';
  src: url('YOUR-BRITTANY-FILE-URL.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

If your file ends in .woff2, use format('woff2') instead of format('opentype').

Two more small fixes in your code:

  • You had the same URL listed four times with wrong format hints (format(woff2), format(ttf), format(.otf?v)). One url(...) format(...) line is all you need.
  • Your bold-heading rule has font-weight: 4px, which is not valid. Change it to normal or bold:
h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong {
  font-family: 'Brittany', cursive;
  font-weight: normal;
  font-size: 60px;
}

Notes: in your CSS, Brittany is only applied to bold text inside headings. Your normal heading text stays Cinzel. Btw, qpps like Fontify or Typolab let you add custom fonts to Dawn from a dashboard.

Regards,
Ajay