Hope everyone is good.
Problem is my shopify store has custom font "IntegralCF-Regular" embedded and used but the font is not showing up correctly in safari. Here is my code in "custom.css":
#font-face {
font-family: 'IntegralCF-Regular' ;
src: local('https://cdn.shopify.com/s/files/1/0561/3898/9704/files/IntegralCF-Regular.woff?v=1645097830'), local('Integral-CF-Regular'),
url('https://cdn.shopify.com/s/files/1/0561/3898/9704/files/IntegralCF-Regular.woff2') format('woff2'),
font-weight: 400;
font-style: normal;
}
#font-face{font-family:'IntegralCF-Regular' ;
src:url(https://cdn.shopify.com/s/files/1/0561/3898/9704/files/IntegralCF-Regular.woff?v=1645097830) format('woff');
font-weight:600;
font-style:italic;}
.header-wrapper span, .footer-section h4, .footer-section p, .footer-section span, .footer-section button#Subscribe-footer-newsletter-section, .footer-section li {
font-family: IntegralCF-Regular;
src: local('https://cdn.shopify.com/s/files/1/0561/3898/9704/files/IntegralCF-Regular.woff?v=1645097830'), local('Integral-CF-Regular'),
url('https://cdn.shopify.com/s/files/1/0561/3898/9704/files/IntegralCF-Regular.woff2') format('woff2');
}
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;
}
}
In my project, I use font-icon.
I have defined icon-close in icon.styl file, here is core code:
#font-face {
font-family: 'sell-icon';
src: url('/src/common/fonts/sell-icon.eot?o23a15');
src: url('/src/common/fonts/sell-icon.eot?o23a15#iefix') format('embedded-opentype'),
url('/src/common/fonts/sell-icon.ttf?o23a15') format('truetype'),
url('/src/common/fonts/sell-icon.woff?o23a15') format('woff'),
url('/src/common/fonts/sell-icon.svg?o23a15#sell-icon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts
*/
font-family: 'sell-icon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-keyboard_arrow_right:before {
content: "\e900";
}
.icon-close:before {
content: "\e901";
}
.......
And now, I want to use it in head.vue file:
<div class="detail-close">
<i class="icon-close"></i>
</div>
<style lang="stylus" rel="stylesheet/stylus">
#import "../../common/stylus/mixin"
#import "../../common/stylus/icon.styl"
But I have got error:
Failed to decode downloaded font:
http://X.X.X.X:8080/src/common/fonts/sell-icon.ttf?o23a15
Who can help me?
I'm trying to set the shorthand font value (related question), but the variable I'm using for line-height is behaving weirdly; as if the variable is re-interpreted each time.
This is in LESS version 1.4.2
.info {
#infoHeight: 22px;
#infoTopPadding: 2px;
#infoLineHeight: #infoHeight - #infoTopPadding;
margin: #infoLineHeight;
font: bold 13px~'/'#infoLineHeight Arial, sans-serif;
}
Results in:
.info {
margin: 20px;
font: bold 13px / 22px - 2px Arial, sans-serif;
}
So the same variable results in two different values depending on context. Is this intended behavior or could this be a bug?
in Less >= 1.4.0 you need to use math operations in brackets by default (thats's by design, but can be changed in the Less settings). Your code would work perfectly fine in older versions of Less.
So if you write in Less:
.info {
#infoHeight: 22px;
#infoTopPadding: 2px;
#infoLineHeight: (#infoHeight - #infoTopPadding);
margin: #infoLineHeight;
font: bold 13px~'/'#infoLineHeight Arial, sans-serif;
}
the CSS output becomes:
.info {
margin: 20px;
font: bold 13px / 20px Arial, sans-serif;
}
I hope this is your desired/expected outcome.
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;