font-stretch property doesn't work at all. Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>font-stretch</title>
<style>
p {
font-size: 5em;
font-family: 'Myriad Pro';
}
</style>
</head>
<body>
<p>
<span style="font-stretch: ultra-condensed">P</span>
<span style="font-stretch: extra-condensed">P</span>
<span style="font-stretch: condensed">P</span>
<span style="font-stretch: semi-condensed">P</span>
<span style="font-stretch: normal">P</span>
<span style="font-stretch: semi-expanded">P</span>
<span style="font-stretch: expanded">P</span>
<span style="font-stretch: extra-expanded">P</span>
<span style="font-stretch: ultra-expanded">P</span>
</p>
</body>
</html>
I've tried many other fonts and problem still exists. Please help
Google font's UI is currently still preferring a static/single-weight css output.
But you can manually force the API to output variable font #font-face rules:
https://fonts.googleapis.com/css2?family=Inconsolata:wdth,wght#50..200,200..900
It's important to use '..' as a range delimiter – otherwise you'll get a css containing several static woff2 file urls.
Besides, google's API uses some user agent detection (a.k.a browser sniffing) to provide backwards compatibility (for browsers that don't support variable fonts).
This makes perfect sense ... unfortunately, this doesn't work very well: some Browsers like Opera (flawlessly supporting VF) will also receive static fonts.
(This might also apply to other chromium/blink based browsers)
As a workaround I recommend, to open the above css URL in firefox. The result should look something like this:
#font-face {
font-family: 'Inconsolata';
font-style: normal;
font-weight: 200 900;
font-stretch: 50% 200%;
src: url(https://fonts.gstatic.com/s/inconsolata/v31/QldKNThLqRwH-OJ1UHjlKGlZ5qg.woff2) format('woff2');
}
Notice the font-weight and font-stretch property values containing 2
values for a range of weights/widths. This is a good indicator, you've retrieved the correct (variable) rules.
Example: Inconsolata variable
#font-face {
font-family: "Inconsolata";
font-style: normal;
font-weight: 200 900;
font-stretch: 50% 200%;
src: url(https://fonts.gstatic.com/s/inconsolata/v31/QldKNThLqRwH-OJ1UHjlKGlZ5qg.woff2) format("woff2");
}
body {
font-size: 36px;
font-family: sans-serif;
}
h2 {
font-size: 0.5em;
color: red;
}
p {
font-family: Inconsolata;
transition: 0.8s;
}
.customMap {
font-family: sans-serif;
}
#font-face {
font-family: "Inconsolata2";
src: url(https://fonts.gstatic.com/s/robotocondensed/v25/ieVl2ZhZI2eCN5jzbjEETS9weq8-19K7DQ.woff2) format("woff2");
font-stretch: 50%;
}
#font-face {
font-family: "Inconsolata2";
src: url(https://fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51TLBCc6CsQ.woff2) format('woff2');
font-stretch: 200%;
font-style: normal;
font-weight: normal;
}
.customMap {
font-family: "Inconsolata2";
font-style: normal;
}
<p style="font-family:sans-serif; font-size:12px">Font-stretch: <input type="range" id="fontStretch" value="50" min="50" max="200" step="5"></p>
<p style="font-family:sans-serif; font-size:12px">Font-weight: <input type="range" id="fontWeight" value="200" min="200" max="900" step="10"></p>
<p id="variableTest" style="font-stretch:50%" class="inconsolata variableTest">Hamburgefons</p>
<h2>Variable fonts Example</h2>
<p>
<span style="font-stretch: ultra-condensed">P</span>
<span style="font-stretch: extra-condensed">P</span>
<span style="font-stretch: condensed">P</span>
<span style="font-stretch: semi-condensed">P</span>
<span style="font-stretch: normal">P</span>
<span style="font-stretch: semi-expanded">P</span>
<span style="font-stretch: expanded">P</span>
<span style="font-stretch: extra-expanded">P</span>
<span style="font-stretch: ultra-expanded">P</span>
</p>
<h2>Static fonts Example (custom fonts to widths mapping)</h2>
<p class="customMap">
<span style="font-stretch: 50%">g</span>
<span style="font-stretch: 200%">g</span>
</p>
<script>
fontStretch.addEventListener('change', (e) => {
variableTest.style.fontStretch = e.currentTarget.value + '%';
});
fontWeight.addEventListener('change', (e) => {
variableTest.style.fontWeight = e.currentTarget.value;
})
</script>
You can use font-stretch to select a condensed or expanded face from such fonts. If the font you are using does not offer condensed or expanded faces, this property has no effect.
Related
I am developing my first application at Vue and I must say that I am having a hard time finding practical examples and complete information for all the problems I am encountering.
Right now I'm trying to use an icon font that I've created with iconomoon. I've imported it into my project and I've declared it as a font-face in my style, importing the declaration of the icon I want to test with into the same style.
At first I had a webpack configuration error that I have already corrected, but when I declare my icon in my html template only a box with a border appears but the icon is not shown
Here is my template
<header>
<nav class="navbar navbar-expand-lg navbar-light header">
<img class="logo" src="../../assets/logo.png">
<i class="icon-ic-fluent-home-24-regular"></i>
and here my css
<style>
#font-face {
font-family: "icomoon";
src: url(../../icons/icomoon.ttf) format("truetype");
font-weight: normal;
font-style: normal;
}
.icon-ic-fluent-home-24-regular:before {
content: "\e908";
}
[![project strucutre][1]][1]
</style>
Can someone tell me what my mistake is?
Thank you very much for your time and help in advance
[![the square in the image corresponds to what it shows instead of the][1]][1]
[1]: https://i.stack.imgur.com/btYW0.png
You need to tell the icon to use the font you created:
<i class="icon icon-ic-fluent-home-24-regular"></i>
<style>
#font-face {
font-family: "icomoon";
src: url(../../icons/icomoon.ttf) format("truetype");
font-weight: normal;
font-style: normal;
}
.icon {
font-family: "icomoon"
}
.icon-ic-fluent-home-24-regular:before {
content: "\e908";
}
</style>
I have the following code:
<a href="#home">
<i class="fas fa-chart-bar fa-lg">
<span class="card-text card-textWithIcon">serif font</span>
</i>
</a>
it shows an image and a short text. It works fine but the text is in a serif font. How can I switch to a sans serif font?
I'm using Bootstrap 4 and Fontawesome 5.8.1
Edit 1:
I added
font-family:sans-serif !important
to the .fa class. But then the icon is visible as an rectangle (which is wrong).
Edit 2:
I added two new classes:
.span {
font-family:Sans-Serif
}
.sansserif {
font-family:Sans-Serif
}
and added the .sansserif to the span-element:
<span class="card-text card-textWithIcon sansserif">serif font</span>
But this did not work.
Solution: see second comment from elveti
"You should not add additional content into your icon. Put it afterwards, like serif font – elveti 2 mins ago"
You should use Font Awesome as font family for all i tags then Sans-Sarif for everything else or what you want to use it for
i.fas {
font-family: 'Font Awesome\ 5 Free' !important;
font-style: none
}
* {
font-family:Sans-Serif;
}
Try the below method. You can set the font-family to root element or body tag.
body {
font-family:Sans-Serif;
}
a .fas {
font-family: "Font Awesome 5 Free";
}
.card-text {
font-family: Sans-Serif;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<a href="#home">
<i class="fas fa-chart-bar fa-lg">
<span class="card-text card-textWithIcon">serif font</span>
</i>
</a>
I'm trying to insert this API code into MailChimp: <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet">
I want the text to be light 300 but am totally lost. Can anyone help me code this?
<div style="text-align: left;"><span style="font-family:open sans,helvetica neue,helvetica,arial,sans-serif">🇪🇹<span style="font-size:18px"><span style="color:#000000"><strong>Ethiopia: </strong><br />
Prime Minister resigns abruptly after years of violent anti-government protests and a failed nationwide state of emergency. The country’s future is uncertain. </span></span></span><br />
</div>
<div style="text-align: right;"><span style="font-family:open sans,helvetica neue,helvetica,arial,sans-serif"><span style="font-size:14px">📍 <span style="color:#000000">John Smith, 35, Kosovo</span></span></span></div>
If you have added the <link rel=stylesheet..> correctly in your HEAD section. Change the font-family:open sans,helvetica neue,helvetica,arial,sans-serif to font-family: 'Open Sans', sans-serif; and add font-weight: 300;
<div style="text-align: left;"><span style="font-family: 'Open Sans', sans-serif; font-weight: 300;">🇪🇹<span style="font-sizee:18px"><span style="color:#000000"><strong>Ethiopia: </strong><br />
Prime Minister resigns abruptly after years of violent anti-government protests and a failed nationwide state of emergency. The country’s future is uncertain. </span></span></span><br />
</div>
<div style="text-align: right;"><span style="font-family: 'Open Sans', sans-serif; font-weight: 300;"><span style="font-size:14px">📍 <span style="color:#000000">John Smith, 35, Kosovo</span></span></span></div>
Please do the three steps as follows,
Add the <Link> tag. <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet">
Change the current font family as follows: font-family: 'Open Sans';
You want the text to be in 300px,then add font-weight: 300;
I've tried your example in jsFiddle and attached the corresponding link below.
https://jsfiddle.net/2ker4mop/2/
I have created a small drag and drop using jQuery UI Sortable. The issue is demonstrated in the .gif below. You can't see it in the .gif, but there is a flash of unstyled default font text for all text on the page, not just within the sortable.]1
After hours of experimentation, I found that changing the following CSS property to use the browser default font or another local font fixes the issue:
body {
font-family: "Lato", "sans-serif";
}
Lato is being loaded by this line in the head of my HTML document:
<link href="http://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet" />
Which loads this stylesheet from Google:
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'), url(http://fonts.gstatic.com/s/lato/v11/1YwB1sO8YE1Lyjf12WNiUA.woff2) format('woff2');
}
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 700;
src: local('Lato Bold'), local('Lato-Bold'), url(http://fonts.gstatic.com/s/lato/v11/H2DMvhDLycM56KNuAtbJYA.woff2) format('woff2');
}
Here is the Javascript code and markup for the jQuery UI Sortable you see. It is connected to another Sortable to allow for dragging items between the lists:
$('.js-sortable').each(function () {
var $this = $(this);
var connectedTo = $this.attr('data-connected-to');
$this.sortable({
connectWith: connectedTo,
cursor: 'move',
items: '.js-sortable-item:not(.js-locked)',
placeholder: 'sf-sortable-placeholder',
tolerance: 'pointer'
});
});
// when a sortable item is dropped
$('.js-sortable').on('sortdeactivate', function(event, ui) {
var $this = $(this);
// for the active rules list
if ($this.attr('id') === 'active-rules') {
// recalculate and display the new priority of all list items
var count = 1;
$this.find('.js-sortable-item').each(function() {
var $this = $(this);
$this.attr('data-priority', count);
$this.find('.js-status').text('Priority ' + count);
count++;
});
// for the inactive rules list
} else if ($this.attr('id') === 'inactive-rules') {
// remove priority and display no priority indicator
$this.find('.js-sortable-item').removeAttr('data-priority');
$this.find('.js-status').text('Not Enforced');
}
});
// initialize
$('.js-sortable').trigger('sortdeactivate');
<h2 class="sf-rules-head">Active Rules</h2>
<ul id="active-rules" class="js-sortable sf-sortable" data-connected-to="#inactive-rules">
<li class="js-sortable-item js-locked sf-rule" data-priority="1">
<div class="sf-handle-container">
<i class="sf-handle"></i>
<p class="js-status sf-status"></p>
<p class="sf-rule-name">Rule Name A <i class="fa fa-info-circle js-tooltip" data-content="RULE_DESCRIPTION_GOES_HERE"></i></p>
</div>
</li>
<li class="js-sortable-item sf-rule" data-priority="2">
<div class="sf-handle-container">
<i class="sf-handle"></i>
<p class="js-status sf-status"></p>
<p class="sf-rule-name">Rule Name B <i class="fa fa-info-circle js-tooltip" data-content="RULE_DESCRIPTION_GOES_HERE"></i></p>
</div>
</li>
<li class="js-sortable-item sf-rule" data-priority="3">
<div class="sf-handle-container">
<i class="sf-handle"></i>
<p class="js-status sf-status"></p>
<p class="sf-rule-name">Rule Name C <i class="fa fa-info-circle js-tooltip" data-content="RULE_DESCRIPTION_GOES_HERE"></i></p>
<select class="form-control sf-dropdown">
<option value="one" selected>Option One</option>
<option value="two">Option Two</option>
<option value="three">Option Three</option>
<option value="four">Option Four</option>
</select>
</div>
</li>
</ul>
I have been unable to reproduce this issue in Chrome and IE. Can anyone tell me why this happens? Is there no way to use #font-face with jQuery UI Sortable in Mozilla and avoid this weird flash of text styling?
i have the code for inputting font-face icons and it is working very properly but only into , , or tags. when i try to use font-faces icons into form buttons (eg. image buttons, submit buttons, reset buttons...) it doesn't show.
hege goes the css code:
#font-face {
font-family: "Flaticon";
src: url("flaticon.eot");
src: url("flaticon.eot#iefix") format("embedded-opentype"),
url("flaticon.woff") format("woff"),
url("flaticon.ttf") format("truetype"),
url("flaticon.svg") format("svg");
font-weight: normal;
font-style: normal;
}
[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {
font-family: Flaticon;
font-size: 20px;
font-style: normal;
margin-left: 20px;
}.flaticon-delete13:before {
content: "\e000";
}
and here goes the html snippet code that works fine:
<body>
<div class="glyph-icon flaticon-delete13"></div>
</body>
this is the link that goes into the header:
<link rel="stylesheet" type="text/css" href="flaticon.css">
i want to put this font-face icon into a form button (eg. submit button) along with a text. for instance: an icon "cross" along with the text "Add".
thanks in advance.
If you implement font icon it is not possible with input tag.
Instead, use this for submit button:
<button class='button' type='submit'><span class="glyph-icon flaticon-delete13"></span>Submit</button>
I would recommend using Font Awesome to achieve this result.
Check out my jsfiddle: http://jsfiddle.net/irkanu/7VytQ/
I also used Bootstrap to achieve the minimal styling to the form.
The code for the button would be:
<button type="submit" class="btn btn-default"><i class="fa fa-plus"></i> Add</button>
Is this what you looking for. You can use icomoon to create your own icons
http://jsfiddle.net/SKMN9/
<button type="submit" class="buttons add">Add New Page</button>