i want to create a theme with typography based on the font, Sohne . I guess that’s German. So, the names aren’t common like “bold”, etc. Instead, it has “strong”, and “wide”, or “fat”, half-fat.
here’s what i have in the themes.json

"typography": {
			"dropCap": true,
			"fontFamilies": [
				{
					"name": "System",
					"slug": "system",
					"fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif"
				},
				{
					"name": "Serif",
					"slug": "serif",
					"fontFamily": "\"Times New Roman\",\"New York\",Times,\"Noto Serif\",serif"
				},
				{

					"name": "Sohne",
					"slug": "sohne",
					"fontFamily": "Sohne",
					"fontFace": [{
							"fontFamily": "Sohne",
							"fontWeight": "900",
							"fontStyle": "normal",
							"fontStretch": "normal",
							"src": [ "file:./assets/fonts/SohneBreit-Kraftig.woff"]
						},
						{
							"fontFamily": "Sohne",
							"fontWeight": "800",
							"fontStyle": "normal",
							"fontStretch": "normal",
							"src": [ "file:./assets/fonts/SohneBreit-Halbfett.woff"]
						},
						{
	
							"fontFamily": "Sohne",
							"fontWeight": "400",
							"fontStyle": "normal",
							"fontStretch": "normal",
							"src": [ "file:./assets/fonts/Sohne-Buch.woff"]
						},
						{
	
							"fontFamily": "Sohne",
							"fontWeight": "700",
							"fontStyle": "normal",
							"fontStretch": "normal",
							"src": [ "file:./assets/fonts/Sohne-Kraftig.woff"]
						},
						{
	
							"fontFamily": "Sohne",
							"fontWeight": "600",
							"fontStyle": "normal",
							"fontStretch": "normal",
							"src": [ "file:./assets/fonts/Sohne-Halbfett.woff"]
						}
					]
				},
				{
					"name": "Monospace",
					"slug": "monospace",
					"fontFamily": "Consolas,Menlo,Monaco,\"SF Mono\",\"DejaVu Sans Mono\",\"Roboto Mono\",\"Courier New\",Courier,monospace"
				}
			],

how do i correct that code so that the “block editor” recognizes the various font faces? per the code above, only the “extra bold” setting in the WordPress editor changes the perceived style. i don’t even know for certain which of the fonts its selecting.

what do i read to understand how to get WordPress to play well with this font if i wish to create a block theme? i’m familiar with fullsiteediting.com

thank you!

The fonts do display as options in my site editor so they’re at least being registered for use on the site.

I’ve tried using both woff2 & ttf fonts. And yes the path to my font files is correct. The theme.json is right inside my theme folder and the fonts are in /assets/fonts/[font name]/font-file.woff2

        "typography": {
            "fontFamilies": [
                {
                    "fontFamily": "\"Raleway\", sans-serif",
                    "slug": "raleway",
                    "name": "Raleway",
                    "fontFace": [
						{
							"fontFamily": "Raleway",
							"fontWeight": "400",
							"fontStyle": "normal",
							"fontStretch": "normal",
							"src": [ "file:./assets/fonts/raleway/Raleway-Medium.ttf" ]
						},
						{
							"fontFamily": "Raleway",
							"fontWeight": "400",
							"fontStyle": "italic",
							"fontStretch": "normal",
							"src": [ "file:./assets/fonts/raleway/Raleway-Italic.ttf" ]
						}
						,
						{
							"fontFamily": "Raleway",
							"fontWeight": "700",
							"fontStyle": "bold",
							"fontStretch": "normal",
							"src": [ "/assets/fonts/raleway/Raleway-Bold.ttf" ]
						}
					]
                },
                {
                    "fontFamily":  "\"Didot\", serif",
                    "slug": "didot",
                    "name": "Didot",
                    "fontFace": [
						{
							"fontFamily": "Didot",
							"fontWeight": "400",
							"fontStyle": "normal",
							"fontStretch": "normal",
							"src": [ "file:./assets/fonts/didot/Didot-Regular.woff2" ]
						},
						{
							"fontFamily": "Didot",
							"fontWeight": "500",
							"fontStyle": "italic",
							"fontStretch": "normal",
							"src": [ "file:./assets/fonts/didot/Didot-Italic.woff2" ]
						}
						,
						{
							"fontFamily": "Didot",
							"fontWeight": "700",
							"fontStyle": "bold",
							"fontStretch": "normal",
							"src": [ "file:./assets/fonts/didot/Didot-Bold.woff2" ]
						}
					]
                }
            ]
        },

I am using this plugin with Elementor – where it works perfectly – but there is a second theme on the site I’m working and the plugin doesn’t work with it.

It says you can customise the CSS file for these fonts but I’m having trouble finding out how to do this exactly.

I’ve researched the @fontface rule which makes sense but when I try it the fonts only go back to the default not the ones I’ve chosen.

I’m thinking I’m putting in the incorrect URL but there is no direction as to what is the correct URL or where to put it.

Help!!

Is it possible to do so ?

Thanks

I am trying to use @fontface but my fonts are not loading. I’m pretty sure the problem is the path I’m using. Usually I would have a child theme but in this case the theme does not allow for child themes. So I am using Appearance > Customize > Settings > Custom CSS in the Dashboard to add my custom css. I assume this get saved straight to the database?

Because of this I am having trouble figuring out what the path should be if the fonts is saved in wp-content/fonts.

Could someone help please.

Thanks
Tash

I uploaded a TrueType font version of the Marcellus Font onto FontSquirrel and downloaded the Font Kit. Having followed the instructions as given per the tutorials, I always seemed to get stuck on the CSS portion. The Child Theme I use is called ‘Waffle’. Upon opening the stylesheet initially, I couldn’t find any identifiable fields particularly under the ‘body’ tag, for me to edit in order to install the font.

My website is linked here. It’s now displaying in what I believe is the generic font provided by the browser. Please help! Thank you!

I am using the fontface rule and have the following code in place:

@font-face {
font-family: DecimaMono-Bold;
src: url(/home/j53207/public_html/slowclapstudio.com/wp-content/themes/notio-wp-child/fonts/DecimaMono-Bold.ttf);
url(/home/j53207/public_html/slowclapstudio.com/wp-content/themes/notio-wp-child/fonts/DecimaMono-Bold.woff);
url(/home/j53207/public_html/slowclapstudio.com/wp-content/themes/notio-wp-child/fonts/DecimaMono-Bold.eot);
url(/home/j53207/public_html/slowclapstudio.com/wp-content/themes/notio-wp-child/fonts/DecimaMono-Bold.svg);
}

.hero .extralargetitle {
font-family: DecimaMono-Bold;
}

My problem is that even though I am calling the rule, I am still seeing Times New Roman font on the site… I cant figure this out and I have been trying for a couple of hours now!

Even when I rollover the word DecimeMono on Firefox’s web developer tool, the preview is showing up as Times New Roman…. Any ideas??

Im totally bamboozled.

Thanks Jen

how can i add a font in parabola theme?
I,ve tried it,to do by changing the css code with @fontface, but i can′t.
It is possible?

Thanks

I’ve successfully implemented a child theme, downloaded the font and generated the web kit using fontface and included the files in a font dir.

The site is https://moversthinkersplayers.com/ and as far as I can tell from firebug site-title is styled by line 118 which I’ve tried to overwrite in my child theme without success. Any tips appreciated!

My child theme looks like this:

/*
Theme Name: Accelerate-child
Theme URI: https://themegrill.com/themes/accelerate/
Author: ThemeGrill
Author URI: https://themegrill.com
Template: accelerate
Description: Accelerate is multipurpose WordPress theme made for simplicity and ease of use. This theme is a piece of art that has this premium look and feel which will make your site stand out. Supports all post formats. Accelerate can be used for portfolio, business, blog, personal, travel, corporate, business services or any other kinds of sites. Get free support in https://themegrill.com/support-forum/ and check the demo at https://demo.themegrill.com/accelerate/. Available Translation: Polish and Hungarian.
Version: 1.1.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: light, white, two-columns, right-sidebar, left-sidebar, fluid-layout, responsive-layout, custom-header, custom-background, custom-menu, custom-colors, sticky-post, threaded-comments, translation-ready, featured-images, theme-options, post-formats
Text Domain: accelerate

Resetting and rebuilding styles have been helped along thanks to the fine work of
Eric Meyer https://meyerweb.com/eric/tools/css/reset/index.html
along with Nicolas Gallagher and Jonathan Neal https://necolas.github.com/normalize.css/
and Blueprint https://www.blueprintcss.org/
*/

/* =Reset

@font-face {
    font-family: 'oxygenregular';
    src: url('/wp-content/themes/accelerate-child/fonts/oxygen-webfont.eot');
    src: url('/wp-content/themes/accelerate-child/fonts/oxygen-webfont.eot?#iefix') format('embedded-opentype'),
         url('/wp-content/themes/accelerate-child/fonts/oxygen-webfont.woff2') format('woff2'),
         url('/wp-content/themes/accelerate-child/fonts/oxygen-webfont.woff') format('woff'),
         url('/wp-content/themes/accelerate-child/fonts/oxygen-webfont.ttf') format('truetype'),
         url('/wp-content/themes/accelerate-child/fonts/oxygen-webfont.svg#oxygenregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'oxygenbold';
    src: url('/wp-content/themes/accelerate-child/fonts/oxygen-bold-webfont.eot');
    src: url('/wp-content/themes/accelerate-child/fonts/oxygen-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/wp-content/themes/accelerate-child/fonts/oxygen-bold-webfont.woff2') format('woff2'),
         url('/wp-content/themes/accelerate-child/fonts/oxygen-bold-webfont.woff') format('woff'),
         url('/wp-content/themes/accelerate-child/fonts/oxygen-bold-webfont.ttf') format('truetype'),
         url('/wp-content/themes/accelerate-child/fonts/oxygen-bold-webfont.svg#oxygenbold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'oxygenitalic';
    src: url('/wp-content/themes/accelerate-child/fonts/oxygen-italic-webfont.eot');
    src: url('/wp-content/themes/accelerate-child/fonts/oxygen-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('/wp-content/themes/accelerate-child/fonts/oxygen-italic-webfont.woff2') format('woff2'),
         url('/wp-content/themes/accelerate-child/fonts/oxygen-italic-webfont.woff') format('woff'),
         url('/wp-content/themes/accelerate-child/fonts/oxygen-italic-webfont.ttf') format('truetype'),
         url('/wp-content/themes/accelerate-child/fonts/oxygen-italic-webfont.svg#oxygenitalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'oxygenbold_italic';
    src: url('/wp-content/themes/accelerate-child/fonts/oxygen-bolditalic-webfont.eot');
    src: url('/wp-content/themes/accelerate-child/fonts/oxygen-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('/wp-content/themes/accelerate-child/fonts/oxygen-bolditalic-webfont.woff2') format('woff2'),
         url('/wp-content/themes/accelerate-child/fonts/oxygen-bolditalic-webfont.woff') format('woff'),
         url('/wp-content/themes/accelerate-child/fonts/oxygen-bolditalic-webfont.ttf') format('truetype'),
         url('/wp-content/themes/accelerate-child/fonts/oxygen-bolditalic-webfont.svg#oxygenbold_italic') format('svg');
    font-weight: normal;
    font-style: normal;

}

h1, h2, h3, h4, h5, h6 {
	font-family: 'oxygenregular';
}

#site-title { font-family: 'oxygenregular'; }