Language code added to urls in CSS

General questions regarding the use of languages in Joomla! 3.x.

Moderators: infograf768, General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
eemeli
Joomla! Fledgling
Joomla! Fledgling
Posts: 4
Joined: Tue Mar 06, 2018 11:08 am

Language code added to urls in CSS

Postby eemeli » Tue Mar 06, 2018 11:34 am

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
Joomla! Ace
Joomla! Ace
Posts: 1851
Joined: Sun May 04, 2008 12:37 pm

Re: Language code added to urls in CSS

Postby waarnemer » Tue Mar 06, 2018 3:16 pm

Is your css dynamically generated by some plugin?

eemeli
Joomla! Fledgling
Joomla! Fledgling
Posts: 4
Joined: Tue Mar 06, 2018 11:08 am

Re: Language code added to urls in CSS

Postby eemeli » Thu Mar 08, 2018 8:50 pm

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.

User avatar
infograf768
Joomla! Master
Joomla! Master
Posts: 18587
Joined: Fri Aug 12, 2005 3:47 pm
Location: **Translation Matters**

Re: Language code added to urls in CSS

Postby infograf768 » Fri Mar 09, 2018 8:23 am

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.
Jean-Marie Simonet / infograf · http://www.info-graf.fr
---------------------------------
ex-Joomla Translation Coordination Team • ex-Joomla! Production Working Group

User avatar
infograf768
Joomla! Master
Joomla! Master
Posts: 18587
Joined: Fri Aug 12, 2005 3:47 pm
Location: **Translation Matters**

Re: Language code added to urls in CSS

Postby infograf768 » Fri Mar 09, 2018 8:25 am

Can you post your font here as a zip?
Jean-Marie Simonet / infograf · http://www.info-graf.fr
---------------------------------
ex-Joomla Translation Coordination Team • ex-Joomla! Production Working Group

eemeli
Joomla! Fledgling
Joomla! Fledgling
Posts: 4
Joined: Tue Mar 06, 2018 11:08 am

Re: Language code added to urls in CSS

Postby eemeli » Fri Mar 09, 2018 9:08 am

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!

User avatar
infograf768
Joomla! Master
Joomla! Master
Posts: 18587
Joined: Fri Aug 12, 2005 3:47 pm
Location: **Translation Matters**

Re: Language code added to urls in CSS

Postby infograf768 » Fri Mar 09, 2018 9:36 am

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
Jean-Marie Simonet / infograf · http://www.info-graf.fr
---------------------------------
ex-Joomla Translation Coordination Team • ex-Joomla! Production Working Group

eemeli
Joomla! Fledgling
Joomla! Fledgling
Posts: 4
Joined: Tue Mar 06, 2018 11:08 am

Re: Language code added to urls in CSS

Postby eemeli » Fri Mar 09, 2018 10:00 am

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


Return to “Language - Joomla! 3.x”

Who is online

Users browsing this forum: BosseJ, waarnemer and 3 guests