Issue with font face

sage
1

I am using Sage as my WordPress starter theme. In this theme I have some custom fonts.

These are at the following path: wp-content/themes/sage/resources/assets/fonts

In the resources folder inside styles, inside common I have _variables.scss

In this file I have this:

// Circular font
@font-face {
  font-family: "CircularStd";
  src: url("../fonts/CircularStd-Medium.eot") format("eot"),
    url('../fonts/CircularStd-Medium.eot') format('embedded-opentype'),
    url("../fonts/CircularStd-Medium.woff") format("woff"),
    url("../fonts/CircularStd-medium.otf") format("opentype");
  font-style: normal;
  font-weight: normal;
}

// Balto font
@font-face {
  font-family: "Balto";
  src: url('../fonts/baltoweb-book.eot') format('eot'),
    url('../fonts/baltoweb-book.eot') format('embedded-opentype'),
    url('../fonts/baltoweb-book.woff') format('woff'),
    url("../fonts/balto-book.otf") format("opentype");
  font-style: normal;
  font-weight: normal;
}

My public path in my config.json is: "publicPath": "/wp-content/themes/sage",

My project directory is: http://localhost/projects/newable-site-v3.

After compiling my CSS the path it creates for my fonts is wrong.

@font-face {
  font-family: "Balto";
  src: url(/wp-content/themes/sage/dist/fonts/baltoweb-book.eot) format("eot"), url(/wp-content/themes/sage/dist/fonts/baltoweb-book.eot) format("embedded-opentype"), url(/wp-content/themes/sage/dist/fonts/baltoweb-book.woff) format("woff"), url(/wp-content/themes/sage/dist/fonts/balto-book.otf) format("opentype");
  font-style: normal;
  font-weight: normal;
}

So the path compiles to: http://localhost/wp-content/themes/sage/dist/fonts/CircularStd-Medium.woff

2

Try changing

 "publicPath": "/wp-content/themes/sage",

To

 "publicPath": "wp-content/themes/sage",

Or use the full path.

3

This should ideally be just a local testing domain and not a domain + folder.

Your publicPath needs to be set to the full path to your project, so for your example it would be:

/projects/newable-site-v3/wp-content/themes/sage
4

This topic was automatically closed after 42 days. New replies are no longer allowed.