Font-face as base64 with fallbacks - css

Following this threat I´d like to include a fontface as follows:
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot');
src: url('webfont.eot?#iefix') format('embedded-opentype'),
url('webfont.woff2') format('woff2'),
url('webfont.woff') format('woff'),
url('webfont.ttf') format('truetype'),
url('webfont.svg#svgFontName') format('svg');
}
But instead of loading files from the filesystem the filecontent is coming from a database as base64 string. My Question is do I have to add the base64 string for each format (woff,woff2,svg,eot,ttf)? like:
url(data:application/font-woff;charset=utf-8;base64,d09GMgABA…
url(data:application/font-woff2;charset=utf-8;base64,d09GMgABA…
url(data:application/x-font-truetype;charset=utf-8;base64,,d09GMgABA…
url(data:image/svg+xml;charset=utf-8;base648;base64,,d09GMgABA…
url(data:application/vnd.ms-fontobject;charset=utf-8;base64,d09GMgABA…
I´m asking because when looking at fontsquirrels generated base64 generated stylesheets they only provide one as base64 others as local files.

Base64 works with ttf-format.
Example:
#font-face {
font-family: "CustomFont";
src: url(data:font/truetype;charset=utf8;base64,AAEAAAAQAQAABAAAT...) format("truetype");
}

Related

how to use css variables in #font-face url

:root {
--icon-url: '//at.alicdn.com/t/font_126288_147h8m0m5se5ewmi';
}
#font-face {
font-family: 'iconfont';
src: url(var(--icon-url)'.eot');
src: url(var(--icon-url)'.eot?#iefix') format('embedded-opentype'), url(var(--icon-url)'.woff') format('woff'), url(var(--icon-url)'.ttf') format('truetype'), url(var(--icon-url)'.svg#iconfont') format('svg');
}
Module not found: Error: Can't resolve './var(--icon-url' in 'Users/xxx/xxx'
if you want to specify a URL in a custom property, you need to write out the entire url() expression, and substitute that entire expression:
:root {
--url: url("https://download.unsplash.com/photo-1420708392410-3c593b80d416");
}
body {
background: var(--url);
}
CSS variable not supported in src or src's url.
Found this considerably after the fact, but you tagged this as sass in addition to css. In SASS, you CAN include this as a variable. You have to pass the variable with special syntax, though.
Instead of just $url you have to pass it like so: #{$url}. Then SASS will know to include the string directly.
Example:
/* Set variable in SASS (will not be CSS variable) */
$icon-url: '//at.alicdn.com/t/font_126288_147h8m0m5se5ewmi';
#font-face {
font-family: 'iconfont';
src: url('#{$icon-url}.eot');
src: url('#{$icon-url}.eot?#iefix') format('embedded-opentype'),
url('#{$icon-url}.woff') format('woff'),
url(var(--icon-url)'.ttf') format('truetype'),
url('#{$icon-url}.svg#iconfont') format('svg');
}
Mind you, at this point, you could just use woff2 and woff, so this may be less needed.
See https://caniuse.com/mdn-css_at-rules_font-face_woff
:root {
--icon-url: url('//at.alicdn.com/t/font_126288_147h8m0m5se5ewmi');
}

Delay loading my webfont

On my website I have a webfont hosted on my server and for a few weeks I realized that in Chrome, once loaded all the content of the page, it takes less than a second to load the font. Is there a way to optimize the load without delay?
I am loading the font by CSS in the following way:
#font-face {
font-family: 'webfont';
src: url('/global/fonts/webfont-regular-webfont.eot');
src: url('/global/fonts/webfont-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('/global/fonts/webfont-regular-webfont.woff2') format('woff2'),
url('/global/fonts/webfont-regular-webfont.woff') format('woff'),
url('/global/fonts/webfont-regular-webfont.ttf') format('truetype'),
url('/global/fonts/webfont-regular-webfont.svg#webfontregular') format('svg');
font-weight: normal;
font-style: normal;
font-display: fallback;
}
Here the demo:
(function(){
// if firefox 3.5+, hide content till load (or 3 seconds) to prevent FOUT
var d = document, e = d.documentElement, s = d.createElement('style');
if (e.style.MozTransform === ''){ // gecko 1.9.1 inference
s.textContent = 'body{visibility:hidden}';
var r = document.getElementsByTagName('script')[0];
r.parentNode.insertBefore(s, r);
function f(){ s.parentNode && s.parentNode.removeChild(s); }
addEventListener('load',f,false);
setTimeout(f,3000);
}
})();

Add fonts into CSS

To add fontawsome fonts to my site, I added this to my CSS :
#font-face {
font-family: 'FontAwsome';
src: url('./webagency_images/fonts/fontawsome-webfont.eot');
src: url('./webagency_images/fonts/fontawsome-webfont.woff') format('woff');
src: url('./webagency_images/fonts/fontawsome-webfont.svg') format('svg');
src: url('./webagency_images/fonts/fontawsome-webfont.ttf') format('truetype');
src: url('./webagency_images/fonts/FontAwsome.otf') format('otf');
}
My fonts are in webagency_images/fonts
Am I doing something wrong?
They don't displlay on the site...
If you decide to use the CDN directly, do the following and change the version number to the most current.
<link rel='stylesheet' href='//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css' type='text/css' />
Or you can add the below at the very top of your CSS file:
#import url("https://netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css");
The correct url should be:
src: url('../webagency_images/fonts/fontawsome-webfont.eot');

Custom css font isn't loading

here is the page where I want to add custom font http://pgkweb.ru/temp/1/index.html
So the fonts are:
http://pgkweb.ru/temp/1/include/MyriadProCondRegular/MyriadProCondRegular.ttf
http://pgkweb.ru/temp/1/include/MyriadProCondRegular/MyriadProCondRegular.woff
http://pgkweb.ru/temp/1/include/MyriadProCondRegular/MyriadProCondRegular.otf
http://pgkweb.ru/temp/1/include/MyriadProCondRegular/MyriadPro-Cond.eot
And I call them from css (http://pgkweb.ru/temp/1/include/style.css):
/*FONTS*/
#font-face {
font-family: MyriadProCond;
src: url(include/MyriadProCondRegular/MyriadProCondRegular.ttf); /* Путь к файлу со шрифтом */
src: url(include/MyriadProCondRegular/MyriadProCondRegular.woff);
src: url(include/MyriadProCondRegular/MyriadProCondRegular.otf);
src: url(include/MyriadProCondRegular/MyriadPro-Cond.eot);
}
*, body, p,h3,h4 {
font-family: 'MyriadProCond', Arial, sans-serif;
color: #fff;
}
But as I see in FireFox code explorer it doesn't works (line-through). But why?
Your webfonts are inside the "include" folder, as is the stylesheet, i.e. they are both in the same folder, so you have to erase the folder name from the file path in the links, like:
src: url("MyriadProCondRegular/MyriadProCondRegular.ttf");
instead of
src: url("include/MyriadProCondRegular/MyriadProCondRegular.ttf");
the same with all the other URLs
Seems like you are missing quotes around each url, the syntax is also a little off:
#font-face {
font-family: MyriadProCond;
src: url('include/MyriadProCondRegular/MyriadPro-Cond.eot');
src: url('include/MyriadProCondRegular/MyriadProCondRegular.woff') format('woff'), /* Путь к файлу со шрифтом */
url('include/MyriadProCondRegular/MyriadProCondRegular.ttf') format('truetype'),
url('include/MyriadProCondRegular/MyriadProCondRegular.otf') format('otf');
}
See here: https://css-tricks.com/snippets/css/using-font-face/
If this doesn't work, check that the URLs are correct and the fonts are being downloaded (no 404 errors in the network tab).

#font-face stopped working on certain fonts

I used #font-face on my website for 2 fonts.
One of them stopped working - I checked everything, tried different syntax but nothing brings it back.
Here is my CSS:
#font-face
{
font-family: 'gotham';
src:url(http://www.odednaaman.com/fonts/gothambook.eot) format('eot');
src:url(http://www.odednaaman.com/fonts/gothambook.ttf) format('truetype'), url(http://www.odednaaman.com/fonts/gotham-book.otf) format('opentype'), url(http://www.odednaaman.com/fonts/gothambook.woff) format('woff'), url(http://www.odednaaman.com/fonts/gothambook.eot?iefix) format('embedded-opentype');
}
#font-face
{
font-family: 'yank';
src: url(http://www.odednaaman.com/fonts/yank.ttf) format('truetype');
}
The "Yank" font still works perfectly. using chrome for QA.
website: www.odednaaman.com
any ideas?
Thanks,
Oded
The src should be only once but you're having two times in your first #font-face. So, use this:
#font-face
{
font-family: 'gotham';
src:url(http://www.odednaaman.com/fonts/gothambook.eot) format('eot'),
url(http://www.odednaaman.com/fonts/gothambook.ttf) format('truetype'),
url(http://www.odednaaman.com/fonts/gotham-book.otf) format('opentype'),
url(http://www.odednaaman.com/fonts/gothambook.woff) format('woff'),
url(http://www.odednaaman.com/fonts/gothambook.eot?iefix) format('embedded-opentype');
}
#font-face
{
font-family: 'yank';
src: url(http://www.odednaaman.com/fonts/yank.ttf) format('truetype');
}
From the console of Chrome:
Failed to load resource: the server responded with a status of 404 (Not Found)
http://www.odednaaman.com/fonts/ygothambook.woff
So it seems that you need to upload the .woff file.

Resources