Language code added to urls in CSS

[eemeli]

Hello,

I have added some local font files to my CSS using @font-face. The URLs of the fonts are in the CSS code too. But the website I am working on https://www.lovi.fi is a multi-language site, and according to Chrome console, the multi-language function adds the language tag to all my font URLs too. Because of this, the font files are not found.

URL in CSS: https://lovi.fi/templates/bahamastarter ... 8_1_0.woff

...becomes...

URL in the browser: https://lovi.fi/en/templates/bahamastar ... 8_1_0.woff

What can I do? I have tried to write the URL in the CSS file in different formats, such as "../fonts/30EE38_1_0.woff" but the language code is always added. I can't seem to find any similar problems by searching the forum or googling.

(Currently I am adding this new font to a hidden area http://www.lovi.fi/professionals only, to test it first. This is why in the CSS it is only added to body.valkoinen for now.)

Thank you in advance for help!

[waarnemer]

Is your css dynamically generated by some plugin?

[eemeli]

Waarnemer, it shouldn't. Apart from some specific module-related CSS, all other CSS is in a normal .css file which is being called in index.php of the template.

Here is the error message in the console:
Failed to load resource: the server responded with a status of 404 (Not Found)
https://lovi.fi/fi/templates/bahamastar ... 8_1_0.woff

The problem there is the added /fi/ language tag.

The mentioned font is loaded in grid.css https://lovi.fi/templates/bahamastarter3/css/grid.css starting on row 6. I tried to copy-paste that part here, but my message was blocked and I couldn't send it, so I will have to link to the file.

I have also tried url('../templates/......') in the CSS code but it doesn't work either.

[infograf768]

I have tested here on a multilingual site. The folder fonts is in templates/mytemplate/fonts/
The css is in templates/mytemplate/css/template.css

I used a free font with woff only.
My code in the css is

Code: Select all

@font-face {
  font-family: 'Alef';
  font-style: normal;
  font-weight: 400;
  src: local('Alef Regular'), local('Alef-Regular'),
       url('../fonts/alef-v9-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/alef-v9-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

Then I applied font-family: 'Alef'; to body.

Code: Select all

body {
	margin: 0;
	font-family: 'Alef';
	font-size: 13px;
	line-height: 18px;
	color: #333;
	background-color: #fff;
}

It worked perfectly whatever the language.

[infograf768]

Can you post your font here as a zip?

[eemeli]

Jean-Marie, I changed my @font-face code to match the one in your example, and that has seemed to fix the problem. I don't know what exactly caused it, as the URL is the same that I tried. Now I am using only .woff and .woff2.

Thank you very much for your help!

[infograf768]

I think the issue may have been related to the 'local' you had.

But it is important to also give the eot, etc.

I suggest, if your font contains all to look at the font Alegreya here
https://google-webfonts-helper.herokuapp.com/

The code there is

Code: Select all

/* alegreya-sans-regular - cyrillic_latin_cyrillic-ext_latin-ext */
@font-face {
  font-family: 'Alegreya Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/alegreya-sans-v8-cyrillic_latin_cyrillic-ext_latin-ext-regular.eot'); /* IE9 Compat Modes */
  src: local('Alegreya Sans Regular'), local('AlegreyaSans-Regular'),
       url('../fonts/alegreya-sans-v8-cyrillic_latin_cyrillic-ext_latin-ext-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/alegreya-sans-v8-cyrillic_latin_cyrillic-ext_latin-ext-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/alegreya-sans-v8-cyrillic_latin_cyrillic-ext_latin-ext-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/alegreya-sans-v8-cyrillic_latin_cyrillic-ext_latin-ext-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/alegreya-sans-v8-cyrillic_latin_cyrillic-ext_latin-ext-regular.svg#AlegreyaSans') format('svg'); /* Legacy iOS */
}

Download link is https://google-webfonts-helper.herokuap ... ts=regular

As you can see the font produced is optimised for Cyrillic

[eemeli]

Yes probably. Thank you, I will add the other versions too. They are all available in the font package.