CODEWITHSUNDEEP
csssassfontshugo
JUNG JI YONG
JUNG JI YONG

Reputation: 13

I want to have different fonts for each language. (SCSS)

I want to have different fonts for each language.

But this doesn't work.(hugo 0.90.2)

What's wrong?

@font-face {
  font-family: 'Noto Sans KR';
  @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');
  unicode-range: U+AC00-D7A3, U+0030-0039;
}
@font-face {
  font-family: 'Poppins';
  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
  unicode-range: U+0041-005A, U+0061-007A;
}

:root {
  --font-family-heading: 'Poppins', 'Noto Sans KR', sans-serif;
  --font-family-paragraph: Helvetica, 'Noto Sans KR', sans-serif;
  --font-family-mono: monospace, 'Noto Sans KR';
  --base-color: #ffffff;
  --base-offset-color: #eaeaea;
  --highlight-color: #7b16ff;
  --heading-color: #1c1b1d;
  --text-color: #4e5157;
}

my site https://ravenearth.com

Upvotes: 1

Views: 1285

Answers (2)

Yaroslav Trach
Yaroslav Trach

Reputation: 2011

You have defined css font family variables not properly. You should provide prioritized list of one or more font family names. First going to be most prioritized font family name, if it will be missing - browser will take next font family name from list, and so on.


:root {
  --font-family-heading: 'Poppins', 'Noto Sans KR', sans-serif;
  --font-family-paragraph: 'Noto Sans KR', Helvetica, sans-serif;
  --font-family-mono: 'Noto Sans KR', monospace;
  ...
}

To override root variables in accordance to selected language, you can use ":lang()" selector:

// Korean language
html:lang(ko):root {
    --font-family-h1: sans-serif;
}

// English language
html:lang(en):root {
    --font-family-h1: monospace;
}

Upvotes: 0

najmieh sadat safarabadi
najmieh sadat safarabadi

Reputation: 153

Use the :lang selector for this. An example of this could be:

/* Selects any <p> in English (en) */
p:lang(en) {

}

Upvotes: 1

Related Questions