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
Use the :lang selector for this. An example of this could be:
/* Selects any <p> in English (en) */
p:lang(en) {
}
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;
}
Related
We want to modify default font in HTML using #font-face
#font-face {
font-family: Times;
font-style: normal;
font-weight: 400;
src: local('serif');
}
in the above code we want to override Times font to serif, but above code is not working and Times font is getting used all the time instead of serif
Try this example, it works for me -- https://jsfiddle.net/gbk4rLw3/16/. However, it doesn't seem to work if you try to switch a font with a generic font type such as serif or sans-serif, but any other web-safe font seems to work.
Test code is here as well.
HTML
<div class="test">
TESTING
</div>
CSS
.test{
font-family: Times;
}
#font-face {
font-family: Times;
font-style: normal;
font-weight: 400;
src: local("Impact"); /* Try replacing with Arial, Comic Sans MS, etc....*/
} /*Doesn't seem to work with generic font types (serif, sans-serif)*/
If you want a serif font, try using "Courier New".
I'm referring to the documentation here:
sass docs
and trying to see if its possible to use an if statement to apply a letter spacing attribute to each class that uses a certain font family.
I've tried
h1 {
#if font-family == 'Open Sans Condensed' {letter-spacing: 0.1em;}
}
h1 {
font-family: 'Open Sans Condensed', sans-serif;
}
with the hope of outputting:
h1 {
font-family: 'Open Sans Condensed';
letter-spacing: 0.1em;
}
which doesn't work. i'm pretty sure that I'm approaching this problem from the wrong angle. Can anybody verify if this kind of usage is possible?
Two ways you could approach this:
1) Include the letter-spacing as part of the font-face definition.
#font-face {
font-family: 'Open Sans';
src: [urls for various formats go here];
letter-spacing: 0.1em;
}
If you're loading the font in from an external stylesheet, like with google fonts or similar, you should still be able to declare a second font-face block that just includes the font-family and letter-spacing rules.
2) Use a sass mixin. You can make it very simple or more flexible, depending on whether you want to account for multiple fonts.
Basic one-font setup:
#mixin font-styles() {
font-family: 'Open Sans Condensed', sans-serif;
letter-spacing: 0.1em;
}
h1 {
#include font-styles;
}
Or parameterized for multiple font styles:
#mixin font-styles($font: 'headings') {
#if $font == 'headings' {
font-family: 'Open Sans Condensed', sans-serif;
letter-spacing: 0.1em;
}
#elseif $font == 'text' {
font-family: 'Open Sans', sans-serif;
[related font styles go here]
}
[add more font style sets as needed]
}
h1 { #include font-styles('headings'); }
p { #include font-styles('text'); }
I have a list of fonts that I'm pulling in from Google's CDN. They list documentation here but I'm having issues setting up the semibold italic styles. Is there a way to make this work?
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,600italic,400,300,600' rel='stylesheet' type='text/css'>
#semibold: "Open Sans:600", sans-serif;
#semibold-italic: "Open Sans:600italic", sans-serif;
#light: "Open Sans:300", sans-serif;
I know that I can set the font-weight and style in font-face.
How can I include everything in my variable declaration?
I'm not too familiar with how Google Fonts works, but maybe a mixin would be a decent alternative for you.
.semibold {
font-family: 'Font', 'Font B', 'Font C';
font-weight: 500;
font-style: normal;
}
div {
.semibold;
}
You can use parametric mixins. You can declare a style, say .font, which accept several parameters — in this case, it should accept font-family, font-weight and font-style. Of course you are free to add/remove other font- or text- related properties for further fine-tuning.
// Declare mixin
.font(#fontFamily: Arial, sans-serif; #fontWeight: normal; #fontStyle: normal) {
font-family: #fontFamily;
font-style: #fontStyle;
font-weight: #fontWeight;
}
// Sample styles
.semibold {
.font("Open Sans", sans-serif; 600; normal);
}
.semibold-italic {
.font("Open Sans", sans-serif; 600; italic);
}
.light {
.font("Open Sans", sans-serif; 300; normal);
}
For a project, I have to use many style off a font.
Here is the link of the google font
Here is my css import
#import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,300,400,700);
What I would like to know is how can I define the font-family to display for example the "Open Sans Light 300 Italic"
Thanks
CSS
#import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,300,400,700);
body {
font-family: 'Open Sans', sans-serif;
}
body p {
font-style: italic;
font-weight: 300; /* You specify the number you see next to the fonts to change from light to bold ie you would put 700 etc. etc. */
}
I think this is what you're looking for.
body {
font-family: "Open Sans";
font-weight: 300;
font-style: italic;
}
300/400/700 is font-weight. If you want bold font use
font:bold(or 700) 12px/15px "Open Sans", sans-serif
if you want light italic use
font:300 italic 12px/15px "Open Sans", sans-serif
When i use fontface, the browser needs some time before the font is downloaded and rendered, until then the browser default font is shown. I have tried to give Arial as fallbackfont and as general HTML/BODY font, but this does not change the problem.
is there a way to avoid this?
#font-face {
font-family: 'StrukturProBold';
src: url('fonts/strukturpro_bold_ubasic/StrukturPro-Bold-webfont.eot');
src: url('fonts/strukturpro_bold_ubasic/StrukturPro-Bold-webfont.eot?iefix') format('eot'),
url('fonts/strukturpro_bold_ubasic/StrukturPro-Bold-webfont.woff') format('woff'),
url('fonts/strukturpro_bold_ubasic/StrukturPro-Bold-webfont.ttf') format('truetype'),
url('fonts/strukturpro_bold_ubasic/StrukturPro-Bold-webfont.svg#webfontpQgNQDw9') format('svg');
font-weight: normal;
font-style: normal;
}
body, html {
font-family: "StrukturProBold", Arial, Helvetica, FreeSans, sans-serif, "open-serif", open-serif;
}
h1 {
font-family: "StrukturProBold", Arial, Helvetica, FreeSans, sans-serif, "open-serif", open-serif;
}
This is called a "Flash Of Un-styled Text" (or FOUT). You wont see it in Webkit browsers, because they hide the text until the font has been loaded. If you want to be more agressive with forcing other browsers to hide the FOUT, you can do it with some pre-written JavaScript.
Paul Irish explains it all here:
http://paulirish.com/2009/fighting-the-font-face-fout/
Here's the code you need:
<script src="//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script>
WebFont.load({
custom: {
families: ['yourfont'],
urls : ['http://example.com/yourfontdeclaration.css']
}
});
</script>
and some CSS:
h2 {
font-family: 'yourfont', helvetica, sans-serif;
}
.wf-loading h2 {
visibility: hidden;
}
Unless the visitor has the specialty font installed on their system, the browser has to download it just like it would an image file, or a linked stylesheet or .js file.
From reading the comments above, you're probably already doing the best that you can.
StrukturProBold is just a simple sans-serif font.
You can expand your list of secondary font choices though, maybe Arial and Helvetica aren't as good of a choice as say Verdana, or Trebuchet
font-family: "StrukturProBold", Trebuchet, Verdana, Helvetica, Arial, sans-serif;