I have a Next.js project that uses styled-components, variables.less imported in global.less and theme object that is available globally for all components.
theme.ts fonts vars
font: {
weight: { regular: 350 },
family: {
bold: 'var(--bold-font)',
medium: 'var(--medium-font)',
light: 'var(--light-font)',
book: 'var(--book-font)',
roboto: 'Roboto, sans-serif',
},
},
variables.less
#bold-font: 'GothamRounded, Bold', Arial, sans-serif;
#medium-font: 'GothamRounded, Medium', Arial, sans-serif;
#light-font: 'GothamRounded, Light', Arial, sans-serif;
#book-font: 'GothamRounded, Book', Arial, sans-serif;
styled component
font-family: ${({ theme }) => theme.font.family.book};
the problem is that some variables work some dont, and I cannot figure out the pattern to solve the problem. The variable can be undefined randomly, #white: #fff works but #asd: #fff does not. Am I doing something wrong?
I have a simple Next.js app that I am developing on macOS (chrome) and have only noticed something is wrong when testing on Windows (chrome, and others too).
I use the font Inter from Google Fonts, nextjs + tailwind takes care of injecting needed css in <head>:
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet" />
which after build translates to:
<style data-href="https://fonts.googleapis.com/css2?family=Inter&display=swap">
#font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v7/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfMZs.woff) format('woff')}#font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v7/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZJhjp-Ek-_EeAmM.woff) format('woff');unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}#font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v7/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZthjp-Ek-_EeAmM.woff) format('woff');unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}#font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v7/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZNhjp-Ek-_EeAmM.woff) format('woff');unicode-range:U+1F00-1FFF}#font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v7/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZxhjp-Ek-_EeAmM.woff) format('woff');unicode-range:U+0370-03FF}#font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v7/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZBhjp-Ek-_EeAmM.woff) format('woff');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB}#font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v7/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZFhjp-Ek-_EeAmM.woff) format('woff');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}#font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v7/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hjp-Ek-_EeA.woff) format('woff');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}
</style>
and tailwind config:
theme: {
extend: {
fontFamily: {
sans: ['Inter var', ...defaultTheme.fontFamily.sans],
},
},
},
which then after build, in browsers sets following declaration to <html> tag:
font-family:
Inter var,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji
The "Inter var" works perfectly on macOS browsers, doesn't work on Windows - it falls back to next option. When I change it to "Inter" only, it works on Windows too, but obviously, the variable font stuff is gone and everything is too thin. Rather than changing all CSS to reflect to this, why does the variable font not work on Windows? I already spend about a whole day on this and other SO posts didn't seem to work for me. Am I doing something wrong?
Update: google font API might return static font files
Due to user-agent detection, you might get static rules in some browsers – even though they support variable fonts flawlessly (e.g. chromium/blink based Opera browser). Firefox or Chrome should work perfectly.
Use the '..' range delimiter and open the css URL in firefox
https://fonts.googleapis.com/css2?family=Inter:wght#100..900
The desired variable #font-face rules should look like this:
#font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2) format('woff2');
}
Note the font-weight: 100 900 property using two values to specify a weight range – Bingo! we got the correct variable font css.
Example1: retrieve #font-face via API css URL
let fontWeight = document.querySelector('#fontWeight');
let fontVariation = document.querySelector('#fontVariation');
let fontSamples = document.querySelectorAll('.fontSample');
fontWeight.addEventListener('change', function(e){
let value = e.target.value;
fontSamples.forEach(function(item, i){
fontSamples[i].setAttribute('style', 'font-weight:'+value);
} )
} );
fontVariation.addEventListener('change', function(e){
let value = e.target.value;
fontSamples.forEach(function(item, i){
fontSamples[i].setAttribute('style', 'font-variation-settings: \'wght\' '+value);
} )
} )
body{
font-family: georgia
}
#font-face {
src: url('https://mdn.github.io/css-examples/variable-fonts/fonts/AmstelvarAlpha-VF.woff2') format('woff2-variations');
font-family:'Amstelvar';
font-style: normal;
}
.amstelvar{
font-family: 'Amstelvar', serif;
}
.inter{
font-family: 'Inter', 'Open Sans', sans-serif;
}
h1{
font-weight: 500;
transition: 0.3s;
}
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#100..900&display=swap" rel="stylesheet">
<h1 class="fontSample inter">Hamburglefonstiv (Inter)</h1>
<h1 class="fontSample amstelvar">Hamburglefonstiv (Amstelvar)</h1>
<p>
<label>Font weight</label>
<input id="fontWeight" type="range" min="100" max="900" step="1">
</p>
<p>
<label>font-variation-settings</label>
<input id="fontVariation" type="range" min="100" max="900" step="1">
</p>
As mentioned before, this won't work in Opera (and maybe other browsers). So the above css URL
https://fonts.googleapis.com/css2?family=Inter:wght#100..900
will return the same result as:
https://fonts.googleapis.com/css2?family=Inter:wght#100;200;300;400;500;600;700;800;900
containing rules for each font-weight.
Example 2: workaround for Opera #font-face
We can copy the correct variable font-face rule to our css.
let fontWeight = document.querySelector('#fontWeight');
let fontVariation = document.querySelector('#fontVariation');
let fontSamples = document.querySelectorAll('.fontSample');
fontWeight.addEventListener('change', function(e) {
let value = e.target.value;
fontSamples.forEach(function(item, i) {
fontSamples[i].setAttribute('style', 'font-weight:' + value);
})
});
fontVariation.addEventListener('change', function(e) {
let value = e.target.value;
fontSamples.forEach(function(item, i) {
fontSamples[i].setAttribute('style', 'font-variation-settings: \'wght\' ' + value);
})
})
body {
font-family: georgia
}
#font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2) format('woff2');
}
#font-face {
src: url('https://mdn.github.io/css-examples/variable-fonts/fonts/AmstelvarAlpha-VF.woff2') format('woff2-variations');
font-family: 'Amstelvar';
font-style: normal;
}
.amstelvar {
font-family: 'Amstelvar', serif;
}
.inter {
font-family: 'Inter', 'Open Sans', sans-serif;
}
h1 {
font-weight: 500;
transition: 0.3s;
}
<h1 class="fontSample inter">Hamburglefonstiv (Inter)</h1>
<h1 class="fontSample amstelvar">Hamburglefonstiv (Amstelvar)</h1>
<p>
<label>Font weight</label>
<input id="fontWeight" type="range" min="100" max="900" step="1">
</p>
<p>
<label>font-variation-settings</label>
<input id="fontVariation" type="range" min="100" max="900" step="1">
</p>
Since the font-family name is defined just as "Inter" (without "var") in the retrieved #font-face declaration you should also refer to it using this name:
theme: {
extend: {
fontFamily: {
sans: ['Inter', ...defaultTheme.fontFamily.sans],
},
},
},
google font UI
Theres is currently no intuitive way to retrieve the correct parameters since the the UI is more focused on static file output.
Selecting multiple styles in the UI will create a static css URL like:
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
Seemless weight interpolation won't work with these files.
To retrieve all supported design axis (e.g Inter supports weight and slant) you can use the "type tester" tab.
Still not perfect. So you're better off concatenating the URL query parameters manually:
https://fonts.googleapis.com/css2?family= +
Inter +
: + slnt + , + wght (design axis names)+
# + -10..0 + , + 100..900 (design axis range values)
Example 3: Inter slant+weight
let fontWeight = document.querySelector('#fontWeight');
let fontVariation = document.querySelector('#fontVariation');
let fontSamples = document.querySelectorAll('.fontSample');
fontWeight.addEventListener('change', function(e) {
let value = e.target.value;
fontSamples.forEach(function(item, i) {
fontSamples[i].setAttribute('style', 'font-weight:' + value);
})
});
fontVariation.addEventListener('change', function(e) {
let value = e.target.value;
fontSamples.forEach(function(item, i) {
fontSamples[i].setAttribute('style', 'font-variation-settings: \'slnt\' ' + value);
})
})
/* latin */
#font-face {
font-family: "Inter";
font-style: oblique 0deg 10deg;
font-weight: 100 900;
src: url(https://fonts.gstatic.com/s/inter/v12/UcCo3FwrK3iLTcviYwY.woff2) format("woff2");
}
body {
font-family: Inter;
}
.inter {
font-family: "Inter", "Open Sans", sans-serif;
}
h1 {
font-weight: 500;
transition: 0.3s;
}
<h1 class="fontSample inter">Hamburglefonstiv (Inter)</h1>
<p>
<label>Font weight</label>
<input id="fontWeight" type="range" min="100" max="900" step="1">
</p>
<p>
<label>font-slant</label>
<input id="fontVariation" type="range" min="-10" max="0" step="1" value="0">
</p>
Worth noting:
You can also style your text via font-variation-settings property.
To change the boldness we would use:
.black{
font-variation-settings: wght 900
}
See also css-tricks.com: Getting the Most Out of Variable Fonts on Google Fonts
You can download the ttf file of the font and just include the file in css.
#font-face{
font-family: rocksalt;
src: url('../font/RockSalt-Regular.ttf');
}
here RockSalt is a downloaded font from google fonts and imported to folder named font and use keyword "rocksalt" to add it.
Using the icomoon internet service to create custom icon-fonts, having trouble to make them visible on Leaflet map. Somehow I can not fetch the icons, what have I missed!? I have the data on the map as I can open up the popup, the problem is there is no icons visible....
I have the fonts folder in the correct place and stylesheet is loaded
This is part of the CSS from icomoon I have in a custom-style.css
#font-face {
font-family: 'icomoon';
src: url('myplace/customer/fonts/icomoon.eot?bf4cat');
src: url('myplace/customer/fonts/icomoon.eot?bf4cat#iefix') format('embedded-opentype'),
url('myplace/customer/fonts/icomoon.ttf?bf4cat') format('truetype'),
url('myplace/customer/fonts/icomoon.woff?bf4cat') format('woff'),
url('myplace/customer/fonts/icomoon.svg?bf4cat#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: never;
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-bb .path1:before {
content: "\e900";
color: rgb(35, 31, 32);
}
.icon-bb .path2:before {
content: "\e901";
margin-left: -1em;
color: rgb(0, 0, 0);
}
.icon-bb .path3:before {
content: "\e902";
margin-left: -1em;
color: rgb(0, 0, 0);
} etc....
Then I created a function to look for customer name and give them a className
function getCustomer(x){
x === 'customerBB' ? 'icon- icon-bb' :
x === 'customerCA' ? 'icon- icon-ca' :
x === 'customerCE' ? 'icon- icon-ce' :
'leaflet-div-icon'; //default blue icon if no match
Then a function to return className depending on the results found in feature.properties.customer_name
var setDivIcon = function(feature){
return {
className: getCustomer(feature.properties.customer_name)
};
}
var customerIcon = L.divIcon(setDivIcon);
Later on I use the pointToLayer to add the GeoJSON to the map
customerLayer = L.geoJson(json, {
pointToLayer: function(feature, latlng) {
var time = feature.properties.timeMean_numb;
var point
if (time < 0.167){
point = L.marker(latlng, {icon: L.divIcon(setDivIcon(feature)) }).addTo(time_1);
}
else if (time >= 0.167 && time <= 0.334){
point = L.marker(latlng, {icon: L.divIcon(setDivIcon(feature)) }).addTo(time_2);
}
In your fontface rule you are missing some src:? This could explain them not being fetched
I'm trying to use italic styling in react-pdf.
Everything works well until I use font-style: italic;.
Is there another way style text as Italic in react-pdf ?
const Italic = styled.Text`
font-size: 12px;
lineheight: 20px;
text-align: left;
font-family: "Roboto Condensed";
letter-spacing: 0.5px;
font-style: italic;//problem is with this line
font-weight:400;
`;
It is giving me the error:
Uncaught (in promise) Error: Could not resolve font for undefined, fontWeight 400
When you register your fonts, you need to make sure to include a variant for each fontStyle you wish to use. For example:
Font.register({
family: 'Roboto',
fonts: [
{ src: '<path-to-normal-font-variant>' },
{ src: '<path-to-italic-font-variant>', fontStyle: 'italic' },
...
]
});
const Italic = styled.Text`
font-size: "12px";
lineheight: "20px";
text-align: left;
font-family: "Roboto Condensed";
letter-spacing: "0.5px";
font-style: "italic";//problem is with this line
font-weight:400;
`;
where ever you are suffixing px needs to be in either single or double quotes and font-style: value(italic) need to be in double quotes as well.
I'd like to know if it's possible to define a variable in Sass depending on if a class is set or not. I need to do some font type tests and would like to change the font-variable $basicFont dynamically based on the body class.
E.g.:
$basicFont: Arial, Helvetica, sans-serif;
body {
&.verdana {
$basicFont: Verdana, sans-serif;
}
&.tahoma {
$basicFont: Tahoma, sans-serif;
}
}
Is there a possibility to handle this in Sass?
No. What you're asking for would require Sass to have knowledge of the DOM. Sass only compiles directly to CSS, it is never sent to the browser.
With your sample code, all you're doing is overwriting $basicFont every time. In version 3.4 or later, your variable will only exist within the scope of the block where it was set.
So, your only real options are to make use of mixins or extends.
Extend
This is effective, but is only suitable for very simple cases.
%font-family {
&.one {
font-family: Verdana, sans-serif;
}
&.two {
font-family: Tahoma, sans-serif;
}
}
.foo {
#extend %font-family;
}
Output:
.one.foo {
font-family: Verdana, sans-serif;
}
.two.foo {
font-family: Tahoma, sans-serif;
}
Mixin
This is the method I would recommend if you want a little more fine grained control over which variables are used where.
$global-themes:
( '.one': ('font-family': (Verdana, sans-serif), 'color': red)
, '.two': ('font-family': (Tahoma, sans-serif), 'color': blue)
);
$current-theme: null; // don't touch, this is only used by the themer mixin
#mixin themer($themes: $global-themes) {
#each $selector, $theme in $themes {
$current-theme: $theme !global;
&#{$selector} {
#content;
}
}
}
#function theme-value($property, $theme: $current-theme) {
#return map-get($theme, $property);
}
.foo {
#include themer {
font-family: theme-value('font-family');
a {
color: theme-value('color');
}
}
}
Output:
.foo.one {
font-family: Verdana, sans-serif;
}
.foo.one a {
color: red;
}
.foo.two {
font-family: Tahoma, sans-serif;
}
.foo.two a {
color: blue;
}