Suppose I have the following #font-face rule(s) and I want to put them as a CSSObject instead of a flat string.
#font-face {
font-family: 'Blah';
font-weight: 400;
font-style: normal;
src:
url('./Blah-Normal.woff2') format('woff2'),
url('./Blah-Normal.woff') format('woff');
}
#font-face {
font-family: 'Blah';
font-weight: 700;
font-style: bold;
src:
url('./Blah-Bold.woff2') format('woff2'),
url('./Blah-Bold.woff') format('woff');
}
...
How can I define it as a CSSObject? I'm trying to pass it over to Mui's MuiCssBaseline and it takes a CSSObject or string. I'd like to pass a CSSObject so that I could add more CSS styling on it more easily and easier to read. But right now it is just a flat string containing only the #font-face definitions.
// import { CSSObject } from '#mui/material';
// import { CSSObject } from '#emotion/styled';
import { CSSObject } from 'styled-components';
const BlahCSSObject = {
'#font-face': {
// magic?
src: [
// it definitely don't like the following format
url('./Blah-Bold.woff2') format('woff2'),
url('./Blah-Bold.woff') format('woff')
]
},
'#font-face': { // would cause dupe keys no?
...
},
...
} as CSSObject;
Thanks!
I think you can use css method from styled-components.
import { css } from 'styled-components'
const myOwnStyle = css`
#font-face {
// styles
}
`
In main.scss I load local fonts from assets/styles/fonts folder:
#font-face {
font-family: 'Opensans-Bold';
font-style: normal;
src: local('Opensans-Bold'), url(./fonts/OpenSans-Bold.ttf) format('truetype');
}
#font-face {
font-family: 'Opensans-Light';
font-style: normal;
src: local('Opensans-Light'), url(./fonts/OpenSans-Light.ttf) format('truetype');
}
then in vite.config I load main.scss:
css: {
preprocessorOptions: {
scss: {
additionalData: `#import "#/assets/styles/main.scss";`
}
}
},
but all css from main.scss is applied except fonts, I get error:
downloadable font: download failed (font-family: "Opensans-Bold" style:normal weight:400 stretch:100 src index:1): status=2152398850 source: http://localhost:3000/fonts/OpenSans-Bold.ttf
Am I on right track or I need some other approach (similar works with Vue-CLI)?
That was the right way, the solution is the relative path so:
src: local('Opensans-Bold'), url(#/assets/styles/fonts/OpenSans-Bold.ttf) format('truetype');
and setting alias in vite.config.js :
resolve: {
alias: {
'#': path.resolve(__dirname, 'src'),
}
}
I was able to make this work by simply put the fonts on a public folder on root.
like:
public/.**.ttf
src/
I am using font-face in index.css and accessing these font-family in other places of my application.
My requirement is to assign each of these font-face to different variables. And use these variables in my applications. I want to name these variables generically as 'regular', 'medium' because if I change it from OpenSans to other font-family I need not change font-family as OpenSans to other in other parts of my application.
I am using styled-components for stylings .
#font-face{
font-family: 'OpenSans';
font-style: normal;
font-weight: 400;
src: url(./assets/Fonts/OpenSans-Regular.ttf)
}
#font-face{
font-family:'OpenSans-SemiBold';
font-style: normal;
font-weight: 400;
src:url(./assets/Fonts/OpenSans-SemiBold.ttf)
}
#font-face{
font-family:'OpenSans-SemiBoldItalic';
font-style: normal;
font-weight: 400;
src:url(./assets/Fonts/OpenSans-SemiBoldItalic.ttf)
}
#font-face{
font-family: 'Proxima Nova';
font-style: normal;
font-weight: 400;
src: url(./assets/Fonts/ProximaNova-Regular.ttf);
}
#font-face{
font-family: 'Proxima Nova Medium';
font-style: normal;
font-weight: 400;
src: url(./assets/Fonts/proxima-nova-medium.ttf);
}
Also, once these font-faces are assigned to different variables how can I access in styled-components of other components
eg:
const p = styled.p`
font-family: ??? --> is it using ${variable_name} ?
`
my requirement in index.css :
var Medium-font = {
#font-face{
font-family: 'Proxima Nova Medium';
font-style: normal;
font-weight: 400;
src: url(./assets/Fonts/proxima-nova-medium.ttf);
}
};
var Regulat-font = {
#font-face{
font-family: 'Proxima Nova';
font-style: normal;
font-weight: 400;
src: url(./assets/Fonts/ProximaNova-Regular.ttf);
}
};
and so on..
You don't need to assign the whole font-face to a variable. Fonts are NOT something that you change often. But even if you do for some reason... the font-face will still need to be changed like url and the name of the font itself in the index.css but the only change in actual css will be the font-family property.
You can just assign the font-family to a variable in styled-components and then use it everywhere. This way you'll only need to change it in one place in your theme.
You can use ThemeProvider to achieve this.
// Some component
const Para = styled.p`
font-family: ${props => props.theme.fontFamily1};
`;
const Para2 = styled.p`
font-family: ${props => props.theme.fontFamily2};
`;
// Define what props.theme will look like
const theme = {
fontFamily1: "OpenSans",
fontFamily2: " Proxima Nova"
};
//render method of App.jsx or root app file
render(
<div>
<ThemeProvider theme={theme}>
<Para>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Para>
<Para2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Para2>
</ThemeProvider>
</div>
);
<Para> compoent will now have the font OpenSans and <Para2> Proxima Nova.
If you decide to change the font, just change the fontFamily1/fontFamily2 prop in theme accordingly and it'll reflect in all the components using the theme.
Refer this for more info: https://styled-components.com/docs/advanced#theming
Hope this helps !
I've read a lot of posts and make my font-face code same as in other answers and it's still not working...
#font-face {
font-family: 'KlavikaLT';
src: url('Klavika-Light.otf') format('opentype');
}
#font-face {
font-family: 'KlavikaLTit';
src: url('Klavika-LightItalic.otf') format('opentype');
}
#font-face {
font-family: 'KlavikaBD';
src: url('Klavika-Bold.otf') format('opentype');
}
#font-face {
font-family: 'KlavikaBDit';
src: url('Klavika-BoldItalic.otf') format('opentype');
}
#font-face {
font-family: 'KlavikaRG';
src: url('Klavika-Regular.otf') format('opentype');
}
.footerleft
{
font-family: KlavikaLT;
}
.footerright
{
font-family: KlavikaBDit;
}
This is my example code that I use. Fonts are in the same folder as stylesheet file. Where do I make a mistake?
EDIT 1
It's funny because it's working on my localhost and all paths are correct. Not working on my server, but I made the same as in my code on other my site and it's working there...
Use this syntax:
<style>
#font-face {
font-family: 'KlavikaLT';
src: url('KlavikaLT.eot');
src: url('KlavikaLT.eot?#iefix') format('embedded-opentype'),
url('KlavikaLT.woff') format('woff'),
url('KlavikaLT.ttf') format('truetype'),
url('KlavikaLT.svg#KlavikaLT') format('svg');
font-weight: normal;
font-style: normal;
}
body { font-family: "KlavikaLT", serif; }
</style>
Make sure the file paths are correct.
This is the specification for #font-face:
#font-face {
[font-family: <family-name>;]?
[src: [ <uri> [format(<string>#)]? | <font-face-name> ]#;]?
[unicode-range: <urange>#;]?
[font-variant: <font-variant>;]?
[font-feature-settings: normal|<feature-tag-value>#;]?
[font-stretch: <font-stretch>;]?
[font-weight: <weight>];
[font-style: <style>];
}
'KlavikaLT' is not a standard font like Courier for example. Your browser has no idea what that font is unless you tell it.
You can tell the browser about your font in a couple of ways:
Post the import at the top of your css:
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
Import with HTML, above your CSS:
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
Or using JavaScript:
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Open+Sans::latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})(); </script>
Examples copied from Google Fonts.
If you're using a custom font hosted on your own server, you can use the above syntax, but replace the urls with your own. Each one should contain the #font-face, which looks like this:
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2) format('woff2');
}
Just added more extensions of font, like .ttf and .woff. Now it's working perfectly, but don't know why .otf doesn't work at all. Cheers!
#font-face
{
font-family: KlavikaLT;
src: url('fonts/KlavikaLT.otf') format('opentype'),
url('fonts/KlavikaLT.ttf') format('truetype'),
url('fonts/KlavikaLT.woff') format('woff');
}
I have the following CSS - how would I describe it in SASS? I've tried reverse compiling it with css2sass, and just keep getting errors.... is it my CSS (which works ;-) )?
#font-face {
font-family: 'bingo';
src: url("bingo.eot");
src: local('bingo'),
url("bingo.svg#bingo") format('svg'),
url("bingo.otf") format('opentype');
}
In case anyone was wondering - it was probably my css...
#font-face
font-family: "bingo"
src: url('bingo.eot')
src: local('bingo')
src: url('bingo.svg#bingo') format('svg')
src: url('bingo.otf') format('opentype')
will render as
#font-face {
font-family: "bingo";
src: url('bingo.eot');
src: local('bingo');
src: url('bingo.svg#bingo') format('svg');
src: url('bingo.otf') format('opentype'); }
which seems to be close enough... just need to check the SVG rendering
I’ve been struggling with this for a while now. Dycey’s solution is correct in that specifying the src multiple times outputs the same thing in your css file. However, this seems to break in OSX Firefox 23 (probably other versions too, but I don’t have time to test).
The cross-browser #font-face solution from Font Squirrel looks like this:
#font-face {
font-family: 'fontname';
src: url('fontname.eot');
src: url('fontname.eot?#iefix') format('embedded-opentype'),
url('fontname.woff') format('woff'),
url('fontname.ttf') format('truetype'),
url('fontname.svg#fontname') format('svg');
font-weight: normal;
font-style: normal;
}
To produce the src property with the comma-separated values, you need to write all of the values on one line, since line-breaks are not supported in Sass. To produce the above declaration, you would write the following Sass:
#font-face
font-family: 'fontname'
src: url('fontname.eot')
src: url('fontname.eot?#iefix') format('embedded-opentype'), url('fontname.woff') format('woff'), url('fontname.ttf') format('truetype'), url('fontname.svg#fontname') format('svg')
font-weight: normal
font-style: normal
I think it seems silly to write out the path a bunch of times, and I don’t like overly long lines in my code, so I worked around it by writing this mixin:
=font-face($family, $path, $svg, $weight: normal, $style: normal)
#font-face
font-family: $family
src: url('#{$path}.eot')
src: url('#{$path}.eot?#iefix') format('embedded-opentype'), url('#{$path}.woff') format('woff'), url('#{$path}.ttf') format('truetype'), url('#{$path}.svg##{$svg}') format('svg')
font-weight: $weight
font-style: $style
Usage: For example, I can use the previous mixin to setup up the Frutiger Light font like this:
+font-face('frutigerlight', '../fonts/frutilig-webfont', 'frutigerlight')
For those looking for an SCSS mixin instead, including woff2, SASS list.append is useful for conditionally adding source files/formats:
#mixin fface(
$path,
$family,
$type: "",
$weight: 400,
$style: normal,
$local1: null,
$local2: null,
$ttf: null,
$otf: null,
$eot: null,
$svg: null
) {
$src: null; // initialize an empty source path
// only load local files when both sources are present
#if $local1 and $local2 {
$src: append($src, local("#{$local1}"), comma);
$src: append($src, local("#{$local2}"), comma);
}
#if $otf {
$src: append($src, url("#{$path}#{$type}.otf") format("opentype"), comma);
}
// load default formats (woff and woff2)
$src: append($src, url("#{$path}#{$type}.woff2") format("woff2"), comma);
$src: append($src, url("#{$path}#{$type}.woff") format("woff"), comma);
// formats that should only be added at the end
#if $ttf {
$src: append($src, url("#{$path}#{$type}.ttf") format("truetype"), comma);
}
#if $svg {
$src: append($src, url("#{$path}#{$type}.svg##{$svg}") format("svg"), comma);
}
// the actual FONT FACE DECLARATION
#font-face {
font-family: $family;
// for compatibility reasons EOT comes first and is not appended
#if $eot {
src: url("#{$path}#{$type}.eot");
}
// load appended sources path
src: $src;
font-weight: $weight;
font-style: $style;
}
}
// USAGE
$dir: "assets/fonts/";
// declare family name
$familyName: "MyFont";
#include fface(
"#{$dir}#{$familyName}", $familyName, "-regular", 400, "normal",
"#{$familyName} Regular", "#{$familyName}-Regular", "ttf", "otf"
);
#include fface(
"#{$dir}#{$familyName}", $familyName, "-medium", 500, "normal",
"#{$familyName} Medium", "#{$familyName}-Medium", "ttf", "otf"
);
#include fface(
"#{$dir}#{$familyName}", $familyName, "-semibold", 600, "normal",
"#{$familyName} SemiBold", "#{$familyName}-SemiBold", "ttf", "otf"
);
// Material Icons
$familyName: "Material Icons"; // override previous value
$familyFileName: "MaterialIcons";
#include fface(
"#{$dir}#{$familyFileName}", $familyName, "-regular", 400, "normal",
$familyName, "#{$familyFileName}-Regular", "ttf", null, "eot"
);
#include fface(
"#{$dir}#{$familyFileName}", "#{$familyName} Outline", "-outline", 400, "normal",
"#{$familyName} Outline", "#{$familyFileName}-Outline", null, "otf", "eot"
);
.material-icons {
font-family: $familyName;
}
.material-icons-outline {
font-family: "#{$familyName} Outline";
}
The $type parameter is used for locating different files within a $family.
If you get a can't resolve error, remember to double check your fonts directory ($dir).
In my case I use SASS Mixin:
#mixin font-face($family, $file, $path, $svg, $weight: normal, $style: normal)
#font-face
font-family: $family
src: url($path + $file + '.eot')
src: url($path + $file + '.eot?#iefix') format('embedded-opentype'), url($path + $file + '.woff') format('woff'), url($path + $file + '.ttf') format('truetype'), url($path + $file + '.svg##{$svg}') format('svg')
font-weight: $weight
font-style: $style
Usage:
#include font-face('altivo', 'altivo-regular', '', 'altivo-regular')
#include font-face('altivo', 'altivo-medium', '', 'altivo-medium', 500, normal)
#include font-face('altivo', 'altivo-bold', '', 'altivo-bold', 700, normal)
#include font-face('corsa', 'corsa-grotesk-regular', '', 'corsa-grotesk-regular')
#include font-face('corsa', 'corsa-grotesk-medium', '', 'corsa-grotesk-medium', 500, normal)
#include font-face('corsa', 'corsa-grotesk-bold', '', 'corsa-grotesk-bold', 700, normal)
#include font-face('corsa', 'corsa-grotesk-xbold', '', 'corsa-grotesk-xbold', 800, normal)
Result:
#font-face {
font-family: "altivo";
src: url("altivo-regular.eot");
src: url("altivo-regular.eot?#iefix") format("embedded-opentype"), url("altivo-regular.woff") format("woff"), url("altivo-regular.ttf") format("truetype"), url("altivo-regular.svg#altivo-regular") format("svg");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "altivo";
src: url("altivo-medium.eot");
src: url("altivo-medium.eot?#iefix") format("embedded-opentype"), url("altivo-medium.woff") format("woff"), url("altivo-medium.ttf") format("truetype"), url("altivo-medium.svg#altivo-medium") format("svg");
font-weight: 500;
font-style: normal;
}
#font-face {
font-family: "altivo";
src: url("altivo-bold.eot");
src: url("altivo-bold.eot?#iefix") format("embedded-opentype"), url("altivo-bold.woff") format("woff"), url("altivo-bold.ttf") format("truetype"), url("altivo-bold.svg#altivo-bold") format("svg");
font-weight: 700;
font-style: normal;
}
#font-face {
font-family: "corsa";
src: url("corsa-grotesk-regular.eot");
src: url("corsa-grotesk-regular.eot?#iefix") format("embedded-opentype"), url("corsa-grotesk-regular.woff") format("woff"), url("corsa-grotesk-regular.ttf") format("truetype"), url("corsa-grotesk-regular.svg#corsa-grotesk-regular") format("svg");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "corsa";
src: url("corsa-grotesk-medium.eot");
src: url("corsa-grotesk-medium.eot?#iefix") format("embedded-opentype"), url("corsa-grotesk-medium.woff") format("woff"), url("corsa-grotesk-medium.ttf") format("truetype"), url("corsa-grotesk-medium.svg#corsa-grotesk-medium") format("svg");
font-weight: 500;
font-style: normal;
}
#font-face {
font-family: "corsa";
src: url("corsa-grotesk-bold.eot");
src: url("corsa-grotesk-bold.eot?#iefix") format("embedded-opentype"), url("corsa-grotesk-bold.woff") format("woff"), url("corsa-grotesk-bold.ttf") format("truetype"), url("corsa-grotesk-bold.svg#corsa-grotesk-bold") format("svg");
font-weight: 700;
font-style: normal;
}
#font-face {
font-family: "corsa";
src: url("corsa-grotesk-xbold.eot");
src: url("corsa-grotesk-xbold.eot?#iefix") format("embedded-opentype"), url("corsa-grotesk-xbold.woff") format("woff"), url("corsa-grotesk-xbold.ttf") format("truetype"), url("corsa-grotesk-xbold.svg#corsa-grotesk-xbold") format("svg");
font-weight: 800;
font-style: normal;
}