In case someone want the placeholders selectors for all browsers : .mainLoginInput::-webkit-input-placeholder { font-family: ‘myFont’, Arial, Helvetica, sans-serif; } .mainLoginInput:-ms-input-placeholder { font-family: ‘myFont’, Arial, Helvetica, sans-serif; } .mainLoginInput:-moz-placeholder { font-family: ‘myFont’, Arial, Helvetica, sans-serif; } .mainLoginInput::-moz-placeholder { font-family: ‘myFont’, Arial, Helvetica, sans-serif; }
@font-face { font-family: ‘DroidSerif’; src: url(‘DroidSerif-Regular-webfont.ttf’) format(‘truetype’); font-weight: normal; font-style: normal; } @font-face { font-family: ‘DroidSerif’; src: url(‘DroidSerif-Italic-webfont.ttf’) format(‘truetype’); font-weight: normal; font-style: italic; } @font-face { font-family: ‘DroidSerif’; src: url(‘DroidSerif-Bold-webfont.ttf’) format(‘truetype’); font-weight: bold; font-style: normal; } @font-face { font-family: ‘DroidSerif’; src: url(‘DroidSerif-BoldItalic-webfont.ttf’) format(‘truetype’); font-weight: bold; font-style: italic; } From the tutorial: http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/
I found a solution after wondering why IE doesn’t suffer from this problem. Firefox and Chrome/Safari triggers the DOMContentLoaded event before font-face is applied, thus causing the problem. The solution is to not listen for DOMContentLoaded but instead go oldschool and listen to onreadystatechange and wait until the document.readyState === ‘complete’ which is always triggered … Read more
I made the following changes and I got the result Quotation marks for font-family Using of URL instead of local Changing of “\” to “https://stackoverflow.com/” Note: Use of the local css function throws an error in the developer console saying resource is not loaded. See the modified code below. <!DOCTYPE html> <html> <head> <style> @font-face … Read more
You just need one font file in web open font format. Go to http://www.fontconverter.org to convert your OpenSymbol.tff to OpenSymbol.woff. I am a cross-platform developer and i tested this works okay on: Safari 10.1 and Firefox 52.0.2 on macOS 10.12.4 (iMac) Internet Explorer 11.0 and Firefox 52.0.1 and Google Chrome 52.0 and Opera 53.0 on … Read more
The issue here is not line height but vertical placement of glyphs, in particular the location of the text baseline. That’s something that the font designer has decided on; the designer draws glyphs and places them in the em square, the conceptual device that has height equal to (or defined to be) the font height. … Read more
I’ve written a Python2 script with fontforge library does the following: Accepts a source font Accepts a file containing all characters to be used. It can be a translation file, string asset file, HTML file, etc. Output a font with characters that aren’t shown in the file removed Here is the code: #!/usr/bin/python2 import sys … Read more
As usual, different browsers have different needs. Here is a cross browser @fontface declaration, taken from the Paul Irish blog – @font-face { font-family: ‘Graublau Web’; src: url(‘GraublauWeb.eot’); src: local(‘☺’), url(‘GraublauWeb.woff’) format(‘woff’), url(‘GraublauWeb.ttf’) format(‘truetype’); } .eot is for IE, the rest of the browsers use either .woff or .ttf If you need to generate the … Read more
Looks like it’s a CSS issue and you need overflow-wrap: break-word;
Have you tried putting the font family name in single quotes? The following works just fine for me. @font-face { font-family: ‘cblockbold’; src: url(‘assets/fonts/creabbb_-webfont.eot’); src: url(‘assets/fonts/creabbb_-webfont.eot?#iefix’) format(’embedded-opentype’), url(‘assets/fonts/creabbb_-webfont.woff’) format(‘woff’), url(‘assets/fonts/creabbb_-webfont.ttf’) format(‘truetype’), url(‘assets/fonts/creabbb_-webfont.svg#CreativeBlockBBBold’) format(‘svg’); font-weight: normal; font-style: normal; } To use font as a mixin, try: .ffbasic() { font-family: ff-basic-gothic-web-pro-1,ff-basic-gothic-web-pro-2, AppleGothic, “helvetica neue”, Arial, sans-serif; } … Read more