I'm using the Google font family Yanone Kaffeesatz on my website. I have the following code in my header
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,200,300,700' rel='stylesheet' type='text/css'>
In my stylesheet I have:
h1{font-size:2.0em; font-family: 'Yanone Kaffeesatz Light', arial, serif; line-height:1.2; z-index:999; position:relative }
h2{font-size:1.5em; line-height:1.3em; font-family: 'Yanone Kaffeesatz', arial, serif; }
h2 displays just fine. h1 reverts to Arial. I cannot use Bold or Book either, only the normal version.
The font family name is always "Yanone Kaffeesatz". To get a different weight change the font-weight property. Example at jsFiddle:
h1 {
font-size:2.0em;
font-family: 'Yanone Kaffeesatz', arial, serif;
font-weight: 200;
}
Related
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;
}
I am trying to generate pdf files using a MadCap Flare project, but the PDF files come out with the wrong font. I am using the latest version of Flare, 2019r2.
I am trying to generate paragraphs using the Flexo fonts from Duotype. All the fonts are installed in the main Windows font directory: C:\Windows\Fonts\DUROTYPE_-_FLEXO-REGULAR_1.OTF. This was accomplished by right clicking on the font and choosing "Install for all users".
An example of the issue is the h2 style. The stylesheet has the following declarations in the default section:
body
{
padding: 0 20px;
}
...
body,
div,
li,
p
{
color: #3b4151;
font-family: FlexoRegular, Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 1em;
font-weight: normal;
margin: 0.5em 0;
mc-hyphenate: never;
orphans: 2;
widows: 2;
}
...
h2
{
color: #f8193f;
font-family: FlexoBoldIt, Arial, "Helvetica Neue", Helvetica, sans-serif;
font-weight: normal;
font-size: 1.67em;
page-break-after: avoid;
}
The selector I actually want to use is under a #media section with the following declarations.
body
{
padding: 0;
position: relative;
margin: 0;
}
h2
{
color: #f8193f;
font-family: "Flexo-BoldIt", Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 9pt;
margin-bottom: 0px;
margin: 0px;
margin-top: 6px;
}
When I define the font-familiy as "font-family: "Flexo", Arial, "Helvetica Neue", Helvetica, sans-serif;" I get output with the Flexo font. However, when I try "Flexo-BoldIt" or 'Flexo-BoldIt' or "Flexo Bold Italic" or various other combinations of quotes and font names I get output with Microsoft Sans Serif. When I try to override the style with an explicit declaration such as
<h2 style="text-align: center;font-family: "Flexo-BoldIt"...">
the output is again in MS Sans Serif.
Adding declarations like
font-style: italic;
font-weight: bold;
doesn't help.
Why doesn't Flare generate output with the correct font? Also, why doesn't it generate output with Arial, as that is installed? If I remove "Flexo-BoldIt" from the font-family I get output with Arial.
Any help would be much appreciated.
Have you added font-face in CSS
#font-face
{
font-family: 'YourFontFamilyName';
src: url(../path/to/font);
}
After that use font like
h1
{
font-family: 'YourFontFamilyName';
}
Also, keep your fonts in project files so you can access it with a relative path easily.
Try this out and give me feedback :)
UPDATE
This is more of a tip for every project similar to this one.
Do not use the system installed fonts because if the user doesn't have that font installed on their system it will be wrong. Always put font files in a project directory and access them like above.
Convert the font file into base64
#font-face {
font-family: 'myfont';
src: url(data:font/truetype;charset=utf-8;base64,<<copied base64 string>>) format('truetype');
font-weight: normal;
font-style: normal;
}
Try this, from https://www.madcapsoftware.com/blog/madcap-flare-tip-use-custom-fonts-flare-outputs/:
The #font-face rule can have “font-family” defined as any name. However, I recommend using the default name seen in Flare. You can find out what name Flare is reading the font by going to the Home Ribbon and selecting the Font dropdown. The reason I recommend this is because if the font name is different than what appears in the dropdown, the PDF outputs will have to point to a different font name than your HTML5 outputs.
The name you show in the example looks like the name on the filesystem, not necessarily what the name appears as in the ribbon.
I have downloaded the Rubik Font from https://www.fontsquirrel.com/fonts/rubik and i get the zip file and after extracting i get 7-8 Rubik ttf files.
Some of the file names are Rubik-Black, Rubik-Medium, etc.
I have tried something like this in css but its not working :-
body {
font-family: Rubik-Bold !important;
font-size: 14px;
line-height: 1.4;
letter-spacing: .08em;
color: #7a8282;
}
Now, I don't know how to install it in my website.
add <link href='https://fonts.googleapis.com/css?family=Rubik:400,500,400italic,700' rel='stylesheet' type='text/css'> before the </head> . Then use like this:
font-family: 'Rubik';
for bold:
font-family: 'Rubik';
font-weight: 700;
for italic:
font-family: 'Rubik';
font-style: italic;
I am trying to add a google font as per instructions, and it works in testing files, but fails to load on a production site.
http://www.bleskuborka.ru/services/
The headings УБОРКА ОФИСА, УБОРКА КВАРТИРЫ etc. are supposed to be rendered with Roboto Condensed.
<link href="http://fonts.googleapis.com/css?family=Roboto+Condensed&subset=latin,cyrillic" rel="stylesheet" type="text/css">
The font is linked to page. The font-family is specified:
.serv-heading {
font-family: 'Roboto-Condensed', sans-serif;
text-transform: uppercase;
font-size: 30px;
line-height: 1.2em;
}
Still, something is missing.
I first thought that this might be due to the cyrillic characters but I tried renaming the headings into English, and it didn't work out.
Please help!
It should be Roboto Condensed. With space instead of dash.
.serv-heading {
font-family: 'Roboto Condensed', sans-serif;
text-transform: uppercase;
font-size: 30px;
line-height: 1.2em;
}
Try with Roboto Condensed instead of Roboto-Condensed and it will work fine:
.serv-heading {
font-family: 'Roboto Condensed', sans-serif;
text-transform: uppercase;
font-size: 30px;
line-height: 1.2em;
}
Also note to use https with Google Font links, it will avoid some issues if one day you work on a https website!
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);
}