I used Icomoon to create a special glpyh for a logo so it will always display in emails, but I cant figure out how to get it to display... I linke the font in my CSS by using
CSS:
#font-face {
font-family: "Cog";
src: url(http://oddmachine.com/links/Cog.ttf) format("truetype");
}
The code I recieved from icofont was U+e600
HTML:
<span style="font-family: Cog;">&#e600;</span>
Can anyone help me out here?
Im pretty sure you didn't use the url correct. Try
src: url('http://oddmachine.com/links/Cog.ttf') format("truetype");
My bad. I was thinking I could use a character code to insert the Icon, but rather I had to create a class and use that to display the character. I was searching in the wrong places the first time through.
If you only have one glyph in your .ttf you might want to try including it as a data uri rather than making a request #font-face
Check out this page with some explanation.
https://css-tricks.com/data-uris/
If you're including the entire font-set then I wouldn't recommend doing this, as it will make your email so large it will truncate some clients.
Related
I am using 1st-time #font-face and facing some issue that my form label need two languages (1) English and (2) Hindi
I want the content of the text box in Hindi instead of the English alphabet.
For Hindi font I made below CSS added external CSS font but it's not coming on my form, then I called my class into my HTML but HTML is taking junk values, I don't know where I doing some mistakes please suggest me a solution.
#font-face {
font-family: hindi !important;
font-style: normal;
font-weight: 400;
src: url('file:///C:/Users/Tapas/Desktop/java%20script/es6/Kruti_Dev_010.ttf');
}
.lang-hindi {
font-family: hindi !important;
}
<p class="lang-hindi"> kaise ho</p>
I am expecting the Hindi alphabet as an output but it's showing only the English alphabet, can anyone please help me with the solution.
go to this site: https://www.web-font-generator.com/
upload your (Kruti_Dev_010.ttf) generate the web font
download generated font there will be CSS file in download files along with .woff, .svg, .eot and .ttf files as well
copy CSS style and correct file paths then use it into you web page
To use kruti dev font you cannot type the text like 'kaise ho' you need to use hindi keyboard layout to type -
so for example if you want to write
then you will in your html you will write - 'lkoZtfud izU;kl efUnj Jh egkdkys'oj '
You can better use Google Fonts, https://fonts.google.com/
Select your font over there, and add this to your web-page.
The answer you are looking for is a bit difficult but you can write whatever your desired text using google font and it will work on all browsers.
so im having trouble linking my font (that i prefer to keep in a separate folder since its from the internet) from my css stuff. I was able to successfully link the font when i put it in the same folder as my style.css. i would like to keep my files separate like this:
Project4Root
↳index.html
↳css(folder) -> style.css, ↳fonts(folder) ->TESLA.tff
or
Project4Root
↳index.html
↳css (folder)
->style.css
↳fonts(folder)
->TESLA.tff
in the style.css when i use #font-face, how would i write the url for either? i dont know how the url would be.
#font-face { font-family: "Tesla"; src: url(WHAT DO I PUT HERE);}
the only other way i can think of that I can do to use this font is to create a separate style.css in the font folder and then link that to the html. any help would be appreciated. My apologies if this a silly question.
#font-face {
font-family: "Tesla"; src: url( '../fonts/TESLA.ttf' );
}
That ../ is equal to go up one level, and it's equal to going back in your GUI. I hope I understand your question right.
Hi guys I have a question
I want to use FuturaPtBook, but it isn't displayed in html as the real font.
What can I do ?
<span></span> Hello
You can use the #font-face rule.
Either obtain or create your custom font file.
Upload the font file(s) to your server under your Web root.
Add this code to either your CSS or <style> tags in the HTML header:
#font-face{
font-family: Futura Book;
src: url('the URL the file should be downloaded from');
}
Is there a way in HTML or Angular to show some text if an emoji is missing? For instance, the thinking face emoji is missing in Windows 8, so I was hoping to show some alternative text if possible.
The emoji code is 🤔
My HTML is simple:
<div ng-switch-when="folder"
ng-bind-html="Some text 🤔">
</div>
I would recommend to use #font-face to import a font that you know contains the required unicode characters. Then, you can either use that font for all of the affected paragraphs, or just for the "emojis" by using the unicode-range descriptor.
Example:
#font-face {
font-family: 'Someemojifont';
src: url('some-emoji-font.otf');
unicode-range: U+1F914; /* thinking face */
}
I understand that this isn't an exact answer to the question at hand, but it might still be a valid solution to the problem that motivated the question.
I have some custom icons that I want to use as a webface font:
However, I can't seem to get them displayed.. All I get to see is the corresponding letter ('a' and 'f'). As shown here You'll also see the working example of the font 'socialico'
Use #font-face In the past I had lots of troubles with font-face but if you type it out right it works fine:
#font-face {
font-family: 'Custom Font Name';
font-style: normal;
font-weight: 400;
src: url(linktofont.com/font.ttf) format('truetype');
}
Replace "Custom Font Name" with what you would like your font to be named when using CSS. and replace "linktofont.com/font.ttf" with the path to the font.
EDIT
Sorry, I read that wrong, I found the problem. If you look at your #import
#import url (http://pastebin.com/raw.php?i=sc4rCApa);
You have a space between "url" and your path, so reaplace it with:
#import url(http://pastebin.com/raw.php?i=sc4rCApa);
I had the same issue - and all my syntax was correct. I was instructed by a friend that it may be the font itself that was broken or incorrect. Here's how it was resolved:
(1) Used original font downloaded from fontfabric.com
(2) Went to www.fontsquirrel.com to generate a new font kit... including the css
(3) Uploaded fonts generated from FontSquirrel
(4) Replaced my CSS with the css generated from FontSquirrel for the #font-face section
(5) Updated the name of the font that is called for later in the CSS
and that was it.... worked like a charm!