Cross-Origin Request Blocked: Font loading blocked on English WPML

Hey wadihcreationmw,

The second URL you posted is not working, I’m seeing some sort of ready for development message:

Yourimmigration.com
REGISTERED FOR DEVELOPMENT
This domain has been registered. If you’re interested in this domain, contact us to check availability for customer use, ownership, or other development opportunities.

Best regards,
Rikard

Hi,

It’s not a theme problem, the resources are being blocked by the browser since they are being served from a different domain. You can check that by inspecting the page your browser. Try following this to see if it helps: https://kriesi.at/documentation/enfold/icon/#icons-are-showing-as-rectangular-boxes-

Best regards,
Rikard

Hi,

A few lines of .htaccess code should not slow down your server, how did you test the results?

I’m not sure how you have configured WPML, but I’m guessing that your two sites are using the same WordPress installation? That means that the installation files will only be present in one place. If you are looking for a different solution than using .htaccess, then please try uploading the font in question manually to your other site, and import it with CSS.

Best regards,
Rikard

Hi,

Thank you for the info.

Did you create different directories for each language or just different domains? If there is only one directory for all languages, then they will share the same upload directory using the default path or the WordPress Address (URL) as base URL.

For installation with different directories, we may need to adjust the origin_url of the fonts in the enfold/framework/php/font-management/class-avia-type-fonts.php file around line 998.

$url = trailingslashit( $font_info[‘origin_url’] . $font_info[‘folder’] ) . $file;

Best regards,
Ismael

Hi,

Thank you for the update.

We would like to know if you actually created different directories for each language. Can we access the site and check the WPML settings (WPML > Languages > Language URL format)? We would like to check if there is a dedicated directory for each language or just different domains. If a different domain is set for each language, then it means that they share the same directory or the same WordPress installation. This will also mean that all languages share the same upload directory, which is where the avia_fonts folder is located and where the custom fonts are placed.

// https://wpml.org/documentation/getting-started-guide/language-setup/language-url-options/how-to-use-wpml-with-different-domains-per-language/#how-to-enable-different-languages-per-domain

The easiest way is to configure the CORS policy in the .htaccess as suggested above.

Best regards,
Ismael

Hi,

Sorry for the problems you have.

My knowledge about setting up WPML sites is not so good. It seem to be a problem in setup of WPML and Enfold.

If I understand it correctly you have a french domain and a seperate english domain.

Do you upload the fonts to french domain only or also to the english domain?

Second thing to check would be if you disable css file merging, save theme options (on both sites) and check the files:

../wp-content/uploads/dynamic_avia/enfold_child.css

in both domains. At the beginning you should find something like:

@font-face { 
     font-family: 'lato';
     src:    url('https://localhost/wp56/wp-content/uploads/avia_fonts/type_fonts/lato/lato-black.ttf') format('truetype');
     font-style:  normal;
     font-weight: 900;
     font-display: auto;
}
@font-face { 
     font-family: 'lato';
     src:    url('https://localhost/wp56/wp-content/uploads/avia_fonts/type_fonts/lato/lato-blackitalic.ttf') format('truetype');
     font-style:  italic;
     font-weight: 900;
     font-display: auto;
}
.....

It would be interesting to know the value of src: ….

If you have a staging site – can you give us WP admin access and FTP access so I can also see your backend.
It might be necessary that we get in contact with WPML support also to find a solution. So it might be necessary to forward your credentials to them also.

Added 16.11.:
=============

Could you please create a ticket at WPML support with reference to this thread and that they should pass it to head of compatibility team so we can find a solution.

If you give us the link to this ticket we can also get in touch with him additionally.

Best regards,
Günter

• This reply was modified 3 years ago by Günter.

Hi,

Currently we store the absolute URL to the ttf files in database when the font is uploaded and reuse this when we create the enfold.css file.

I think the best solution would be to use relative urls in the enfold.css file for the fonts instead of absolute.
In a first step I would suggest to activate this with an add_theme_support( … ).

What I would need to do is to add the relative url to our database structure.

Is it possible for you to delete the fonts and upload them again – this would make it easier for me because I do not need to write an extra update routine to manipulate database content.

Best regards,
Günter

Hi,

uploading the font: Theme Options -> Import/Export -> Custom Font Manager

You can upload new fonts or delete already uploaded fonts (and reupload them).

—-

But I added a solution that removes the absolute URL part when creating the file dynamic_avia/enfold(_child).css on the fly.

Please update enfold\framework\php\font-management\class-avia-type-fonts.php with the content of

https://github.com/KriesiMedia/enfold-library/blob/master/temp_fixes/Enfold_4_8_7_1/framework/class-avia-type-fonts.php

Around line 988ff you find theme support ‘custom_uploaded_fonts_relative_url’ (and filter ‘avf_custom_uploaded_fonts_url’).

Adding theme support will modify the output in dynamic_avia/enfold(_child).css to e.g.:

@font-face {
     font-family: 'lato';
     src:    url('/wp56/wp-content/uploads/avia_fonts/type_fonts/lato/lato-black.ttf') format('truetype');
     font-style:  normal;
     font-weight: 900;
     font-display: auto;
}
@font-face {
     font-family: 'lato';
     src:    url('/wp56/wp-content/uploads/avia_fonts/type_fonts/lato/lato-blackitalic.ttf') format('truetype');
     font-style:  italic;
     font-weight: 900;
     font-display: auto;
}

If WPML copies this file (or the merged files) to the other domain and the ttf files are in the same folder location there it should work.

Best regards,
Günter

Hi,

Sorry for not mentioning this:

To functions.php add:

add_theme_support( 'custom_uploaded_fonts_relative_url' );

This should activate the condition.

Do not forget to clear cache (if you use a cache plugin).

Edit:

And also save theme options please.

Best regards,
Günter

Hi,

see private.

Best regards,
Günter

Hi,

I think I found the problem. When creating the merged files we change relative urls in enfold.css to absolute urls.

I added to config-templatebuilder\avia-template-builder\php\class-asset-manager.php line 677:

			/**
			 * e.g. WPML needs relative paths when using directories for languages
			 * 
			 * @since 4.8.7.2
			 */
			if( current_theme_supports( 'custom_uploaded_fonts_relative_url' ) )
			{
				return $content;
			}

Now after merging files you find in avia-merged-styles-974f232210bc9596190f218f629b8b53—619b7b9d06faf.css the relative urls:

....

@font-face{
font-family:'poppins';
src:url('/wp-content/uploads/avia_fonts/type_fonts/poppins/poppins-black.ttf') 
format('truetype');
font-style:normal;
font-weight:900;
ont-display:auto
} 

@font-face{
font-family:'poppins';
src:url('/wp-content/uploads/avia_fonts/type_fonts/poppins/poppins-blackitalic.ttf') 
format('truetype');
font-style:italic;
font-weight:900;
font-display:auto
}

........

Can you check with the other language please.

Best regards,
Günter

Hi,

Thank you for the feedback – and glad we found the solution.

No, I will merge it into 4.8.7.2. Only keep

add_theme_support( 'custom_uploaded_fonts_relative_url' );

Enjoy the theme and have a nice day.

Let us know, if you need further assistance – simply create a new topic.

Best regards,
Günter

Added:

Keep an eye on the changelog in case we might add a theme option to replace the add_theme_support in a future release.

Hi,

Thanks. I got my 3rd vaccination on friday – so I did everything I can do.

Also stay safe and healthy.

Best regards,
Günter