Can’t load Source Serif 4

Hi @sg23838586 ,
.otf, .ttf, .woff, .woff2 font files are supported.

What error are you getting?
It would be helpful to have screenshots or a screencast of you adding the fonts.

Hi Matias,

That’s the thing, I don’t have an error since the font is not loaded in the site rendering. There is no loading of any font whatsoever. It just uses the browser font instead.

Perhaps you can try to see if Source Serif 4 works in any of your themes?

If I make an empty new theme using this plugin and add Source Serif 4, nothing happens, even after selecting Source Serif 4 as the text font in the FSE.

After adding the font what do you have in the “Manage fonts section”?

It would be very useful to have a screen recording showing how you add the font and the problems you face (font not appearing or whatever).

Thanks for such a quick response!

I can see that the fonts have been successfully added to the manage fonts section.

Here is a video recording (a bad one sorry ??): https://imgur.com/lvcxGXx

theme.json looks like this:

{
	"$schema": "https://schemas.wp.org/wp/6.2/theme.json",
	"settings": {
		"appearanceTools": true,
		"layout": {
			"contentSize": "620px",
			"wideSize": "1000px"
		},
		"spacing": {
			"units": [
				"%",
				"px",
				"em",
				"rem",
				"vh",
				"vw"
			]
		},
		"typography": {
			"fontFamilies": [
				{
					"fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
					"name": "System Font",
					"slug": "system-font"
				},
				{
					"fontFamily": "Source Serif 4",
					"slug": "source-serif-4",
					"fontFace": [
						{
							"fontFamily": "Source Serif 4",
							"fontStyle": "normal",
							"fontWeight": "200",
							"src": [
								"file:./assets/fonts/source-serif-4_normal_200.ttf"
							]
						},
						{
							"fontFamily": "Source Serif 4",
							"fontStyle": "normal",
							"fontWeight": "300",
							"src": [
								"file:./assets/fonts/source-serif-4_normal_300.ttf"
							]
						},
						{
							"fontFamily": "Source Serif 4",
							"fontStyle": "normal",
							"fontWeight": "400",
							"src": [
								"file:./assets/fonts/source-serif-4_normal_400.ttf"
							]
						},
						{
							"fontFamily": "Source Serif 4",
							"fontStyle": "normal",
							"fontWeight": "500",
							"src": [
								"file:./assets/fonts/source-serif-4_normal_500.ttf"
							]
						},
						{
							"fontFamily": "Source Serif 4",
							"fontStyle": "normal",
							"fontWeight": "600",
							"src": [
								"file:./assets/fonts/source-serif-4_normal_600.ttf"
							]
						},
						{
							"fontFamily": "Source Serif 4",
							"fontStyle": "normal",
							"fontWeight": "700",
							"src": [
								"file:./assets/fonts/source-serif-4_normal_700.ttf"
							]
						},
						{
							"fontFamily": "Source Serif 4",
							"fontStyle": "normal",
							"fontWeight": "800",
							"src": [
								"file:./assets/fonts/source-serif-4_normal_800.ttf"
							]
						},
						{
							"fontFamily": "Source Serif 4",
							"fontStyle": "normal",
							"fontWeight": "900",
							"src": [
								"file:./assets/fonts/source-serif-4_normal_900.ttf"
							]
						},
						{
							"fontFamily": "Source Serif 4",
							"fontStyle": "italic",
							"fontWeight": "200",
							"src": [
								"file:./assets/fonts/source-serif-4_italic_200.ttf"
							]
						},
						{
							"fontFamily": "Source Serif 4",
							"fontStyle": "italic",
							"fontWeight": "300",
							"src": [
								"file:./assets/fonts/source-serif-4_italic_300.ttf"
							]
						},
						{
							"fontFamily": "Source Serif 4",
							"fontStyle": "italic",
							"fontWeight": "400",
							"src": [
								"file:./assets/fonts/source-serif-4_italic_400.ttf"
							]
						},
						{
							"fontFamily": "Source Serif 4",
							"fontStyle": "italic",
							"fontWeight": "500",
							"src": [
								"file:./assets/fonts/source-serif-4_italic_500.ttf"
							]
						},
						{
							"fontFamily": "Source Serif 4",
							"fontStyle": "italic",
							"fontWeight": "600",
							"src": [
								"file:./assets/fonts/source-serif-4_italic_600.ttf"
							]
						},
						{
							"fontFamily": "Source Serif 4",
							"fontStyle": "italic",
							"fontWeight": "700",
							"src": [
								"file:./assets/fonts/source-serif-4_italic_700.ttf"
							]
						},
						{
							"fontFamily": "Source Serif 4",
							"fontStyle": "italic",
							"fontWeight": "800",
							"src": [
								"file:./assets/fonts/source-serif-4_italic_800.ttf"
							]
						},
						{
							"fontFamily": "Source Serif 4",
							"fontStyle": "italic",
							"fontWeight": "900",
							"src": [
								"file:./assets/fonts/source-serif-4_italic_900.ttf"
							]
						}
					]
				}
			]
		}
	},
	"templateParts": [
		{
			"area": "header",
			"name": "header"
		},
		{
			"area": "footer",
			"name": "footer"
		}
	],
	"version": 2
}

However, the fonts seem to be corrupted. If I try to open the TTF files on Windows I get an error saying:

---------------------------
Windows Font Viewer 
---------------------------
The requested file C:\wamp64\www\thebananasite\wp-content\themes\cloudberry\assets\fonts\source-serif-4_normal_400.ttf is not a valid font file. 
---------------------------
OK   
---------------------------

Other fonts (such as Inter) work. That is, I can see them load in DevTools and they appear to load fine. But I also get the “is not a valid font file” for Inter.

It’s very confusing because if I save the font from DevTools, the font will open correctly in Windows. But if I try to open a newly downloaded font from this plugin in Windows I get the “ttf is not a valid font file” message.

Perhaps it is best to ignore the “ttf is not a valid font file” for now. I don’t think it has anything to do with the font not displaying.

• This reply was modified 1 year, 11 months ago by sg23838586.
• This reply was modified 1 year, 11 months ago by sg23838586.

If I change the fontFamily slug in theme.json from Source Serif 4 to BananaFont everything works as it should. ?? WTH!!!

• This reply was modified 1 year, 11 months ago by sg23838586.
• This reply was modified 1 year, 11 months ago by sg23838586.

Also, note that Source Serif 4 looks like this on my computer: https://imgur.com/a/alWzpd0, but only in Firefox, not Edge…

If I change the?fontFamily?slug in?theme.json?from?Source Serif 4?to?BananaFont?everything works as it should. ?? WTH!!!

I’m glad that you made it work.

Also, note that Source Serif 4 looks like this on my computer:?https://imgur.com/a/alWzpd0, but only in Firefox, not Edge…

It if failing to display in google fonts and it works when you change the font name maybe you have a local copy installed not working as expected. Try adding another font family to see if it works as expected.

Upon investigating I can see that once “Create Block Theme” has fetched the desired fonts from Google, the actual font files are just empty files. That is, they don’t contain any data if I open them in a text editor. Is that how it’s supposed to be? In my mind one should see a bunch of binary data.

Also, regarding the slug name, is that an issue with the plugin or WordPress core code?

After hours I finally understood why this is happening ??

Since the fontFamily name is used directly in the CSS the fontFamily name must be enclosed in apostrophes (U+0027) like so: "fontFamily": "'Source Serif 4'" else it will read as Serif.

This solved the problem. I guess this is indeed a flaw in the theme.json functionality, not this plugin.

As for the “corrupted” TTF files, this was an issue caused by the font files having insufficient read rights in Windows. I am not sure why this happens, but I have a feeling it is because of how Wamp-server creates new files. Anyhow, it should not be a problem on a live site (I think)