Can we add otf fonts to the Code Editor?

Search Best Practices - Search Front-End
1

Hi team, I added a client’s otf fonts following this module and was able to successfully add them as font files and declare them in the fonts.scss, but when I view them in the live preview they look like they haven’t updated and are still using the fallback Roboto.

When I inspect the page it says the correct font but I’m pretty certain it hasn’t updated when looking at what the font face should look like:

Screen Shot 2022-02-07 at 10.23.48 AM
Screen Shot 2022-02-07 at 10.23.48 AM1293×358 24.8 KB

Screen Shot 2022-02-07 at 10.24.03 AM
Screen Shot 2022-02-07 at 10.24.03 AM972×746 60.9 KB

Let me know if there’s something I missed here, thank you!

2

Hi Hannah,

Since this is an .otf font file, there is a small difference in how you add the font-face declarations to the fonts.scss file. Unlike .woff font files where the format is “woff”, the .otf file format needs to be “opentype”. Here is an example of what that would look like:

@font-face
{
  font-family: "D-DIN";
  src: url('../assets/fonts/D-DIN-Bold.otf') format("opentype");
  font-weight: $font-weight-bold;
  font-style: normal;
}
1 Like
3

Thanks so much @Micaela_Luders !