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>
Related
here's my HTML file with h1, p and span tags :-
<!DOCTYPE html>
<html>
<head>
<title>Custom Fonts</title>
</head>
<body>
<h1>This is Archi - <span>Welcome!</span></h1>
<p class="myFontStyling">dfrzgtiujhgfdsfghyjgku</p>
</body>
</html>
here's my CSS file that incorporates .ttf file to style the font of an element or contents in a tag :-
#font-face {
font-family: 'myFirstFont';
src:
url('fonts/CoHeadlineCorpFont/Co-Headline-Corp-Light.ttf');
format('truetype');
font-style: normal;
font-weight: 100;
}
.myFontStyling {
font-family: 'myFirstFont';
}
h1 {
font-family: 'myFirstFont', sans-serif;
font-weight: 100;
}
here's my directory structure :-
fontsByArchi
-fonts
-CoHeadlineCorpFont
-Co-Headline-Corp-Light.ttf
-index.html
-style.css
I am unable to get the font effect on my texts, what could be the reason?
I believe you forgot to refer external css file in html page. After adding <link rel="stylesheet" type="text/css" href="style.css"> tag inside <head> I was above see it getting applied.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Custom Fonts</title>
</head>
<body>
<h1>This is Archi - <span>Welcome!</span></h1>
<p class="myFontStyling">dfrzgtiujhgfdsfghyjgku</p>
</body>
</html>
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;
}
Please can someone point me in the right direction! I can't get the queries to work as intended.
So, I have for example:
<link rel="stylesheet" href="/480.css" type="text/css" media="screen and (max-width:480px)" />
<link rel="stylesheet" href="/768.css" type="text/css" media="screen and (max-width:768px)" />
<link rel="stylesheet" href="/960.css" type="text/css" media="screen and (min-width:960px)" />
In the 480 stylesheet:
#box{width:100px;height:100px;}
In the 960 stylesheet:
#box{width:200px;height:200px;}
When I resize the browser to 480px or less the 960 style is overriding the 480 style. I have tried loading all queries in the one stylesheet and I've tried using separate stylesheets for different resolutions but still not working. When testing it in either Chrome or FF Aurora it makes no difference.
What am I doing wrong? Thanks!
Works perfectly for me:
http://felixebert.de/so-12811458/
Is the path to the css files correct?
Is the HTML Doctype correct (<!DOCTYPE html>)?
Do you mix an id-reference with a class-reference? (#box = <div id="box" />, .box = <div class="box" />)
What's in 768.css?
Try this:
<style>
#media screen and (max-device-width: 480px),
screen and (max-width: 960px) {
#box{width:100px;height:100px;outline:1px solid red;}
}
/* Still small! (but scaling up) */
#media screen and (min-width: 960px) {
#box{width:200px;height:200px;outline:1px solid red;}
}
</style>
http://jsfiddle.net/sthAngels/EecJD/
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>
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.