I'm setting up a typewriter page with a local font. I'm using #font-face to import it but it won't render in Safari. It renders on google Chrome.
Here is the web page https://www.dynamik.systems/typewriter/
(you have to press some keys to see some letters).
#font-face {
font-family: "dynamik";
src: url('http://www.dynamik.systems/wp-content/themes/fonts/DynamikGX.eot') format('opentype'),
url('http://www.dynamik.systems/wp-content/themes/fonts/DynamikGX.ttf') format('truetype'),
url('ttp://www.dynamik.systems/wp-content/themes/fonts/DynamikGX.woff') format('woff');
}
#content{
font-family: "dynamik";
}
Thanks on behalf!
Looks like you have two issues:
all 3 font urls should be https
3rd url is also missing starting h
There are also few additional rules you can add to font-face e.g:
font-display: swap
src: local properties.
Related
I have defined following #font-face rule:
#font-face {
font-family: "MyFont";
src: url(MyFont.eot);
src: url(MyFont.eot#iefix) format('embedded-opentype'),
url(MyFont.ttf) format('truetype'),
url(MyFont.woff) format('woff');
}
Since there were some bug in the woff font file I have fixed it and I need to test if font looks correct right now.
The problem is that i.e. Google Chrome uses ttf by default and I cannot modify the #font-face in the runtime - also I cannot modify the CSS on the server because of the complicated pipeline.
Can we force somehow the browser to use specific font file type ?
If you just want to test the woff file is working now, you can:
Try Firefox, I believe they prioritise WOFF, or
Temporarily change your #font-face code so Google Chrome only has WOFF as an option:
font-family: "MyFont";
src: url(MyFont.woff) format('woff');
The problem is the whole website doesn't show text until I inspect element with Chrome. It all works fine on other browsers.
I don't have any chrome extensions installed and am using an incognito window, but still nothing.
The website passes validation via W3C - the site is: http://www.toricks.com
I'm using #font-face, which by looking at it seems to be setup fine!
Can anyone shed any light on this?
You can try the Font Squirrel way of adding the #font-face like this:
#font-face {
font-family: 'Comfortaa';
src: url('comfortaa.eot');
src: url('comfortaa.eot?#iefix') format('embedded-opentype'),
url('comfortaa.woff') format('woff'),
url('comfortaa.ttf') format('truetype'),
url('comfortaa.svg#comfortaanormal') format('svg');
font-weight: normal;
font-style: normal;
}
I think this has the best cross-browser support. Make sure you convert your font to all the different types (you can do that with the Font Squirrel generator).
I'm having an issue with #font-face in my site with two browsers: Firefox and Chrome.
In Firefox the #font-face rule just doesn't work, it uses the fallback font —Helvetica—
I have declared the font like this at the top of my stylesheet:
#font-face {
font-family: 'pf_centro_sans_proregular';
src: url('http://static.algarabia.com/CDN/fonts/pfcentrosanspro-reg-webfont.eot');
src: url('http://static.algarabia.com/CDN/fonts/pfcentrosanspro-reg-webfont.eot?#iefix') format('embedded-opentype'),
url('http://static.algarabia.com/CDN/fonts/pfcentrosanspro-reg-webfont.woff') format('woff'),
url('http://static.algarabia.com/CDN/fonts/pfcentrosanspro-reg-webfont.ttf') format('truetype'),
url('http://static.algarabia.com/CDN/fonts/pfcentrosanspro-reg-webfont.svg#pf_centro_sans_proregular') format('svg');
font-weight: normal;
font-style: normal;
}
If I type the URI in the browser it download the font without problem, so, the font is there (Opera and Safari displays the site with the right font)
In Chrome suddenly (with some update I guess) the menu changed to the fallback font, yes, just the menu, the rest of the site behaves as expected.
I know the font is there and my CSS shouldn't be that bad because it works in Safari (both, desktop and mobile) and in Opera.
Any hints with this?
Thank you for your time and help.
It should just be a matter of changing the font url from http://fonts.googleapis.com/css to https://fonts.googleapis.com/css to secure this link.
I am using a custom font-family with following css rule:
#font-face {
font-family: 'matrix';
src: url('MaSGRgLn.eot');
src: url('MaSGRgLn.eot?#iefix') format('embedded-opentype'), url('MaSGRgLn.woff') format('woff'), url('MaSGRgLn.ttf') format('truetype'), url('MaSGRgLn.svg#MatrixScriptGr-RegularLin') format('svg');
font-weight: normal;
font-style: normal;
}
I have transformed my main font to all alternatives to be sure. Those work fine for all browsers except for ie < ie9. Is there sth i am missing or haven't paid attention to?
One important thing to note, based on my tests, is that the font-family name must match that what is inside the EOT file (viewable with hex-editor or if you have a matching TTF and Windows, the font preview will tell you).
IE8 does not display your font if the name differs, IE9 (even in IE8 mode) doesn't have this problem.
In your case, the SVG version has the name "MatrixScriptGr-RegularLin". Try using the same name in you CSS #font-face font-family definition.
Building a site using custom fonts. Got .ttf files from a designer.
css looks like this:
#font-face{
font-family:MenuFont;
src: url("http://www.website.com/assets/fontfile.ttf");
}
.divClass{font-family:MenuFont;}
I've tried with a couple different font files he gave me. One of them doesn't show up at all. Even more strangely, a couple of them only effect certain letters. For instance, plugging in one file makes only O's, R's C's and P's use the correct font. I checked and it's the same letters across browsers.
Looking in firebug, I can see the whole font, when I roll over the font file url, so my Url's are fine, and the browser is getting the font.
What am I missing here?
Generate the correct font-face code and all the needed fonts with FontSquirrel. See: http://www.fontsquirrel.com/fontface/generator
You will get a more extended and compatible font-face declaration. Like this:
#font-face {
font-family: 'Meran';
src: url('../fonts/meran-normal-webfont.eot');
src: url('../fonts/meran-normal-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/meran-normal-webfont.woff') format('woff'),
url('../fonts/meran-normal-webfont.ttf') format('truetype'),
url('../fonts/meran-normal-webfont.svg#Meran') format('svg');
font-weight: normal;
font-style: normal;
}