I am using custom web font in my blogger blog. It is not working since few weeks ago. There is a solution for this error that i show on stackflow website but i can't apply it for blogger blog because there is no .htaccess file in blogger. please some one help me. my font face code here. and my website is http://vishwatestblog.blogspot.com/
#font-face {
font-family: 'fmmalithix';
src: url('https://googledrive.com/host/0ByuGuHHrxa5GY0JSNTR4TUhaZ3c');
src: url('https://googledrive.com/host/0ByuGuHHrxa5GY0JSNTR4TUhaZ3c?#iefix') format('embedded-opentype'),
url('https://googledrive.com/host/0ByuGuHHrxa5GMm45RW5zWkd1Slk') format('woff2'),
url('https://googledrive.com/host/0ByuGuHHrxa5GUUJGS0dxME5XbDQ') format('woff'),
url('https://googledrive.com/host/0ByuGuHHrxa5GN2xhWmQ2bHdDRDA') format('truetype'),
url('https://googledrive.com/host/0ByuGuHHrxa5GRzhxSzRhN1dBTEE#fmmalithix') format('svg');
font-weight: normal;
font-style: normal;
}
It looks like the font files doesn't have the CORS headers and thats the reason, you aren't able to see the font being applied.
Also, as the files are being downloaded from googledrive, you need to be signed in to access the file.
I dont think you can host the font files on a google drive and access without authorization.
you can check it yourself, font urls you mentioned throw a 404 if you open in incognito mode.
Please Check, you have correctly placed the font file and the google drive directory.
#font-face
{
font-family: 'Font Family';
src: url('source.ttf') format('truetype'); ---> Font Type
}
Related
I'm using some fonts in WordPress and I'm importing them like this
#font-face {
font-family: "Neutra";
src: url("/wp-content/themes/Sunterra/resources/fonts/Neutra-Text-Bold.otf");
}
This worked in my local dev environment but on the live server I'm getting 404 (Not Found)
The live server is not finding the font because of most likely a pathing or permission issue.
Try to use the full url to test. If that doesn't work, you should try to find out where the font is actually located and if it even exists on the live server.
#font-face {
font-family: "Neutra";
src: url("/wp-content/themes/Sunterra/resources/fonts/Neutra-Text-Bold.otf");
}
I think your font path was wrong. make sure your css file was link correctly something like that
#font-face {
font-family: 'iconfont';
src:
url('../fonts/iconfont.ttf?ukrc8w') format('truetype'),
url('../fonts/iconfont.woff?ukrc8w') format('woff'),
url('../fonts/iconfont.svg?ukrc8w#iconfont') format('svg');
font-weight: normal;
font-style: normal;
}
font file need to link with your css file
File stracture
-root
-css
-fonts.css
-fonts
-iconfont.ttf
Visiting a website i have found out the menu links were abnormally bolder than wile watching the same page from my collegue computer with same browser.
Deleting the corresponding font from my windows font folder corrected the difference.
My question is how preventing this possibility when designing css fonts on a website
Most #font-face at-rules begin with a local(name-of-local-file) and then a reference to your distant url(/on/server/teh-webfont.woff).
Browsers will try, in this typical situation, to use the local file and if they find nothing will continue by downloading from your server the distant asset. If they find a local matching font, then they'll use it immediately and will stop their search of a font thus they won't download and use your distant asset.
Conclusion: don't use local() and only keep those url(). It's the contrary of this SO answer
Example without local() and many url() corresponding to many formats. Browsers will download the first one that please them, not 2+ of them:
#font-face {
font-family: 'Gudea';
src: url('./fonts/gudea/Gudea-Regular-webfont.eot');
src: url('./fonts/gudea/Gudea-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('./fonts/gudea/Gudea-Regular-webfont.woff2') format('woff2'),
url('./fonts/gudea/Gudea-Regular-webfont.woff') format('woff'),
url('./fonts/gudea/Gudea-Regular-webfont.ttf') format('truetype'),
url('./fonts/gudea/Gudea-Regular-webfont.svg#gudearegular') format('svg');
font-weight: normal;
font-style: normal;
}
Download the font .ttf
Saving the font in a folder in your web site
For call font use this code in css:
#font-face {
font-family: "YourFont";
src: url('font/YourFont.ttf');
}
.example{
font-family: YourFont, sans-serif;
}
Hi guys I've done a fair amount of digging and this persistent problem is driving me insane.
I can't get my font-type to load for mobile and IE.
My site is http://kays.vurb.us/
I am talking about the hamburger icon when in responsive mode. It uses the letter 'a' with a special font 'etmodules'.
This is how my css looks like:
#font-face {
font-family: 'etmodules';
src: url('etmodules_v2_4.eot');
src: url('etmodules_v2_4.eot?#iefix') format('embedded-opentype'),
url('etmodules_v2_4.woff2') format('woff2'),
url('etmodules_v2_4.woff') format('woff'),
url('etmodules_v2_4.ttf') format('truetype'),
url('etmodules_v2_4.svg#etmodules_v2_4regular') format('svg');
font-weight: normal;
font-style: normal;
}
I put the files in my main wordpress directory. I don't know what I am doing wrong. Since it doesn't work on IE and mobile I tried looking at the IE developer tools but I can't figure out why the font won'
t download or load on the site. Please help me :(
Create a new folder called fonts or any name you want inside your theme folder, then upload your font files inside that folder
Then use absolute path e.g
src: url(http://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf);
I'm using a new CDN and recently I made a google font for my website menu. Now I activated the CDN, but the "custom font" shall I say is not appearing. All images, files and css are OK. Only this custom font.
I have this in the style.css (I have the fonts stored in my server).
#font-face {
font-family: 'Droid Arabic Kufi Bold';
src: url('DroidKufi-Bold.eot');
src: url('DroidKufi-Bold.eot?#iefix') format('embedded-opentype'),
url('DroidKufi-Bold.woff') format('woff'),
url('DroidKufi-Bold.ttf') format('truetype');
font-weight: normal;
font-style: normal;}
#font-face {
font-family: 'Droid Arabic Kufi Bold';
src: url('DroidKufi-Bold.ttf');
My website is http://www.formulawahad.com // Is there a fix for that?
Thanks a lot.
This issue is maybe related to CORS. Your CDN provider need to enable cross-origin resource sharing (CORS). This will set the header to: Access-Control-Allow-Origin “*”. Otherwise is the content rejected.
I am using YanoneKaffeesatz Font in my wordpress website. So to use this font first I generated code from FontSquirrel. Then I got this piece of code
#font-face {
font-family: 'yanone_kaffeesatz_lightRg';
src: url('yanonekaffeesatz-light-webfont.eot');
src: url('yanonekaffeesatz-light-webfont.eot?#iefix') format('embedded-opentype'),
url('yanonekaffeesatz-light-webfont.woff') format('woff'),
url('yanonekaffeesatz-light-webfont.ttf') format('truetype'),
url('yanonekaffeesatz-light-webfont.svg#yanone_kaffeesatz_lightRg') format('svg');
font-weight: normal;
font-style: normal;
}
Then I paste the code in my css file and paste all the converted fonts(.otf,.svg, .ttf) in my website folder but still my font has not been changed. So can some one tell me why this is happening?
Any help and suggestions will be highly appreciable.
Are the font files in the same dir as your stylesheet? You're currently pointing to that dir. Paths in CSS are relative to the stylesheet, not the root.
root
-css/styles.css
-images/
-fonts/
index.html
With the above structure you would use this as your URL.
url('../fonts/your_font.font;);