#font-face { font-family: 'chunkfive_printregular'; src: url( {{ chunk_five_print-webfont.woff2 | asset_url }} ) format('woff2'), url({{ chunk_five_print-webfont.woff | asset_url }} ) format('woff'); font-weight: normal; font-style: normal;
like this not work now please help me after Shopify 2.0 update
I have some questions about that too.
There are some warnings in the browser console.
Failed to decode downloaded font: OTS parsing error: DSIG:
misaligned table
Newly built stores will appear recently, which has never happened before.
My style code:
<style>
#font-face {
font-family: Sanctuary;
font-weight: 500;
font-style: normal;
src: url("{{ 'Sanctuary.ttf' | asset_url }}");
font-display: swap;
}
.announcement-bar__message.h5 {
font-family: Sanctuary;
}
</style>
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 embed google font to the global setting in nuxt.config.js
link: [
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' }
]
But how to apply this font to every page .
New answer
Use #nuxt/google-fonts package: https://google-fonts.nuxtjs.org
It's trivial to use and supports a bunch of options including downloading the fonts.
Old answer
If you want to include the font within your app so you're serving it
Download the font from: https://fonts.google.com/specimen/Roboto?selection.family=Roboto (Open the drawer and download the .zip file).
Unpack the contents of the .zip into ./assets/fonts/* (create it if it does not exist).
Create ./assets/fonts/roboto.css and place the following in it:
/* cyrillic-ext */
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
(You can find this CSS by going to https://fonts.googleapis.com/css?family=Roboto).
Then change nuxt.config.js to include the CSS file in the css property:
module.exports = {
/*
** Global CSS
*/
css: [
'~/assets/fonts/roboto.css'
]
}
Then you apply font-family: 'Roboto', sans-serif; to your text elements.
Using the font on every page
Create a ./assets/css/styles.css file with the following in it:
body
{
font-family: 'Roboto', sans-serif;
}
Then as above include the CSS file in the nuxt.config.js:
module.exports = {
css: [
'~/assets/fonts/roboto.css',
'~/assets/css/styles.css'
]
}
Same applies for any asset like other fonts, icons, framework css etc.
QUICK
In your nuxt.config.js fi
head: {
...
...
link: [
{
rel: 'icon',
type: 'image/x-icon',
href: '/favicon.ico'
},
{
rel: 'stylesheet',
href: 'https://fonts.googleapis.com/css?family=Lato:400,700'
}
]
}
And in your layouts/default.vue or any other layout file that you are using add the style tag
<style scoped>
#app {
font-family: 'Lato', sans-serif;
}
</style>
It is simple like this
Go to Google fonts and select your font style e.g Montserrat
Got to nuxt.config.js and add your font url as shown here
export default {
head: {
meta: [],
link: [
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Montserrat&display=swap"'}
]
}
Go to your nuxt project -> layouts directory -> default.vue file and add class named app ( or whatever name you want) in v-app tag as shown here
<v-app dark class="app">
--your app goes here --
</v-app>
In the same file style option add the following lines in the class body you defined above
<style>
.app{
font-family: 'Montserrat', sans-serif;
}
</style>
Make sure class is defined in v-app tag and use <style> and not <style scoped> to take effect of whole project
Update your CSS with the following rule:
body {
font-family: 'Roboto', sans-serif;
}
If you don't have CSS stylesheet setup yet, create a new file in assets directory named i.e. main.css. Inside it put the code above and save it. Then edit nuxt.config.js adding this piece of code after head object:
css: [
'#/assets/main.css'
],
I tried many ways to add a custom font to a nuxt + vuetify project but no one worked correctly.
Finally I created a global.scss in assets folder file and addressed it in nuxt.config.js:
css: ['~assets/global.scss'],
and in global.scss file:
#font-face {
font-family: 'my-custom-font';
src: local('my-custom-font'), url('path/to/font') format('truetype');
}
.v-application {
font-family: 'my-custom-font' !important;
}
// or
#app {
font-family: 'my-custom-font';
}
This worked correctly.
you can do these steps:
1__define your font in as a custom varriable in a seprated file in your assests directory,for example variables.scss, like this:
$body-font-family: Roboto;
#import '~vuetify/src/styles/styles.sass';
2__then in the nuxt.config.js,you should add a stylesheet link in the head, like this:
head: {
link: [
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Oswald|Libre+Baskerville&display=swap' }
]
},
3__then it is neccessary to enable treeshaking in the vuetify and set your customvariables,like this:
vuetify: {
customVariables: ['~/assets/variables.scss'],
treeShake: true
},
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;