- This topic has 9 replies, 4 voices, and was last updated 4 years, 8 months ago by
.
-
Posts
-
Hello, I’ve followed the adding local fonts guide and I am having a little trouble with the font faces.
https://docs.generatepress.com/article/adding-local-fonts/
So, I’ve read the articles provided. I am adding charter to my website. Here is the url where the font is located
websitename/wp-content/uploads/2021/05/
The font is charter_regular.woff2
Trying to figure out the CSS code I need to put down to make this work! Thanks!
Customer Support
Hi there,
I’ve tested your URL and found the file path to
yourwebsiteurl.com/wp-content/uploads/2021/05/charter_regular.woff2You 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; } );Customer Support
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?
thanksJustin
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. 😀
- You must be logged in to reply to this topic.
