I have a .otf font that won't load on any browser. I feel I've followed the #font-face rule so I'm very confused. It's on my portfolio site at the bottom, the social media buttons. They read as a f and an i but they should be a facebook and linkedin icon. Any ideas? Thanks
my portfolio site
Font Squirrel has a fantastic generator.
http://www.fontsquirrel.com/fontface/generator
I'd recommend using it to generate your CSS.
Your resources aren't pulling up the socialico.otf font... Make sure it's in the right directory.
see: http://wrobbins.me/fonts/socialico.otf (404)
Your font url appears as not found for me too, so I did a quick Google and This sounds similar to your problem. Could be that you need to tell your site how to handle that particular file extension.
In Chrome it says your font url isn't found.
Edit
I googled and this answer mentions it being a server problem.
Related
I am putting together an email template which includes the Montserrat font; however, it seems to render just about everywhere without issue except for gmail via a browser (Firefox/Chrome)!
The font renders as it should in my previews, iPad (mail), and Android (gmail). Has anyone come across this issue or is able to confirm that this font is disallowed via the web client to Gmail?
I have tried both the font-family (as per the Google Font's site instructions) and import methods of including the font with similar results as mentioned above.
Thank you in advance!
Gmail does not work with web fonts like Google fonts. Lack of web font support is an issue with desktop Outlook 2007-2019 as well.
You will need to choose a web safe font as a backup. I created a list of supported fonts:
https://jsfiddle.net/wallyglenn/s94weLqj/
Good luck.
Stackoverflow wants posted code before I could post the link
of fonts that work in Gmail I maintain on JSFiddle.
I felt a list of fonts might be useful in choosing a fallback font.
font-face property will not work in web gmail.. use font-family instead. you can visit below link to check which css property works in mail for email template. hope this helps . thanks
https://www.campaignmonitor.com/css
I need help please, I'm using a Custom font for my new website design which I had to do download. On my computer website looks good with this new font. Unfortunately it is not the case for any other user who did not download this custom font.
pls see: www.vanessawiacekwebs.com
I have tried use Font Face but it does not work and I do not know why ?
Font: Marathon II; http://ufonts.com/q177208
Thank you,
You're incorrectly directly linking to the font source.
Your incorrect CSS code:
#font-face {
font-family: Marathon II;
src: url(http://ufonts.com/q177208);
}
You need to download the fonts, upload them to your file directory and then use the #font-face rule to link to font files.
A multitude of beginner's tutorials exist online: https://css-tricks.com/snippets/css/using-font-face/
There is an easy way and a hard way. The easy way is to use Google Fonts. Web Fonts were a huge PITA, and Google Fonts makes it easy.
https://www.google.com/fonts
There are other options, but after 20 years of web development, this is the only solution I use.
For some reason, I can't seem to get the Slideshare icon (f1e7) to work.
Every other icon in the font seems fine - and I made sure my installed fonts were all from the latest 4.2 archive.
Any ideas?
TIA,
Adam.
I'm having the same issue currently. I think this may be an issue with the font files, because when I comment out the sources so only the .svg is used, the icon shows up fine.
Until the issue is resolved, I would recommend using the .svg of the slideshare icon, and implementing it using icomoon.
Does anyone know about the current situation with Google Fonts rendering in Chrome? I've read through tonnes of posts and outdated solutions that no longer work, and it seems that the latest best solution is to use Font Squirrel to get the Google Font and then link the SVG format first so that Chrome uses it. But apparently SVG font rendering is glitchy/inconsistent/unreliable in other ways. Is there a good alternative?
Currently the only fix seems to be reordering SVG in the #font-face CSS code, which you mentioned. The 'glitching' you're referring to seems to be fixable by using a media query trick outlined in the following post. https://stackoverflow.com/a/14345363/1490006
When you use google fonts, use property font-weight in your CSS. I had this problem with font rendering on my chrome browser. After I have setup this property problem has gone.
I am having an issue with customizing a WordPress template.
When I try to apply a Google Web font to a phone number in the header (as in dev [dot] beyondbbd [dot] com), Google fonts don't seem to be applied to the phone number (or all across the site for that matter) in IE9.
Any ideas about this? Is there an easy fix that I'm missing?
Thanks in advance.
-Nick
Try rearranging your css files so that the Google stylesheet comes before your own stylesheet which calls the fonts.