I need to import true type font locally for my webside.
For remote fonts I'm always using
#import url('https://example');
but not sure how to import it from files.
I believe it's very simple but I wasn't able to find and good result.
Thank you
If you don't have a local .ttf font, go to a webfont conversion site, I like this one https://onlinefontconverter.com/
Select the output formats you need, I would recommend selecting .eot , .woff , and svg along with your .ttf for cross browser compatibility.
Then in your scss, use something like this to import all versions of that font for cross browser coverage.
Update: Just using formats woff + woff2 will have you covered for all modern browsers and devices
Don't forget to add fallback fonts just incase.
#mixin font($font-family, $font-file) {
#font-face {
font-family: $font-family;
src: url($font-file+'.eot');
src: url($font-file+'.eot?#iefix') format('embedded-opentype'),
url($font-file+'.woff') format('woff'),
url($font-file+'.ttf') format('truetype'),
url($font-file+'.svg#'+$font-family) format('svg');
font-weight: normal;
font-style: normal;
}
}
#include font('Arvo', '/htdocs/lib/fonts/Arvo');
#include font('Arvo-Bold', '/htdocs/lib/fonts/Arvo-Bold');
h1 {
font-family: Arvo-Bold, Arial-bold, arial, sans-serif;
}
<h1>Hey Look! A headline in Arvo bold!</h1>
Related
I am working on a CodeIgniter project. I need to add a custom font family in CodeIgniter which will be used in over all project. I have downloaded the font files of ttf, eot and wof. I have added these files in the font folder in CodeIgniter then i have updated the style.css file in asset with #font-face. I have declared the font family name for the body and other tags but it's working I'm not sure where did I go wrong.
This is the font face I have added in the style.css file in asset folder.
#font-face {
font-family: 'Poppins';
src: url('../font-awesome/fonts/Poppins-Black.eot');
src: local('../font-awesome/fonts/Poppins Black'), local('Poppins-Black'),
url('../font-awesome/fonts/Poppins-Black.eot?#iefix') format('embedded-opentype'),
url('../font-awesome/fonts/Poppins-Black.woff') format('woff'),
url('../font-awesome/fonts/Poppins-Black.ttf') format('truetype');
font-weight: 900;
font-style: normal;
}
body {
font-family: 'Poppins', sans-serif;
font-size: 16px;
font-weight: 300;
color: #888;
line-height: normal;
text-align: center;
}
you can create a template.php file to use all over your project then add your style link in there:
<link rel="stylesheet" href=<?php echo base_url('css/style.css'); ?>>
The structure of your project may be like this:
/application
/controllers
/models
/views
/css
/font-awesome
style.css (you should change the urls inside this file base on your structure)
/system
Make sure you load html helper to use base_url function
Another way is using the html helper in here
I want to add font-family to another language which I'm using in my ionic 4 app. I tried
#font-face {
font-family: 'SINHA Sithumina 2012';
font-style: normal;
font-weight: normal;
src: url('./assets/font/SINHA Sithumina 2012.ttf');
}
and use it in html css class. Can someone help me with this?
#kavindhi
First thing first you should do to convert you .ttf font family into .otf.
https://convertio.co/ttf-otf/
Then add your font's into assets folder.
Then you should add into into global.scss or add custom file like fonts.scss
Then add this into your font file
#font-face {
font-family: "SolitaireMVBPro-Regular";
src: url("assets/fonts/SolitaireMVBPro-Regular.otf");
}
So it'll be available for you into your ionic 4 pages
font-family: SolitaireMVBPro-Regular;
Finally, I have solved the issue by referring https://www.w3.org/International/questions/qa-css-lang.en which mention by #marblewraith.
So basically I have to mention my words in utf and it will convert my fonts.
Before I begin, I'm a designer, not a coder.
I've successfully created an HTML signature with custom hosted fonts using #font-face, however, once I send the email and receive a reply, the font formatting is lost. It defaults back to Arial or whatever.
here's my code, am I doing something wrong?
I've listed the font family name as `sfd'. I can't remember if this is the actual name, or if it's just an alias I created.
<body>
<style type="text/css">
#media screen {
#font-face {
font-family: 'sfd';
src: url('http://archive.friendthemagazine.com/email_signature/studiofrontdesk-regular-webfont.woff2') format('woff2'),
url('http://archive.friendthemagazine.com/email_signature/studiofrontdesk-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
}
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>
You are not doing anything wrong. The font you are using (studiofrontdesk-regular-webfont) is a web fonts, there are only a handful of devices that read/render web fonts. Below is a list for you.
Apple Mail
Outlook for Mac
iOS
Source: List updated 20th September 2021
Only these email clients will show the web fonts and the rest will read the fall back font. Add the fallback fonts (Arial etc) to your font family.
One method I use for my emails is to have the web font and the below code specifically for Outlook.
<!--[if gte mso 9]>
<style>
table, table td{font-family:Arial, Helvetica, 'sans-serif' !important;}
</style>
<![endif]-->
When emails are replied, the fonts that are on the users system or default to Outlook are used.
Your font is not a downloaded font. So once you send it, it is indeed gone. What you could try is downloading the font, place the file inside the directory you are in now. And put the name of the downloaded font inside your source.
Like this:
#font-face {
font-family: fontname;
src: url('fontname.otf');
}
Hope this helped!
Please, looking for a tutorial or explanation that can guide me how to add custom icons to ionic framework. Tried a lot to use custom icons however couldn't understand how the framework make use of the icons in order to use them.
You can add your own icons including custom fonts in your project generated from sites like Icomoon, Fontello or similar.
From these sites you can download a pack with font files (ttf, svg, ...) and relating CSS file. Generally they provide also a demo.html.
It's often necessary to customize the CSS in order to avoid overlapping to Ionicons. For example a CSS could be similar to the following:
#font-face {
font-family: 'myicons';
src:url('../fonts/myicons.eot');
src:url('../fonts/myicons.eot') format('embedded-opentype'),
url('../fonts/myicons.ttf') format('truetype'),
url('../fonts/myicons.woff') format('woff'),
url('../fonts/myicons.svg') format('svg');
font-weight: normal;
font-style: normal;
}
.icon-camera:before {
font-family: 'myicons';
content: "\e607";
}
.icon-video-camera:before {
font-family: 'myicons';
content: "\e608";
}
.icon-price-tag:before {
font-family: 'myicons';
content: "\e609";
}
I'm embedding fonts on a mobile website using #font-face (css from FontSquirrel). When I preview in desktop Safari or Chrome, the fonts embed fine, but they don't appear in mobile Safari on the iPhone/iPad. I'm not getting any errors and I can't figure out what's going wrong. Here's my CSS. Any ideas?
#font-face {
font-family: 'JottingRegular';
src: url('../fonts/jotting_regular-webfont.eot');
src: local('☺'),
url('../fonts/jotting_regular-webfont.woff') format('woff'),
url('../fonts/jotting_regular-webfont.ttf') format('truetype'),
url('../fonts/jotting_regular-webfont.svg#webfonttEfFltbI') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'JottingBold';
src: url('../fonts/jotting_bold-webfont.eot');
src: local('☺'),
url('../fonts/jotting_bold-webfont.woff') format('woff'),
url('../fonts/jotting_bold-webfont.ttf') format('truetype'),
url('../fonts/jotting_bold-webfont.svg#webfontJpUFTHYS') format('svg');
font-weight: normal;
font-style: normal;
}
OK, I figured it out and will document for anyone who has this problem in the future. I had copied the CSS from Font Squirrel and then I had needed to redownload the actual font files later on. I didn't think that would change anything in the CSS, but it turns out that SVG fonts (which are used by mobile safari) all have an ID that is referenced in the font file and the CSS.
So, in:
url('../fonts/jotting_regular-webfont.svg#webfonttEfFltbI') format('svg')
webfonttEfFltbI is the font id. I opened the SVG font file in a text editor and found the new ID in the following line near the top of the file:
<font id="webfontC6xdxB57" horiz-adv-x="972" >
Replacing the id after the hash tag in the CSS fixed the problem.
I was having this same situation. I resolved it by updating the paths to the font. Even though Chrome & Safari were loading them fine, iOS wasn't recognizing my path which was
url ('font/chunkfive/font.eot')
I changed that line to include a / to the beginning of the font path and that fixed everything.
url ('/font/chunkfive/font.eot')
You could also try using an absolute path.
Font face isn't supported on MobileSafari until iOS 4.2.
I had been working with this for a hour before realizing my stupid mistake.
Mobile Safari is CASE SENSITIVE for the fonts, while Desktop Safari is not.
If your font is titled: font.svg, you must add it exactly like it is. If you add it with a Capital F, Desktop Safari won't care, but mobile will.
This has already been solved, but I had a similar problem here:
#font-face not working in mobile Webkit
For me, all the IDs on the SVG fonts were correct; it was the FontSquirrel syntax that was wonky. Using the updated FontSpring bulletproof syntax fixed the issue for me, and seems to work entirely cross-browser.
Font face does work on mobile safari, i am using on iphone 3. I also copied the code from font squirl but it didn't work. Here is the updated code. Use this and it will work everywhere.
#font-face {
font-family: 'MyriadProBoldCondensed';
src: url('/fonts/myriadpro-boldcond-webfont.eot#') format('eot'),
url('/fonts/myriadpro-boldcond-webfont.woff') format('woff'),
url('/fonts/myriadpro-boldcond-webfont.ttf') format('truetype'),
url('/fonts/myriadpro-boldcond-webfont.svg#MyriadProBoldCondensed') format('svg');
font-weight: normal;
font-style: normal;
}