loading custom font on a specific URL

Question

I have few custom font faces (for english) defined in my css, i also have other font faces that only needs on specific language pages. How do i load these language fonts only on language pages.

example: www.abc.cn or www.abc.jp needs to load language fonts to user, but when user enters www.abc.com it only loads english font to improve my page's performance.

score 0 · Answer 1 · answered Mar 06 '18 at 07:55

Try getting the current URL and add conditions according to the domain's extension. e.g:

var url = window.location.href;
console.log("Current URL: " + url);

if(url.includes(".com"))
  console.log("Load English fonts");
else if(url.includes(".cn"))
  console.log("Load Chinese fonts");

score 0 · Answer 2 · answered Mar 06 '18 at 09:18

You'll probably have specific CSS for specific sites/languages: not only loading one or other custom font but also using them for headings, text, etc: font-family: the-one-for-japanese,sans-serif; and font-family: the-one-for-chinese,sans-serif; for example.

I'd compile them as _partials in different CSS with an automated tool like Gulp or Grunt and Sass, PostCSS or LESS
or at least load 1 specific CSS for each site and then 1 common to all of them (@font-face at-rules should appear as soon as possible so loading begins soon but then other specific rules are at risk of being overridden by common ones).
You can also write @font-face in your HTML markup in a style element, then your common CSS and finally a second specific one if it exists.

OT: Specific CSS to each language may or may not be written in your generic CSS depending on the specific declarations you need.

set relevant lang attribute on html element <html lang="fr-qc"> (french in Quebec, Canada but <html lang="fr" – french whether in France, Belgium, Swiss, Togo, Senegal, Quebec, French Polynesia, wherever – is fine too).
In CSS, you'll multiple rules like [lang|="fr"] .yourclass { font-family: "with-diacritics", sans-serif; background: url(images/fr/bg.jpg); } (with ja, zh, en, it, nl, dk, etc)

It doesn't really add weight to your CSS because it'll compress especially well. It's more CSS to be parsed by the browser which isn't a real problem because it's fast (I mean you've a lot of more important things to optimize before that like images, JS or… your fonts) but it is barely more bytes to be transferred because Gzip on the server! :)

loading custom font on a specific URL

2 Answers2