I’ve seen some new websites that are using custom fonts on their sites (other than the regular Arial, Tahoma, etc.). And they support a nice amount of browsers. How does one do that? While also preventing people from having free access to download the font, if possible. 8 Answers 8
The following code works in Google Chrome beta as well as IE 7. However, Firefox seems to have a problem with this. I’m suspecting it to be a problem of how my CSS files are included, cause I know Firefox is not too friendly about cross-domain imports. But this is all just static HTML and … Read more
I have to import the Klavika font and I’ve received it in multiple shapes and sizes: Klavika-Bold-Italic.otf Klavika-Bold.otf Klavika-Light-Italic.otf Klavika-Light.otf Klavika-Medium-Italic.otf Klavika-Medium.otf Klavika-Regular-Italic.otf Klavika-Regular.otf Now I would like to know if it’s possible to import those into CSS with just one @font-face-query, where I’m defining the weight in the query. I want to avoid copy/pasting … Read more
This is the usual SVG mime type: image/svg+xml And it works great. However, when embedding an SVG font, chrome tells you the mime type is incorrect, obviously because you return a font instead of an image. Is there any universal mime type? is chrome wrong? is application/svg+xml accepted somehow? I guess this is still a … Read more
I want to create a close button using CSS only. I’m sure I’m not the first to do this, so does anyone know which font has an ‘x’ the same width as height, so that it can be used cross-browser to look like a close button? 18 Answers 18
I noticed this info log began to appear in Google Chrome Dev (Version 55.0.2883.18 dev) and I can’t imagine why. Slow network is detected. Fallback font will be used while loading: http://font-path.extension` It appears on all websites that use font-face, even on local pages and Chrome extensions. 18 Answers 18
In CSS3 font-face, there are multiple font types included like ttf, eot, woff, svg and cff. Why should we use all of these types? If they are special to different browsers, why is the number of them greater than the number of the major web browsers? 3 Answers 3
I have some fonts being configured in my Scss file like so: @font-face { font-family: ‘Icomoon’; src: asset-url(‘icoMoon.eot?#iefix’, font) format(’embedded-opentype’), asset-url(‘icoMoon.woff’, font) format(‘woff’), asset-url(‘icoMoon.ttf’, font) format(‘truetype’), asset-url(‘icoMoon.svg#Icomoon’, font) format(‘svg’); } The actual font file are stored in /app/assets/fonts/ I have added config.assets.paths << Rails.root.join(“app”, “assets”, “fonts”) to my application.rb file and the compile CSS source … Read more
I’m using @font-face on my company’s site and it works/looks great. Except Firefox and Chrome will throw a 404 error on the .woff file. IE does not throw the error. I have the fonts located at the root but I’ve tried with the fonts in the css folder and even giving the entire url for … Read more
I’m looking at the MDC page for the @font-face CSS rule, but I don’t get one thing. I have separate files for bold, italic and bold + italic. How can I embed all three files in one @font-face rule? For example, if I have: @font-face { font-family: “DejaVu Sans”; src: url(“./fonts/DejaVuSans.ttf”) format(“ttf”); } strong { … Read more
