I use create-react-app and want to import custom fonts in css this way:
#font-face {
font-family: 'Formular';
src:url('/some-path/formular-regular.woff2') format("woff2");
font-weight: 400;
font-style: normal;
font-display: block;
}
The problem is that these files are not in the project, they are on cdn in the same host. So I want to point this path without resolving it. How I can do it without ejecting create-react app?
Related
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');
}
#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>
I am working on the vue component, which has applied scss for styling.
<style scoped lang="scss">
:root {
--c-text-primary: #282a32;
--c-background-secondary: #fdfcff;
}
body {
line-height: 1.5;
min-height: 100vh;
font-family: "Be Vietnam Pro", sans-serif;
background-color: var(--c-background-secondary);
color: var(--c-text-primary);
}
</style>
however it doesn't work out, any idea how to make it work?
Do you have sass dependencies installed?
I have the dependencies:
sass
sass-loader
and it works fine for me
I have to make some changes on the ui. Now I try to replace the built-in sensenet logo, but I am stucked. I tried to change /Root/Global/images/sensenetlogo.png but there is no option to replace it.
The logo is defined in a css file (/Root/Skins/sensenet/styles/skin.css)
Search for this part:
.sn-layout-inter-index .sn-slogen {
position: absolute;
left: 5px;
top: 13px;
font-size: 16px;
color: #fff;
font-weight: normal;
background: url(/Root/Global/images/sensenetlogo.png) no-repeat;
padding-left: 150px;
padding-top: 10px;
padding-bottom: 10px;
}
and change the background-image url. This will will replace the logo on the homepage.
Replacing the logo on other subpages change the logo url the same way at
.sn-layout-intra .sn-layout-head .sn-logo, .sn-layout-inter .sn-layout-head .sn-logo, .sn-layout1 .sn-layout-head .sn-logo {
...
}
If you installed sensenet from source make sure that you changed the .css file both in the file system and through sensenet's admin surface (Content Explorer).
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).