Font Face Help.

Hi there,

I've tested your URL and found the file path to

yourwebsiteurl.com/wp-content/uploads/2021/05/charter_regular.woff2

You simply add in this URL on the @font-face css importation.

Example:

@font-face {
  font-family: 'Charter Regular';
  font-style: normal;
  font-weight: 400;
  src: url('yourwebsiteurl.com/wp-content/uploads/2021/05/charter_regular.woff2') format('woff2');
}

Thanks Elvin, I put that in my additional CSS. However, do I need to put the next step in code snippets or additional CSS? This is what I have in additional CCS and can't see charter.

@font-face {
  font-family: 'Charter Regular';
  font-style: normal;
  font-weight: 400;
  src: url('myurl.com/wp-content/uploads/2021/05/charter_regular.woff2') format('woff2');
}

add_filter( 'generate_typography_default_fonts', function( $fonts ) {
    $fonts[] = 'Charter Regular';

    return $fonts;
} );

Hi there,

this goes in tour CSS:

@font-face {
  font-family: 'Charter Regular';
  font-style: normal;
  font-weight: 400;
  src: url('myurl.com/wp-content/uploads/2021/05/charter_regular.woff2') format('woff2');
}

And this goes into the Code Snippets:

add_filter( 'generate_typography_default_fonts', function( $fonts ) {
    $fonts[] = 'Charter Regular';

    return $fonts;
} );

Hey, so I got it to work! Thanks! So I have four different fonts uploaded in this method, Charter regular, charter bold, charter italic, and charter italic bold. How do I activate those for each function? If I bold, I am using charter bold? Etc. Thanks!

Hey, so I got it to work! Thanks! So I have four different fonts uploaded in this method, Charter regular, charter bold, charter italic, and charter italic bold. How do I activate those for each function? If I bold, I am using charter bold? Etc. Thanks!

If you use different font-family names for each @font-face, you'll have do multiple array importation to have them show up on the typography list.

Example: if you've written the CSS like this -

@font-face {
  font-family: 'Charter Regular';
  font-style: normal;
  font-weight: 400;
  src: url('myurl.com/wp-content/uploads/2021/05/charter_regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Charter Bold';
  font-style: normal;
  font-weight: 600;
  src: url('myurl.com/wp-content/uploads/2021/05/charter_bold.woff2') format('woff2');
}

importation will see "Charter Bold" as a completely different set from "Charter Regular"

You'll have to write the PHP snippet like this too because they are separate:

add_filter( 'generate_typography_default_fonts', function( $fonts ) {
    $fonts[] = 'Charter Regular';
    $fonts[] = 'Charter Bold';

    return $fonts;
} );

But if you wish for the font-weight variants to be under 1 font family (Charter), you'll have to write the CSS font import under the same font family.

Example: 1 Font family, multiple variants.

@font-face { // charter regular font set
  font-family: 'Charter';
  font-style: normal;
  font-weight: 400;
  src: url('myurl.com/wp-content/uploads/2021/05/charter_regular.woff2') format('woff2');
}

@font-face { // charter bold font set
  font-family: 'Charter';
  font-style: normal;
  font-weight: 600;
  src: url('myurl.com/wp-content/uploads/2021/05/charter_bold.woff2') format('woff2');
}

@font-face { // charter italic font set
  font-family: 'Charter';
  font-style: normal;
  font-weight: 400;
  src: url('myurl.com/wp-content/uploads/2021/05/charter_italic.woff2') format('woff2');
}

You basically have to still write separate @font-face CSS for each file but only the font-weight and the file path URL change depending on the variant. (font-weights 100 to 900 and bold + regular + italic)

Hi

I have been following the above thread and am trying to use a font Euclid Square on a site aldus.io.

I have uploaded the fonts to Media

I have entered the following in code snippets

Snippets

add_filter( 'generate_typography_default_fonts', function( $fonts ) {
    $fonts[] = 'Euclid Square';

    return $fonts;
} );

I have loaded the fonts using the Custom fonts plugin after uploading them to Media. I currently have 3 weights 400,700 and 900 loaded

I have added the following CSS in the customiser.

CSS:

@font-face { // Euclid Square
  font-family: 'Euclid Square';
  font-style: normal;
  font-weight: 700;
  src: url('https://aldus.io/wp-content/uploads/2021/05/EuclidSquare-Regular-WebS.woff2') format('woff2');
}

@font-face { // Euclid Square
  font-family: 'Euclid Square';
  font-style: normal;
  font-weight: 900;
  src: url('https://aldus.io/wp-content/uploads/2021/05/EuclidSquare-Regular-WebS.woff2') format('woff2');
}

@font-face { // Euclid Square
  font-family: 'Euclid Square';
  font-style: normal;
  font-weight: 400;
  src: url('https://aldus.io/wp-content/uploads/2021/05/EuclidSquare-Regular-WebS.woff2') format('woff2');
}

The site loads the Normal font weight 400, but not the 700 or 900 weights, even though a Chrome extension font checker appears to identify an element as as 700 weight - on this page on a heading for example -https://aldus.io/product-with-slider/

see Heading "Adiflex"

I wonder if you could help?
thanks

Justin

Hi Justin,

Your @font-face importation is using the same file for all 3 variants.

Some font families use separate files for bold and italic variants. You may have to download those font file variants as well.

Resolved

Glad you got it resolved. No problem. :D