Anyone embedding fonts successfully?

(Michael Downey) #1

Continuing the discussion from Include images and fonts in themes:

Has anyone here successfully uploaded a web font through the customization UI and able to call it with a variable?

I have been trying to get Google Fonts working on my site but so far only can get them working by using the CSS import from Google’s servers. I’d much prefer to serve them locally. But when I try to use the SCSS variables in my CSS after uploading, they don’t seem to work at all.

Any ideas?

(Joshua Rosenfeld) #2

I was working on a site the other day that did this…let me see if I can find it again.

Edit: @downey apologies, but I was mistaken. The font was uploaded but not in use. I can add this to my list to test, but I may not get to it until next week.

(Michael Downey) #3

No worries. As mentioned, there is a workaround of serving the fonts remotely, but it’s just less than ideal. Appreciate anything you (or others) can turn up in terms of successful cases, or reproduced bugs! :bug:

(Joshua Rosenfeld) #4

Looping back on this - (long time, sorry!) - I found a site with uploaded fonts! To answer your question, yes you can successfully upload a font through the customization UI and able to call it with a variable.

@font-face {
    font-family: 'colfax-bold';
    src: url($ColfaxWebBoldEOT), /* IE9 Compat Modes */
         url($ColfaxWebBoldWOFF) format('woff'); /* Modern Browsers */

@font-face {
    font-family: 'colfax-medium';
    src: url($ColfaxWebMediumEOT), /* IE9 Compat Modes */
         url($ColfaxWebMediumWOFF) format('woff'); /* Modern Browsers */

@font-face {
    font-family: 'colfax-light';
    src: url($ColfaxWebLightEOT), /* IE9 Compat Modes */
         url($ColfaxWebLightWOFF) format('woff'); /* Modern Browsers */

@font-face {
    font-family: 'colfax-regular';
    src: url($ColfaxWebRegularEOT), /* IE9 Compat Modes */
         url($ColfaxWebRegularWOFF) format('woff'); /* Modern Browsers */

@font-face {
    font-family: 'colfax-thin';
    src: url($ColfaxWebThinEOT), /* IE9 Compat Modes */
         url($ColfaxWebThinWOFF) format('woff'); /* Modern Browsers */

body {
    font-family: "colfax-regular", sans-serif;

h1, h2, h3, h4, h5, h6 {
    font-family: "colfax-light", sans-serif;
    letter-spacing: .023em;

/*h2 {
    font-size: 32px;
    line-height: 1.284em;
    font-weight: 500;

.stats-title, .user-stat .value {
    font-family: "colfax-medium", sans-serif;

.category-name {
    font-family: "colfax-medium", sans-serif;

.badge-category, .dropdown-select-box-row .name, .user-title {
    font-family: "colfax-medium", sans-serif;

(Sam Saffron) #5

This belongs in a howto/faq can you move it there?

(Joshua Rosenfeld) #6

You wrote one already…

At the time I couldn’t confirm that it worked. This post was purely closing up a loose end.

(Michael Downey) #7

Hmm; thanks for this info. This is basically how I’ve set it up, but I made some tweaks in my test theme to pattern the CSS customization exactly as shown here. (Everything but setting up parallel file types with the example here.) Unfortunately, my variables still aren’t linking up to get the files to actually render the correct font.

I guess I’ll keep hacking on it with my externally-loaded fonts for now. :slight_smile:


Where are you uploading the fonts to? Local or s3? If the latter, CORS issue?

We embed fonts, but had to solve CORS first.

(Michael Downey) #9

Hmm, good point. We’re using hosting so the CDN may be at play.

(Joshua Rosenfeld) #10

The CDN shouldn’t be an issue. The site I referenced is a hosted site.

(Michael Downey) #11

:mag_right: Sounds like some more troubleshooting on my end to add to my TODO list…