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.
Related
I am having trouble in loading fonts from local and I am pointing to the directory. Can someone help me with it ?
Here is my code
#font-face {
font-family: 'My font';
src: url('./fonts/Myfonts-webfont.eot');
src: url('./fonts/Myfonts-webfont.eot?#iefix') format('embedded-opentype'),
url('./fonts/Myfonts-webfont.woff') format('woff'),
url('./fonts/Myfonts-webfont.ttf') format('truetype'),
url('./fonts/Myfonts-webfont.svg#my_fonts_otbook') format('svg');
font-weight: normal;
font-style: normal;
}
and using it as
.btn {
font-family: 'My font', sans-serif;
max-width: 100%;
width: 20%;
height: 8%;
}
I suggest having a look at this
Also depending where you have them stored i.e. assets/fonts you must be pointing towards the directory.
font-face syntax
Example
#font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot');
src: local('☺︎'),
url("GraublauWeb.woff") format("woff"),
url("GraublauWeb.otf") format("opentype"),
url("GraublauWeb.svg#grablau") format("svg");
}
I tried different things and finally able to find the issue. its the storybook web-pack config causing the issue. Instead of pushing module.rules to storybook default webpack config I overwrote rules and it worked.
Have you use webpack file-loader to load a path, you dont have to specify where you font files reside. As long as you include your font files inside src/assets/fonts, file-loader will find it for you.
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
If I set the font-family to Verdana-Bold, it doesn't work in FF (version 18) but Chrome (version 24) is fine.
If I change the font-family to Verdana, it works in both browsers.
Similarly, CourierNewPS-BoldMT, doesn't work, but Courier does.
Does anyone know of a generic solution to solve this? like a JS or a CSS technique that could convert the fonts specific to the browser?
http://jsfiddle.net/skUxK/4/
Here's the description of the use case:
I have a HTML5 app, that also has a equivalent windows desktop version, a mac app and a iOS and android app.
All these apps can make changes to a text, and then store those in a XML file.This file can be then be loaded any app.
If you just want to use the bold version of a font, use the font-weight property.
font-family: verdana;
font-weight: bold;
Use #font-face so that every single browser can display the exact same font.
For more information: http://www.css3.info/preview/web-fonts-with-font-face/
#font-face {
font-family: MyFont;
src: url('mybeautifulfont.otf');
}
body{
font-family: 'MyFont', 'Verdana-Bold', 'Verdana';
}
If you only just want bold text, then:
body{
font-family: 'Verdana-Bold', 'Verdana';
font-weight: bold;
}
As far as I can tell, bolded Verdana displays fine on Firefox.
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
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/