Develop Reference

custom fonts are not displaying in the site

I have custom fonts which I would like to import via css using webpack.
css:
#font-face {
font-family: 'SBonusDisplay';
src: url('../../assets/fonts/SBonusDisplay-Regular.ttf')
}
h2 {
font-family: 'SBonusDisplay' !important;
font-style: normal;
font-size: 1.125rem;
}
This is part of my webpack config:
{
test: /\.(woff(2)?|ttf|eot|otf|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name]-[hash:base58:3].[ext]',
outputPath: 'fonts/'
}
}
]
}
For some reason the right font is not showing up. its completely different font. any idea what I am doing wrong?
Just u are aware I am working on a PWA Studio Magento web app, the webpack config is quite long and thats why I just paster part of it that is relevant to the loading fonts.

Are you able to please give the URL of this site? and please create a proper fontkit with https://www.fontsquirrel.com/tools/webfont-generator
hope you will get the results you want

How do I load external font to use for my site?

I'm trying to load the external font for my website but it doesn't work as I expected. I want the text to be bold and I loaded the bold version but it doesn't seem to work. I believe JsFiddle work with external font so I copied my code and put it on JsFiddle but still doesn't work.
Here's my jsfiddle
http://jsfiddle.net/noppanit/sr1eL3b0/2/
Here's how I load the font.
#font-face {
font-family:'Andale Mono MT Std Bold', 'Open Sans', 'arial', 'sans-serif';
src: url(http://www.salon87.nyc/wp-content/themes/salon87/vendor/fonts/AndaleMonoMTStd-Bold.ttf);
/* use src to point to the location of your custom font could be from your local server folder (like ./fonts/) or a remote location. */
}
section {
font-family:'Andale Mono MT Std Bold'
}
The html is kinda messy because I just copied it form the site. Not sure if I missed anything obvious.

Because browsers load different files for fonts I try and include all of the different types. Your largest issue is that the font-family needs to be the identifier for the font. You are treating it as though it should have "fall back" names, which can't be done.
#font-face {
font-family:'Andale Mono MT Std Bold';
font-weight:700;
src: url(FILE_LOCATION.eot) format('embedded-opentype');
src: url(FILE_LOCATION.eot?#iefix) format('embedded-opentype'),
url(FILE_LOCATION.woff) format('woff'),
url(FILE_LOCATION.ttf) format('truetype'),
url(FILE_LOCATION.svg#levenim) format('svg');
}
section {
font-family:'Andale Mono MT Std Bold'
}

#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
Source.

Is it possible to embed a custom font on to your site/install it on your host?

I've researched this a fair bit and the answer I've found is that there is only a limited number of web fonts available which seems a bit old fashioned to me. Would it not be possible to upload a custom font to your web host and use javascript (or something else, forgive my ignorance and noobishness) to read the custom font so when a visitor comes to your site it doesn't matter that they don't have your custom font installed it's just loaded off the site?

In your CSS :
#font-face {
font-family: cool_font;
src: url('cool_font.ttf');
}
p.custom_font{
font-family: cool_font; /* no .ttf */
}
From http://www.howtoplaza.com/how-to-use-custom-fonts-on-your-website-with-css

You can embed custom fonts using CSS.
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
body {
font-family: 'MyFontFamily', Fallback, sans-serif;
}
source: css-tricks.com

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

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/