I am using #font-face to try and get the font 'Archisto' to load on my webpage. I am a newbie on building web pages and using #font-face. I followed all the steps on several tutorials and looked through several threads on here, but I can not get the font to load.
I have the css file uploaded in the folder http://www.unfoldmyworld.com/wp-content/themes/ashe/assets/css/Archistico.css
I have the font file uploaded in the folder http://www.unfoldmyworld.com/wp-content/themes/ashe/assets/fonts/FONT_11.TTF
The #font-face code in the .css file looks like this:
#font-face {
font-family: Archistico;
src: url(http://www.unfoldmyworld.com/wp-content/themes/ashe/assets/fonts/FONT_11.TTF);
}
I am calling the font with custom CSS that looks like this:
.page-content h5{
font-family: 'Archistico' !important;
font-size: 50px !important;
display: inline !important;
color: #231400 !important;
}
The page I am trying to get this to work on is: www.unfoldmyworld.com
I would really appreciate your help!
1- Add to the head section of web page.<link href="//db.onlinewebfonts.com/c/50f290d070f58bdf56e1cc32e5636174?family=Archistico" rel="stylesheet" type="text/css"/>
-2 Using #import CSS directive, put the following line in add to your css file.(http | https)
#import url(//db.onlinewebfonts.com/c/50f290d070f58bdf56e1cc32e5636174?family=Archistico);
-3 Use font-face declaration Fonts.(http | https)
#font-face {font-family: "Archistico"; src: url("//db.onlinewebfonts.com/t/50f290d070f58bdf56e1cc32e5636174.eot"); src: url("//db.onlinewebfonts.com/t/50f290d070f58bdf56e1cc32e5636174.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/50f290d070f58bdf56e1cc32e5636174.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/50f290d070f58bdf56e1cc32e5636174.woff") format("woff"), url("//db.onlinewebfonts.com/t/50f290d070f58bdf56e1cc32e5636174.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/50f290d070f58bdf56e1cc32e5636174.svg#Archistico") format("svg"); }
Let me know if this works for you :) Thanks
Have you tried it with a relative url?
I'm thinking of a CORS (Cross-Origin Resource Sharing) problem.
#font-face {
font-family: Archistico;
src: url('../fonts/FONT_11.TTF');
}
Related
i have a font-awesome CSS-Fille which i load in the footer of my website. In the CSS File the fonts are loaded kike this:
font-display:swap;src:url(../webfonts/fa-brands-400.eot);src:url(../webfonts/fa-brands-400.eot?#iefix)
format("embedded-opentype"),url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-
brands-400.woff) format("woff"),url(../webfonts/fa-brands-400.ttf)......
not i look for an solution to preload these fonts. Is there an easy way to do that?
Not sure if thats what you mean, but you can define a font-face in a seperate css file, e.g.:
#font-face {
font-family: faBrands;
font-weight: 400;
src: url('/webfonts/fa-brands-400.eot');
}
#font-face {
font-family: faBrands;
font-weight: 400;
src: url('/webfonts/fa-brands-500.eot');
}
Assuming the folder webfonts is under public, you can then write in a css file:
font-family: faBrands;
Just make sure to import the font face css file first.
I have a bilingual site using i18n. i18n attaches classes to the and tags of the site when it renders. For example, I have:
<html class="en">
<body class="i18n-en">
</body>
</html>
And when the user switches languages, the following renders:
<html class="ar>
<body class="i18n-ar">
</body>
</html>
I've created a LESS file which programmatically loads a different font to replace the English default font when the Arabic version of the site loads, as follows:
body.i18n-en {
#font-face {
font-family: 'DinAlternateBold';
src: url('../fonts/din-alternate-bold.ttf') format('truetype');
}
}
body.i18n-ar {
#font-face {
font-family: 'DinAlternateBold';
src: url('../fonts/Harmattan-Regular.woff') format('woff');
}
}
Note that I am calling "Harmattan-Regular.woff" with the same variable name as "din-alternate-bold.ttf", so that the replacement of all instance of DinAlternateBold on the site is automatic.
However, it is not working. Whichever font is declared later in the LESS file is getting loaded to the page, regardless of the class of the body. In the case I presented above, both the Arabic and English versions of the site are loading Harmattan-Regular.woff.
Is there something fundamental about how fonts behave in CSS/LESS that I'm missing? If so, what would be a proper way to achieve the effect I'm looking for?
It should be noted that each font does load properly when used alone—it is only in combination that I'm running into problems.
You can try it like this:
#font-face {
font-family: 'din-alternate-bold';
src: url("../fonts/din-alternate-bold.eot?-gqzqge");
src: url("../fonts/din-alternate-bold.eot?#iefix-gqzqge") format("embedded-opentype"),
url("../fonts/din-alternate-bold.ttf?-gqzqge") format("woff"),
url("../fonts/din-alternate-bold.ttf?-gqzqge") format("truetype"),
url("../fonts/din-alternate-bold.svg?-gqzqge#din-alternate-bold") format("svg");
font-weight: normal;
font-style: normal
}
body.i18n-ar {
font-family: 'din-alternate-bold';
}
You can try to generate your font here for easier and faster way.
I'm using a css compiler (Stylus) for the first time, and I can't get Google Web Font urls to load correctly.
This:
#font-face {
font-family: 'Roboto';
font-style: light;
font-weight: 300;
src: local('Roboto Light'), local('Roboto-Light') url(https://fonts.googleapis.com/css?family=Roboto:300,500,700&subset=latin,latin-ext);
}
produces:
#font-face {
font-family: 'Roboto';
font-style: light;
font-weight: 300;
src: local('Roboto Light'), local('Roboto-Light') url("data:application/octet-stream;base64,QGZvbnQtZmFjZSB7CiAgZm9udC1mYW1pbHk6ICdSb2JvdG8nOwogIGZvbnQtc3R5bGU6IG5vcm1hbDsKICBmb250LXdlaWdodDogMzAwOwogIHNyYzogbG9jYWwoJ1JvYm90byBMaWdodCcpLCBsb2NhbCgnUm9ib3RvLUxpZ2h0JyksIHVybChodHRwczovL2ZvbnRzLmdzdGF0aWMuY29tL3Mvcm9ib3RvL3YxNS9QcnUzM3FqU2hwWlNtRzN6NlZZd25hQ1djeW5mX2NEeFh3Q0x4aWl4RzFjLnR0ZikgZm9ybWF0KCd0cnVldHlwZScpOwp9CkBmb250LWZhY2UgewogIGZvbnQtZmFtaWx5OiAnUm9ib3RvJzsKICBmb250LXN0eWxlOiBub3JtYWw7CiAgZm9udC13ZWlnaHQ6IDUwMDsKICBzcmM6IGxvY2FsKCdSb2JvdG8gTWVkaXVtJyksIGxvY2FsKCdSb2JvdG8tTWVkaXVtJyksIHVybChodHRwczovL2ZvbnRzLmdzdGF0aWMuY29tL3Mvcm9ib3RvL3YxNS9vT2VGd1pObHJUZWZ6TFltbFZWMVVLQ1djeW5mX2NEeFh3Q0x4aWl4RzFjLnR0ZikgZm9ybWF0KCd0cnVldHlwZScpOwp9CkBmb250LWZhY2UgewogIGZvbnQtZmFtaWx5OiAnUm9ib3RvJzsKICBmb250LXN0eWxlOiBub3JtYWw7CiAgZm9udC13ZWlnaHQ6IDcwMDsKICBzcmM6IGxvY2FsKCdSb2JvdG8gQm9sZCcpLCBsb2NhbCgnUm9ib3RvLUJvbGQnKSwgdXJsKGh0dHBzOi8vZm9udHMuZ3N0YXRpYy5jb20vcy9yb2JvdG8vdjE1Lzk3dWFoeGlxWlJvbmNCYUNFSTNhVzZDV2N5bmZfY0R4WHdDTHhpaXhHMWMudHRmKSBmb3JtYXQoJ3RydWV0eXBlJyk7Cn0K");
}
I've tried to troubleshoot, loading a character at a time, and can get part of the url to compile correctly, so this:
src: local('Roboto Light'), local('Roboto-Light') url(https://fonts.googleapis.com/css?family=Robot);
produces:
src: local('Roboto Light'), local('Roboto-Light') url("https://fonts.googleapis.com/css?family=Robot");
But as soon as I add the last 'o' to 'Roboto' it compiles as that crazy "data:application/octet-stream;base64,QGZv..." output.
I have tried other urls and get a similar result. Have also tried escaping the "=" sign. It escapes, but I still can't get it to compile correctly past 'Robot'.
For now, I'm hard coding the css file with the correct urls. Not a huge problem, but I'd like to figure out what I'm doing wrong.
I'm 100% sure that it's not Stylus produces this behavior. You can verify it at http://tinyurl.com/hqthyml (view compiled CSS). Probably it's some plugin or maybe build tool (gulp/webpack/...) that you're using with Stylus.
the font you are using from google fonmt its simple just
put this into you css file on the top
#import url(https://fonts.googleapis.com/css? family=Roboto:400,300italic,300,400italic);
and use simple like
body{
font-family: 'Roboto', sans-serif;
}
you are trying to call a html request into the css file which i understand thats why it compile this
I have a directory called project and in it i have the directories html,assets and javascript.The assets directory has the directories fonts and css.The css directory has a css file called typography.css.The fonts directory has all the fonts i am using.
Inside the html directory i have a file typography.html. To use the fonts i am using this code inside typography.css which is correctly linked/referenced in my html file.However this code inside typography.css
#font-face {
font-family: "LatoLight";
src: url('../fonts/lato-light-webfont.eot') format("embedded-opentype"), url('../fonts/lato-light-webfont.woff') format("woff"), url('../fonts/lato-light-webfont.ttf') format("truetype"), url('../fonts/lato-light-webfont.svg') format("svg");
}
h1{ font-family: LatoLight !important; }
does not produce the desired result.I am using twitter bootstrap 3.Why is this not working?.
Try:
#font-face {
font-family: 'LatoLight';
src: url('../fonts/lato-light-webfont.eot') format("embedded-opentype"),
url('../fonts/lato-light-webfont.woff') format("woff"),
url('../fonts/lato-light-webfont.ttf') format("truetype"),
url('../fonts/lato-light-webfont.svg') format("svg");
font-weight: normal;
font-style: normal;
}
I've switched double quotes to single. It MIGHT make a difference but i am not sure.
otherwise this might help Bootstrap 3 unable to display glyphicon properly i know it's glyphicons but firefox might just be having issues regarding other fonts.
I think it could be as simple as putting quotes around the font you want when you reference it.
h1{ font-family: "LatoLight" !important; }
I am using Google Web Fonts inside my CSS stylesheet like below
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');}
but when my website goes from secured page, I am getting "only secured content is being displayed". I used Google Chrome Resource Inspector and it pointed above was the issue
How can I add a secured link to the Google Web font in my CSS file
Thanks
You don't need #font-face to use a Google Font.
Just add this in your HTML code:
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
Then add the font name in your CSS. Example:
body{font-family: 'Open Sans', sans-serif;}
Bit old but it came up on a related search so it may be useful to someone.
I personally put the #font-face declaration in my stylesheets rather than requesting it in the head. Just remove the 'http:' like below, should solve the problem.
url(//themes.googleusercontent.com/static/fonts/opensans/...) format('woff');
Why not use #import statement?
At the top of your css file:
#import url(http://fonts.googleapis.com/css?family=Open+Sans);