I have a framework of html/css pages using a font-face declaration with a otf. Now I want to switch it to a common font like Verdana. How can I assign Verdana to the font-face declaration avoiding a numerous replacement of font-family declaration? In other words: How can I use the font name declarated by font-face as a font variable?
#font-face {
font-family: 'bauer-bodoni.otf';
src: url(../fonts);
Should be something like this (which is not working in this form):
#font-face {
font-family: 'Verdana', 'Arial', sans-serif;
Thank you very much in advance.
-R.
EDIT/ANSWER: I've found out on my own. The trick is not to list the fonts the way you do in a normal font declaration, separated by comma, but with a "local()" for each:
#font-face {
font-family: 'myOwnFontSet';
src: local('Verdana');
src: local('Arial');
src: local(sans-serif);
Your update is still wrong. You need the following:
#font-face {
font-family: 'myOwnFontSet';
src: local('Verdana'), local('Arial'), local(sans-serif); }
Related
I want to set a unicode range to Consolas, a monospace font installed in most browsers. Instead linking an external font file by src, I want to use the font file which is already in the browser. How should I edit the CSS below?
I have checked many sources from StackOverflow and other sites about applying Unicode range to #font-face, but could not find useful advice for this specific matter. Any help will be appreciated.
#font-face {
font-family: "Consolas";
src: browser???;
unicode-range: U+0061-0100;
}
Edit: I have tried using src: local('Consolas'); but it didn't seem to work, strangely.
You can use local(), an example:
#font-face {
font-family: 'CustomConsolas';
src: local('Consolas');
unicode-range: U+0061-0100;
}
As far as i am aware if you use the option "swap" for the property "font-display", Apple Mac uses Helvetica as fallback font and Windows Arial. Is it possible to define my own web-safe font like "Tahoma"?
Example code:
#font-face {
font-family: 'MyFancyFont';
src: local('MyFancyFont'), url(/fonts/MyFancyFont/MyFancyFont.woff2) format('woff2');
font-display: swap;
UseMyCustomFallbackFont: Tahoma
}
I believe this is done in the font-family definition, not the #font-face itself.
ex.
.my-text{
font-family: MyFancyFont, Tahoma;
}
This will show Tahoma until MyFancyFont is loaded.
You can get even more specific control if you use something like Webfont loader.
https://github.com/typekit/webfontloader
I recently started using SASS and I want to import 2 fonts, Montserrat and Open Sans. Normally in CSS, you do something along the lines of
#font-face {
font-family: 'Montserrat'
src: url('../../webfonts/Montserrat.ttf');
}
And it works just fine. If my file structure looks like the following
CSS
Base
typography.sass
Webfonts
Montserrat.ttf
But I put the following code in my SASS file.
#font-face
font-family: 'Montserrat'
src: url("../../webfonts/Montserrat.ttf")
#font-face
font-family: 'Open Sans'
src: url("../../webfonts/OpenSans.ttf")
src: url("../../webfonts/OpenSans.ttf?iefix") format("embedded-opentype")
But the font's don't load. I tried similar question on this topic but none of them were succesfull for me. What could this problem be?
If your folder name is Webfonts and you reference it with url("../../webfonts/..., then you have your answer there (lowercase vs. uppercase w/W).
Also, your code example results in a double src attribute. I don't know if it is related to the problem.
#font-face
font-family: 'Open Sans'
src: url("../../webfonts/OpenSans.ttf")
src: url("../../webfonts/OpenSans.ttf?iefix") format("embedded-opentype")
The code above compiles to this, where the src overwrites itself for each time:
#font-face {
font-family: "Open Sans";
src: url("../../webfonts/OpenSans.ttf");
src: url("../../webfonts/OpenSans.ttf?iefix") format("embedded-opentype");
}
The src attribute should only be set once, but with multiple values instead. I think this will work in Sass:
#font-face
font-family: 'Open Sans'
src: url("../../webfonts/OpenSans.ttf"), url("../../webfonts/OpenSans.ttf?iefix") format("embedded-opentype")
I have an index.html that links to a main.css. Per one of the answers to a SO question about using custom fonts, I have loaded my custom font as such by saving the file FoundrySterling-Medium.otf in the appropriate folder, and then calling it as such:
#font-face{
font-family: "FoundrySterling";
src: "assets/fonts/FoundrySterling-Medium.otf",
}
later on, for the body element, I set it up as such:
body, input, select, textarea {
color: #fff;
font-family: 'FoundrySterling', sans-serif;
font-size: 15pt;
font-weight: 400;
letter-spacing: 0.075em;
line-height: 1.65em;
}
However, no matter what, the font will not show, and instead the default Helvetica or Arial (depending Mac or PC) is used instead. What am I missing?
Thanks!
This is your original code:
#font-face{
font-family: "FoundrySterling";
src: "assets/fonts/FoundrySterling-Medium.otf",
}
Why are you not using a semi-colon at the end? Not sure if intentional.
#font-face{
font-family: "FoundrySterling";
src: url("assets/fonts/FoundrySterling-Medium.otf");
}
try changiing
src: "assets/fonts/FoundrySterling-Medium.otf",
to
src: url('http://domain.com/fonts/font.ttf'); /*URL to font*/
I hope it would help you.
Note that certain font-formats don't work on all browsers; you can use fontsquirrel.com's generator to avoid too much effort converting.
You can find a nice set of free web-fonts provided by Google Fonts (also has auto-generated CSS #font-face rules, so you don't have to write your own).
Change your code to use the url(...) syntax:
Swap:
src: "assets/fonts/FoundrySterling-Medium.otf"
With:
src : url('assets/fonts/FoundrySterling-Medium.otf');
I'm having a little trouble with using #font-face which really confuses me. I think I'm doing right or not.
So I made the declaration
#font-face{
font-family: Art Post black;
src: url('/fonts/ArtPostblack.ttf');
}
#font-face{
font-family: SimplyDelicious;
src: url('/fonts/SimplyDeliciousFont3.ttf');
}
Then made the calls
#blah{font-family:Art Post black; } #blah2{font-family:SimplyDelicious;}
Now problem is Art Post black works but SimplyDelicious doesn't work
Also when I remove Art Post black font. it doesn't change meaning the custom font is still not removed. So... I'm confused, am I doing it right? well I guess not.
Your syntax is right, but it is very basic. First, use this recommended #font-face syntax:
#font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}
UPDATE: You need "" around the font name in both the #font-face syntax and in your css selection if the font name has spaces in it. It won't select correctly if you don't have the single or double quotes as your code shows. That's likely your problem. Use this new bulletproof syntax though too to make it more cross-browser.
source: http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax
Then make sure your links are correct. keep in mind, use a / at the beginning of your URL directs the browser to the root directory of your domain. So paste that into your address bar after the domain name and see if it downloads the font file, if so, your links are correct.
This way of calling different font may help :
#font-face {
font-family: 'myriadproregular';
src: local('myriadproregular'), url('myriadproregular.ttf') format("truetype");
}
#font-face {
font-family: 'myriadprocond';
src: local('myriadprocond'), url('myriadprocond.ttf') format("truetype");
}
#font-face {
font-family: 'myriadprosemibold';
src: local('myriadprosemibold'), url('myriadprosemibold.ttf') format("truetype");
}
and in your case
#font-face{
font-family: Art Post black; (why this font name have space? it was supposed to be like ArtPostblack )
src: url('/fonts/ArtPostblack.ttf');
}
#font-face{
font-family: SimplyDelicious;
src: url('/fonts/SimplyDeliciousFont3.ttf');
}
and make sure they are near to css files and proper path.