I noticed that my font with 16px size is messed up somehow only on Windows
Here it is on Google Chrome macOS
Here it is on Google Chrome Windows 10
This is main font-face css in App.vue
#font-face {
font-family: "sukhumvit";
src: url("../public/fonts/sukhumvit/sukhumvit-text-webfont.eot");
src: url("../public/fonts/sukhumvit/sukhumvit-text-webfont.eot?#iefix")
format("embedded-opentype"),
url("../public/fonts/sukhumvit/sukhumvit-text-webfont.woff2")
format("woff2"),
url("../public/fonts/sukhumvit/sukhumvit-text-webfont.woff")
format("woff"),
url("../public/fonts/sukhumvit/sukhumvit-text-webfont.ttf")
format("truetype");
font-weight: 400;
font-style: normal;
}
#app {
font-family: "sukhumvit";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
overflow: hidden;
}
}
I have two <p> and one <button> that extend a certain class named test. I want to know if it is possible to add certain style rules to .test and then specific rules for the element type?
I thought of something like this:
.test {
font-weight: bold;
color: blue;
&p {
font-size: 26px;
}
&button {
font-size: 20px;
}
}
I know it is impossible to write it like that. This example is only for a concept example.
I've read the documentation and alas i found nothing...
Any idea or is this just impossible to achieve?
If I understand correctly you should use :extend:
LESS:
.test {
font-weight: bold;
color: blue;
}
p:extend(.test) {
font-size: 26px;
}
button:extend(.test){
font-size: 20px;
}
Output:
.test, p, button {
font-weight: bold;
color: blue;
}
p {
font-size: 26px;
}
button {
font-size: 20px;
}
I just inherited an application and the less variable file is setup as follows.
#icon-font-path: "../fonts/";
#exampleFont: exampleFont, 'Helvetica Neue', Helvetica, Arial, sans- serif;
#font-face {
font-family: exampleFont;
src: url('#{icon-font-path}#{exampleFont}.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
compiled CSS
#font-face {
font-family: exampleFont;
src: url('../fonts/exampleFont, 'Helvetica Neue', Helvetica, Arial, sans-serif.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Does anyone know why the src url contains the url AND font family and when it is compiled it combines both and still works? I've never seen it done this way before.
src should be
src: url('#{icon-font-path}exampleFont.ttf') format('truetype');
In the current code it has #{exampleFont} which would expand to the value of the variable.
Here a working example on how to use a mixin for Fonts in LESS:
https://github.com/MarcoHengstenberg/helpCSS/blob/master/help.css#L528-L547
On line 533 you have to replace weight and style with actual values for your regular font (400, normal).
I am trying to disable my anchor tags from being underlined when hovered over. I have added text decoration: none; to my .scss file like so:
$font-family-serif: 'Nixie One';
$font-family-base: $font-family-serif;
#import "bootstrap";
//#import "bootstrap-sprockets";
//TB Navbar overrides to change the color scheme
$bgDefault : #ffffff;
$bgHighlight : #ffffff;
$colDefault : #8587f1;
$colHighlight : #4e5aff;
.navbar-default {
font-weight: bold;
font-size: 25px;
background-color: $bgDefault;
border-color: $bgHighlight;
text-decoration: none;
Also when I look at the web page, it seems to compute the rule correctly:
Where am I going wrong here?
.navbar-default {
font-weight: bold;
font-size: 25px;
background-color: $bgDefault;
border-color: $bgHighlight;
text-decoration: none;
a
{
text-decoration: none;
&:hover{
text-decoration: none;
}
}
So apparently the issue was that I just had to specify the the a tag: a {text-decoration: none;} within my scss file instead of just setting it for the class.
In Less, it seems almost impossible to use #font-face selector. Less gives errors when I try to use
font-family: my_font
Here is how I try to use it:
#font-face {
font-family: my_font;
src: url('http://contest-bg.net/lg.ttf');
}
p {
font-family: my_font, "Lucida Grande", sans-serif;
}
There is simple escape in Less using ~"..." but can't come up with working code.
Had someone used it successfully?
Have you tried putting the font family name in single quotes? The following works just fine for me.
#font-face {
font-family: 'cblockbold';
src: url('assets/fonts/creabbb_-webfont.eot');
src: url('assets/fonts/creabbb_-webfont.eot?#iefix') format('embedded-opentype'),
url('assets/fonts/creabbb_-webfont.woff') format('woff'),
url('assets/fonts/creabbb_-webfont.ttf') format('truetype'),
url('assets/fonts/creabbb_-webfont.svg#CreativeBlockBBBold') format('svg');
font-weight: normal;
font-style: normal;
}
To use font as a mixin, try:
.ffbasic() {
font-family: ff-basic-gothic-web-pro-1,ff-basic-gothic-web-pro-2, AppleGothic, "helvetica neue", Arial, sans-serif;
}
then within a style declaration:
.your-class {
font-size: 14px;
.ffbasic();
}
One other note to the voted answer above; make sure that your mixin does not have parenthesis so that it is parsed when compiled into CSS.
Full Example:
** In Your Variables LESS File:**
// Declare the path to your fonts that you can change in the variables less file
#path-fonts: '../fonts';
** In Your Mixins LESS File:**
.font-names
{
#font-face {
font-family: 'open-sans-light';
src: url('#{path-fonts}/open-sans/OpenSans-Light-webfont.eot') format('enbedded-opentype'),
url('#{path-fonts}/open-sans/OpenSans-Light.ttf') format('truetype'),
url('#{path-fonts}/open-sans/OpenSans-Light-webfont.woff') format('woff'),
url('#{path-fonts}/open-sans/open-sans/OpenSans-Light-webfont.svg#open-sans-light') format('svg');
}
}
** In Your Nested Rules LESS File:**
#import 'your variables less file name';
#import 'your mixin less file name';
#font-face {
.font-names;
}
Note: That the ".font-names" definition does not have the () behind it.
I think it's because you are missing the font format. Which for ttf is truetype, if it's missing or incorrect the font might not be loaded.
#font-face {
font-family: "MyFont";
src: url("./my-font.ttf") format("truetype");
}
My LESS code:
#fontName: 'FontName';
#fontWeights: 'Light', 'Medium', 'SemiBold', 'Bold', 'ExtraBold';
#fontWeightsNum: 300, 400, 500, 600, 700;
.fontFace(#indexPrefix: 1) when (#indexPrefix =< length(#fontWeights)) {
#fontWeight: extract(#fontWeights, #indexPrefix);
#fontWeightNum: extract(#fontWeightsNum, #indexPrefix);
#fontFullName: "#{fontName}-#{fontWeight}";
#fileName: "../fonts/#{fontFullName}";
#font-face {
font-family: #fontName;
font-weight: #fontWeightNum;
font-style: normal;
font-display: swap;
src: local('#{fontFullName}'),
url('#{fileName}.woff2') format("woff2"),
url('#{fileName}.woff') format("woff");
}
.fontFace(#indexPrefix + 1);
}
.fontFace();
#f: '#{fontName}', "Helvetica Neue", sans-serif;
Get:
#font-face{
font-family:FontName;
font-weight:300;
font-style:normal;
font-display:swap;
src:local('FontName-Light'),
url(../fonts/FontName-Light.woff2) format("woff2"),
url(../fonts/FontName-Light.woff) format("woff")
}
x5
And you can use:
font: 300 16px #f;