[Support request] Cloud.Typography (Fonts like Gotham, Whitney, etc.)

[Josh]

Hello, My end goal is to use Cloud.Typography on my website and have fonts like Gotham, etc appear in the customizer.

In the process of adding a Code Snippet, something happened and I can’t get back into my website now. It says Error 500 after I added this:

add_filter( 'generate_typography_default_fonts','tu_add_system_fonts' );
function tu_add_system_fonts( $fonts ) {
    $fonts[] = "Gotham SSm A",  "Gotham SSm B";
    $fonts[] = "Whitney SSm A", "Whitney SSm B";
    $fonts[] = "Mercury SSm A", "Mercury SSm B";
    return $fonts;
}

1. So if you have any recommendations of what to do to get my site back, that would be great.

2. I want to run the appropriate Snippiet to be able to view these fonts in the customizer.

Here’s the rest of the story:

I have a subscription with Cloud.Typography, which allows me to use fonts like Gotham, Whitney, and others. I followed the instructions on their site an uploaded all of the fonts to a directory on my server:

https://joshmitch.com/wp-content/themes/generatepress_child/fonts/625118

Next, I followed these instructions: https://docs.generatepress.com/article/adding-custom-font/

Also, per their instructions, I added this to my site:

<link rel="stylesheet" type="text/css" href="https://cloud.typography.com/7476816/7400992/css/fonts.css" />

Here’s an example of what say to use in the CSS:

font-family: "Mercury SSm A", "Mercury SSm B";
font-style: normal;
font-weight: 300;

Any ideas how I can get this all sorted out?

[Tom]

Hi there,

Hopefully you were able to get your site back by now. If not, this should help:

You can try activating ‘safe mode’. All snippets will not execute while safe mode is active, allowing you to access your site and deactivate the snippet that is causing the error. To activate safe mode, add the following line to your wp-config.php file, just before the line that reads /* That’s all, stop editing! Happy blogging. */:

define('CODE_SNIPPETS_SAFE_MODE', true);

As for the snippet, this should work:

add_filter( 'generate_typography_default_fonts', 'tu_add_system_fonts' );
function tu_add_system_fonts( $fonts ) {
    $fonts[] = '"Gotham SSm A",  "Gotham SSm B"';
    $fonts[] = '"Whitney SSm A", "Whitney SSm B"';
    $fonts[] = '"Mercury SSm A", "Mercury SSm B"';
    return $fonts;
}

[Josh]

Hey Tom! Thanks! Safe Mode worked like a charm and I was able to remove the old snippet and add the new.

When I search in Customizer, I can now find the fonts I installed!

When I select those fonts, however, the type stays in Open Sans. Do I need to add CSS, PLUS change the name in the Customizer?

[Tom]

Adding that function only adds the font to the Customizer.

In order for the font to be usable, it needs to be embedded in your website. Usually, this would be done using @font-face, but I’m not sure how Cloud.Typography works.

[Josh]

It’s working well! I’ve added this to the CSS and using the customizer to set the size and weight.

Is this the best/most efficient way to do this? In other words, will all of this CSS slow down my site too much?

.menu {
font-family: "Gotham SSm A", "Gotham SSm B";
font-style: normal;
font-weight: 300;
}

body {
font-family: "Mercury SSm A", "Mercury SSm B";
font-style: normal;
font-weight: 300;
}

h1 {
font-family: "Whitney SSm A", "Whitney SSm B";
font-style: normal;
font-weight: 700;
}

h2 {
font-family: "Whitney SSm A", "Whitney SSm B";
font-style: normal;
font-weight: 700;
}

h3 {
font-family: "Gotham SSm A", "Gotham SSm B";
font-style: normal;
font-weight: 700;
}

.textwidget {
font-family: "Whitney SSm A", "Whitney SSm B";
font-style: normal;
font-weight: 400;
}

.widget-title {
font-family: "Whitney SSm A", "Whitney SSm B";
font-style: normal;
font-weight: 600; 
letter-spacing: 3px;
text-transform: uppercase;
}

.cat-item {
font-family: "Whitney SSm A", "Whitney SSm B";
font-style: normal;
font-weight: 400;}

.site-info {
font-family: "Whitney SSm A", "Whitney SSm B";
font-style: normal;
font-weight: 400;}

[Tom]

That will work, but you should only need to use the Customizer to select those fonts for the elements the Customizer supports 🙂

[Author]

Posts