Anyone embedding fonts successfully?

support
#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?

#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.

2 Likes
#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:

1 Like
#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.

image
image.png397×815 24.1 KB 

@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;
}
7 Likes
#5

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

1 Like
#6

You wrote one already…

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

4 Likes
#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:

#8

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

We embed fonts, but had to solve CORS first.

#9

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

#10

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

1 Like
#11

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

#12
#13

We now have a theme component that makes changing fonts very easy.

3 Likes
#14