In trying to get google fonts (font_face) working with IE7, 8, 9, Chrome and Firefox I ended up with a bit of a convoluted mess of files stored locally, on a remote server, as ttf, eot and woff. Is there a better/easier way to get them working for all these browsers? This is what I ended up doing to get it to work.
This is the html
<link href="Untitled_1.css" rel="stylesheet" type="text/css" />
<!--[if gte IE 7]>
<link rel="stylesheet" type="text/css" href="Untitled_1_ie.css" />
<![endif]-->
This is the first css (untitled_1.css):
#font-face {
font-family: 'Bangers';
font-style: normal;
font-weight: normal;
src: local('Bangers'), local('Bangers-Regular'), url('http://themes.googleusercontent.com/static/fonts/bangers/v4/DqeGA7eaz0hhOYTfkeJBIA.woff') format('woff');
src: url('Bangers.ttf'); /* for chrome/webkit */
}
This is the second (untitled_1_ie.css):
#font-face {
font-family: 'Bangers';
font-style: normal;
font-weight: normal;
src: url('Bangers.eot'); /* ie9 */
src: url('Bangers.eot?#iefix') format('embedded-opentype'); /* IE6-IE8 */
}
IE9 would only work with a locally stored version of the eot (or ttf) due to 'no cross-domain custom fonts' error, IE7/8 would only work with eot and Chrome would not work with woff (the default produced by google fonts website).
Thanks.
Related
I am attempting to host my font. The font I am using is Montserrat and I downloaded it from Google Fonts. I followed the instructions from here, and I also tried using the instructions from here
I still cannot get it to work. Anyone know what it is that I missed?
My style.css
#font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
src: url('/fonts/montserrat-v25-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''), url('/fonts/montserrat-v25-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/fonts/montserrat-v25-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('/fonts/montserrat-v25-latin-regular.woff') format('woff'), /* Modern Browsers */
url('/fonts/montserrat-v25-latin-regular.ttf') format('truetype'), /* Safari, Android,
iOS */
url('/fonts/montserrat-v25-latin-regular.svg#Montserrat') format('svg'); /* Legacy iOS
*/
}
div {
font-family: 'Montserrat', sans-serif;
}
I am loading the fonts by their URL. I tried to "preload" them using the <link> tag, but had no success in doing so.
My HTML Header
<link rel="preload" href="/fonts/montserrat-v25-latin-regular.woff" as="font" type="font/woff" crossorigin>
<link rel="preload" href="/fonts/montserrat-v25-latin-regular.eot" as="font" type="font/eot" crossorigin>
<link rel="preload" href="/fonts/montserrat-v25-latin-regular.svg" as="font" type="font/svg" crossorigin>
<link rel="preload" href="/fonts/montserrat-v25-latin-regular.ttf" as="font" type="font/ttf" crossorigin>
<link rel="preload" href="/fonts/montserrat-v25-latin-regular.woff2" as="font" type="font/woff2" crossorigin>
we are using wkhtmltopdf and wkhtmltoimage the latest version (0.12.3). And got a problem with the "Frutiger Neue LT W1G Bold" font. It does work on all normal browsers but after creating a image or pdf with the above mentioned libraries it renders the '0'-char wrong (it has strange roundings inside the '0').
How it should be (Chrome Version 53.0.2785.116 64-bit):
wkhtmltopdf:
wkhtmltoimage:
Maybe someone got the same problem and knows the answer?
I tested a lot of different #font-faces generated with sites like font-squirrel but nothing worked. We tried 'Gotham Medmium'-Font as well and even with that font it got some weird similar renderings.
My html/css:
<html lang="de" xmlns:og="http://ogp.me/ns#">
<head>
<meta charset="utf-8"/>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
#font-face {
font-family: 'frutiger--test';
src: url(data:font/truetype;charset=utf-8;base64,AAEAAAA....);
font-weight: normal;
font-style: normal;
}
span {
font-family: 'frutiger--test';
font-size: 100px;
font-weight: normal;
}
.test2 {
font-size: 13px;
font-weight: normal;
}
</style>
</head>
<body>
<span>01234567890123</span>
<span class="test2">00004578</span>
</body>
It could be related to bug fixed in 0.13. So you should just update it.
You should try to use non true-type format font. If you have that font in woff2 format it should work just fine.
My fonts are working in all browsers except Firefox. I acquired these fonts by downloading them from Google Fonts. Then I ran them through the Fontsquirrel font generator so that I could use them in an #fontface declaration. My firefox console reports this CSS error for each font file format:
downloadable font: download failed (font-family: "graduateregular" style:normal weight:normal stretch:normal src index:2): status=2147500037 source: file:///C:/Users/Owner/Desktop/Web%20Projects/Uncsstalumni.com/CSS/graduate-regular-webfont.woff
My HTML:
<link href='../CSS/stylesheet.css' rel='stylesheet' type='text/css'>
My CSS:
#font-face {
font-family:'graduateregular';
src: url('graduate-regular-webfont.woff2') format('woff2'), url('graduate-regular-webfont.woff') format('woff'), url('graduate-regular-webfont.ttf') format('truetype'), url('graduate-regular-webfont.svg#graduateregular') format('svg');
src: url('graduate-regular-webfont.eot');
src: url('graduate-regular-webfont.eot?#iefix') format('embedded-opentype'), font-weight: normal;
font-style: normal;
}
This site uses #font-face to display Myriad Pro in the top navigation bar. I think this is a breach of license. I will look for an alternative version soon. I might look at Cufon? I'd like to get the #font-face rule working first, then drop in a different font.
The site has CSS:
<!--[if IE]>
#font-face {
font-family: 'MyriadPro-BoldCond';
src: url('.../myriadpro-boldcond.eot');
}
<![endif]-->
#font-face {
font-family: 'MyriadPro-BoldCond';
src: url('.../myriadpro-boldcond.eot?#iefix') format('embedded-opentype'),
url('.../myriadpro-boldcond.woff') format('woff'),
url('.../myriadpro-boldcond.ttf') format('truetype'),
url('.../myriadpro-boldcond.svg#myriadpro-boldcond') format('svg');
font-weight: normal;
font-style: normal;
}
However, the font only displays in Chrome, not in IE9, Opera, or Firefox.
Update: I've moved the IE conditional entry below the others, but the issue remains in IE:
#font-face {
font-family: 'MyriadPro-BoldCond';
src: url('http:/.../myriadpro-boldcond.eot?#iefix') format('embedded-opentype'),
url('.../myriadpro-boldcond.woff') format('woff'),
url('.../myriadpro-boldcond.ttf') format('truetype'),
url('...myriadpro-boldcond.svg#myriadpro-boldcond') format('svg');
font-weight: normal;
font-style: normal;
}
<!--[if IE]>
#font-face {
font-family: 'MyriadPro-BoldCond';
src: url('...myriadpro-boldcond.eot');
}
<![endif]-->
From the Firefox error console, when loading your site:
[02:31:52.279] downloadable font: download failed (font-family: "MyriadPro-BoldCond" style:normal weight:normal stretch:normal src index:1): bad URI or cross-site access not allowed
source: http://www.doig.com.au/wp-content/themes/brinkley/myriadpro-boldcond.woff # http://brinkley.doig.com.au/wp-content/themes/brinkley/style.css?ver=3.4.2
Note that the site is at brinkley.doig.com.au but the font is being loaded from www.doig.com.au. And presumably the server doesn't serve the right CORS headers.
The only reason it works in Chrome is that Chrome doesn't correctly implement http://dev.w3.org/csswg/css3-fonts/#default-same-origin-restriction
I'm trying to use Font Awesome:
http://fortawesome.github.com/Font-Awesome/
I've used these font icons on several Rails projects with no problem but for some reason when I try to use them in a Shopify store they don't get rendered.
I'm using another #font-face with no difficulties but for some reason this #font-face is not rendering.
In assets/ I have:
fontawesome-webfont.eot
fontawesome-webfont.svg
fontawesome-webfont.ttf
fontawesome-webfont.woff
And I load them with #font-face just like I do with another font-face that works fine.
in my stylesheet.css which lives in assets/
#font-face {
font-family: "FontAwesome";
src: url('fontawesome-webfont.eot');
src: url('fontawesome-webfont.eot?#iefix') format('eot'),
url('fontawesome-webfont.woff') format('woff'),
url('fontawesome-webfont.ttf') format('truetype'),
url('fontawesome-webfont.svg#FontAwesome') format('svg');
font-weight: normal;
font-style: normal;
}
But when I try to use the icons they can't seem to load. Any idea why this isn't working on Shopify? I feel like I'm missing something small but I can't figure it out.
The simplest solution is to attach this to header of theme.liquid
<!-- Font-Awesome ================================================== -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
No extra uploading. No installation. No hassle. Done.
Thank you MaxCDN :)
You will want to use the liquid asset URL helper in your CSS. More docs on the asset URL helper can be found here https://shopify.dev/docs/themes/liquid/reference/filters/url-filters#asset_url
The posts here are a bit out-dated. I had to do a bit of troubleshooting still.
I went with the CDN approach and included a <link /> tag in my /layout/theme.liquid head:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />
I got the CDN link from this website: https://cdnjs.com/libraries/font-awesome
You must remove #iefix and #FontAwesome in the #font-face code. Here's the correct code:
#font-face {
font-family: "FontAwesome";
src: url('fontawesome-webfont.eot');
src: url('fontawesome-webfont.eot?') format('eot'), url('fontawesome-webfont.woff') format('woff'), url('fontawesome-webfont.ttf') format('truetype'), url('fontawesome-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
theme.liquid
Before the head tag </head>
font-awesome.css
#font-face {
font-family: 'FontAwesome';
src: url('fontawesome-webfont.eot');
/* src: url('/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
*/ font-weight: normal;
font-style: normal;
{{ 'font-awesome'| stylesheet_tag }}
<script src="https://use.fontawesome.com/46b6d6c6a9.js"></script>
<script src="{{ 'fontawesome.min.js' | asset_url }}"></script>
</head>
any where into body section use the font icon
<div class="mb-2 col-2"> <span class="fa fa-reddit social"></span> </div>
<div class="mb-2 col-2"> <span class="fa fa-facebook social"></span> </div>