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 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).
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;