Develop Reference

Nuxt.js: Problem with css-loader which strips quotes from font-family

I have the following problem: I built a nuxt.js vue app, which uses a google font.
I load it in the head (by adding the url to the head section of my nuxt.config.js) https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700
I then use a sass-variable:
$s-font-family-base: 'Playfair Display', serif;
Which I use throughout my stylings to display this font.
Now when I check my browsers inspector while running a dev server, everything looks alright:
But if I use yarn generate (nuxt generate respectively) this will result in a font-family property with stripped quotes. Also if I push production to live.
Of course this is not nice, leads to invalid CSS, and maybe results in font loading failure...
Now I assume this is linked to nuxts css-loader:
https://github.com/webpack-contrib/css-loader
But I am not fully sure if I should open an issue there.
(I started to create a minimal nuxt repo to reproduce, but then I experienced a bug within the getting started guide: https://cmty.app/nuxt/nuxt.js/issues/c9213) 🙈🙈🙈
Anyway, in the meantime I just wanted to reach out for some pointers on this topic.
Cheers and thanks for any help.

This solved me.
cssnano option
https://cssnano.co/optimisations/minifyfontvalues/
before
.box {
font-family: "Helvetica Neue", Arial, Arial, sans-serif;
}
after
.box {
font-family: Helvetica Neue, Arial, sans-serif;
}
your nuxt.config
build: {
postcss: {
plugins: {
cssnano: {
preset: ['default', {minifyFontValues: {removeQuotes: false}}]
}
}
}
},

How to change font style in App?

I am currently developing an app using VS 2012 in HTML/JavaScript Platform. Now, I need to know how to change the font style of the App?

For a Windows Store app written using HTML/Javascript, you can set the global font family / style / weight in the file /css/default.css by setting a property in the #contenthost declaration.
for example...
#contenthost {
height: 100%;
width: 100%;
font-family: 'Copperplate Gothic Light';
font-weight: bold;
font-style: oblique;
}
would set your global UI font to Copperplate Gothic Light in bold with a style of oblique.
NOTE : I normally use XAML/C# so this may not be the best way to achieve this behaviour, but it does work.

See -
Embed / use custom font in Windows 8 Store apps

How do I create fonts with javascript, and how portable is this?

I read that Adobe has released some free web fonts
The instructions say you need to import a script like this:
<script src="http://use.edgefonts.net/FOO.js"></script>
then you will be able to write CSS like this:
#foo {font-family: FOO, serif;}
What new sourcery is this?!?
What is this trick called, and what is the browser support like?

Let me introduce you to some CSS:
#font-face {
font-family: 'Foo';
font-weight: normal;
font-style: normal;
src: url("foo.eot");
src: url("foo.woff") format("woff"), url("foo.ttf") format("truetype"), url("foo.svg#foo") format("svg");
}
p {
font-family: Foo, sans-serif;
}
#font-face defines a web font and gives it some sources to try depending on what browser you're using. the font-family property tells it what you want to call it later on.
Here's the MDN Documentation for #font-face

Wingdings font in FF and Chrome

I would like to use font Wingdings in my app,
it is working well in IE, but in FF and Chrome instead of chars I see a latter.
How to use this font in FF in correct way ?
.changehistorybtn {
cursor: pointer;
color: hsl(215, 47%, 57%);
font-family: Wingdings 3;
}

Try this:
font-family: "Wingdings 3";

Replace text with an image if font not available

I have a web page which uses a non-web-safe font (#font-face...) for a header.
This is going to look pretty bad if the viewer's browser does not support this, so is there a way to detect this capability and replace the text with an image if it is not supported?
#font-face {
font-family: 'awesomefont';
src: url('fonts/awesomefont-webfont.eot');
src: url('fonts/awesomefont-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/awesomefont-webfont.woff') format('woff'),
url('fonts/awesomefont-webfont.ttf') format('truetype'),
url('fonts/awesomefont-webfont.svg#awesomefont') format('svg');
font-weight: normal;
font-style: normal;
}
h1 {
font-family: 'awesomefont'; /* Substitute with image if font not supported */
}
p {
font-family: 'awesomefont', Arial, sans-serif; /* main body text can use alternative font */
}

#font-face {
font-family: 'Nosifer Caps';
font-style: normal;
font-weight: 400;
src: local('Nosifer Caps Regular'), local('NosiferCaps-Regular'), url('http://themes.googleusercontent.com/static/fonts/nosifercaps/v1/5Vh3eVJZ2pCbwAqfFmh1F3hCUOGz7vYGh680lGh-uXM.woff') format('woff');
}
p {
font-family: 'Nosifer Caps', cursive; // is this not the point of defining a websafe font after your non-websafe-font????
}
or do you want to ALWAYS have said font for your header.. in which case I wouldn't even go through the hassle of dealing with custom fonts. Just create your image and use that 100% of the time. The overhead of loading an entire font lib for one header image is just silly.

I'm not sure if there is a way to do what you're asking. But I generally use cufon for using custom fonts on my websites. It uses canvas to create an image from the text. If a browser does not support javascript, it simply displays the raw text
http://cufon.shoqolate.com/generate/

One option is to use one of the JS libraries which measure the width of the string to detect if the font is available. Unfortunately, functionality is not available in JS to do what you want directly.
Here are some implementations which use the string measurement technique:
http://derek1906.site50.net/works/jfont.php
http://www.lalit.org/lab/javascript-css-font-detect/