I want to set custom font to my application using Codeigniter.
I have set it but i think my url path is wrong.
font Path :
localhost/example/user_assets/myfont.ttf
I am doing this :
#font-face {
font-family: myFont;
url('/user_assets/user_assets/myfont.woff2') format('woff2'),
url('/user_assets/user_assets/myfont.woff') format('woff'),
url('/user_assets/user_assets/myfont.ttf') format('truetype'),
}
body {
background: #FFFFFF;
color: #2d2d2d;
font-family: 'myFont';
}
Related
Seems this question has been posted a few times, but posting here again because I couldn't find anything useful for my issue :(
I am using wkhtmltopdf to generate pdf files from HTML views. I have added custom fonts in the site. The rendered HTML view looks great. But the CSS styles aren't applied in the PDF properly.
My CSS
#font-face {
font-family: 'MyFont';
src: url('fonts/MyFont-Light.otf') format('opentype'),
url('fonts/MyFont-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
#font-face {
font-family: 'MyFont';
src: url('fonts/MyFont-Regular.otf') format('opentype'),
url('fonts/MyFont-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
body {
font-family: 'MyFont', Helvetica, Arial, sans-serif;
font-weight: 300;
}
h1 {
font-weight: 400;
}
HTML View
PDF View
Can someone please help me resolve this issue? Thanks in advance.
So I want to import font using CSS.
I know how to work with {{ asset('')}} in twig/html pages ! but I don't know how to do that in a CSS file!
The current css file code is :
#font-face {
font-family: 'porta';
src: url("../fonts/pluton.eot?49924914");
src: url("../fonts/pluton.eot?49924914#iefix") format("embedded-opentype"),
url("../fonts/pluton.woff?49924914") format("woff"),
url("../fonts/pluton.ttf?49924914") format("truetype"),
url("../fonts/pluton.svg?49924914#porta") format('svg);
font-weight: normal;
font-style: normal;
}
What I did :
#font-face {
font-family: 'porta';
src: url("{{ asset('../fonts/pluton.eot?49924914') }}");
src: url("{{ asset('../fonts/pluton.eot?49924914#iefix') }}") format("embedded-opentype"),
url("{{ asset('../fonts/pluton.woff?49924914') }}") format("woff"),
url("{{ asset('../fonts/pluton.ttf?49924914') }}") format("truetype"),
url("{{ asset('../fonts/pluton.svg?49924914#porta') }}") format("svg")
font-weight: normal;
font-style: normal;
}
I added asset like that but it didn't work ! So how to properly add CSS files?
asset() is a twig function, you can't use twig functions in css files. if you want to bundle your resources like images, fonts, css, js etc use webpack for example or if you are using php >= 7.1 use webpack encore
I have already asked and played around with this question on Laravel discussions here (https://laracasts.com/discuss/channels/code-review/linking-to-custom-font-file-from-a-stylesheet-inside-a-blade-template). moving the file back to the stylesheet and removing the asset in the link the did not. I am trying to import custom fonts into my website, but because of Laravel's router, I can't directly link to the font files in my CSS. how can I get my custom fonts to display in the browser? So far, this dosent work:
#font-face { font-family: NexaBold; src: url('{!! asset('build/fonts/NexaBold.otf') !!}'); }
#font-face { font-family: NexaLight; src: url('{!! asset('build/fonts/NexaLight.otf') !!}'); }
#font-face { font-family: OpenSans; src: url('{!! asset('build/fontsOpenSans-Regular.ttf') !!}'); }
I tried replacing asset with public_path but that didn't work either. How do I get my fonts to display using the Laravel blade engine?
You can put your fonts in this directory /storage/app/public/fonts, so they can be accessible from the frontend:
This is how you can import them:
#font-face {
font-family:'NexaBold';
src: url('/fonts/NexaBold.otf') format('otf');
font-style: normal;
font-weight: normal;
}
#font-face {
font-family:'NexaLight';
src: url('/fonts/NexaLight.otf') format('otf');
font-style: normal;
font-weight: normal;
}
#font-face {
font-family:'OpenSans';
src: url('/fonts/OpenSans-Regular.ttf') format('ttf');
font-style: normal;
font-weight: normal;
}
Than to style some elements:
body{
font-family: NexaLight,Arial,Helvetica,sans-serif;
}
h1, h2{
font-family: NexaBold,Arial,Helvetica,sans-serif;
}
Error getting in website
#font-face {
font-family: 'icomoon';
src:url('icon-fonts/icomoon.html');
src:url('icon-fonts/icomoond41d.html?#iefix') format('embedded-opentype'),
url('icon-fonts/icomoon-2.html') format('truetype'),
url('icon-fonts/icomoon-3.html') format('woff'),
url('icon-fonts/icomoon.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
How to over come this error?
EDIT:
I have used this code and it don't shows any icon display even in local system
#font-face {
font-family: 'icomoon';
src:url('icon-fonts/icomoon.eot');
src:url('icon-fonts/icomoon.eot?#iefix') format('embedded-opentype'),
url('icon-fonts/icomoon.woff') format('woff'),
url('icon-fonts/icomoon.ttf') format('truetype'),
url('icon-fonts/icomoon.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
Suggest me what to do now?
You're using the wrong syntax.
You're supposed to link to the actual font files...not pages
It should look something like this:
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
I want to added custom font in my app, but it does not work.
Here it is path when font located
#font-face { font-family: PF Din Text Cond Pro;
src: url('/fonts/JtNLnKEa.ttf'); }
font located in system/fonts/JtNLnKEa
UPD
#font-face {
font-family: PF Din Text Cond Pro;
src: url('http://contrast-energo.ru/fonts/JtNLnKEa.ttf');
}
body,html {
font-family: PF Din Text Cond Pro;
height: 100%;
min-height: 100%;
margin-top: 0px;
}
How fix?
Sorry for my bad English
Add your font a directory accessible to your CodeIgniter.
#font-face {
font-family: 'YourFontName'; /*a name to be used later*/
src: url('http://domain.com/fonts/JtNLnKEa.ttf'); /*URL to font*/
}
And use your font name like:
.classname {
font-family: 'YourFontName';
}
EDIT:
body,html {
font-family: "PF Din Text Cond Pro"; /* Add double quotes around your custom font name */
height: 100%;
min-height: 100%;
margin-top: 0px;
}
#font-face {
font-family:'Lucida Grande';
font-style: normal;
font-weight: 100;
src: url(../fonts/6216.ttf) format('ttf');
}
#font-face {
font-family:'Myriad Set Pro';
font-style: normal;
font-weight: 100;
src: url(../fonts/myriad.woff) format('woff');
}
#font-face {
font-family:'Helvetica Neue';
font-style: normal;
font-weight: 100;
src: url(../fonts/helvetica-neue-medium.ttf) format('ttf');
}
#font-face {
font-family:'Roboto';
font-style: normal;
font-weight: 100;
src: url(../fonts/helvetica-neue-medium.ttf) format('ttf');
}
body
{
font-family:"Myriad Set Pro","Lucida Grande","Helvetica Neue","Helvetica","Arial","Verdana","sans-serif";
overflow-x:hidden !important;
}
in root folder assets/css/fonts
your appliation structuer should be like this
- application
- system
- assets
- css
- js
- fonts
etc..
then your access url should be like http://contrast-energo.ru/assets/fonts/JtNLnKEa.ttf
Your problem isn't related to CodeIgniter. You have a problem in the CSS/HTML.
You need to use the following CSS code to add properly your fonts to a HTML document:
#font-face {
font-family: 'PF Din Text Cond Pro';
src: url('fonts/PF-Din-Text-Cond-Pro.eot');
src: url('fonts/PF-Din-Text-Cond-Pro.woff') format('woff'),
url('fonts/PF-Din-Text-Cond-Pro.ttf') format('truetype'),
url('fonts/PF-Din-Text-Cond-Pro.svg') format('svg');
font-weight: normal;
font-style: normal;
}
The custom font will be displayed on all the browsers.
In case you want to assign the font to the body element, you can use the following:
body {font-family:'PF Din Text Cond Pro', Arial, sans-serif;}
You need to add the font name between single quotes or double quotes, because it's a custom font.
In case you have only a ".otf" or ".ttf" font file, then you need to convert this file to the other formats.
Online Font Converter is the best free font converter out there.
Try this:
Font name has case sensitive. Use font file name with correct case sensitive.
My font file name is Prata-Regular_0.ttf
So i type this:
#font-face {
font-family: 'Prata-Regular_0';
src: url("http:// YOUR DOMAIN .com/assets/fonts/Prata-Regular_0.ttf");
}
Not like this:
#font-face {
font-family: 'Prata-Regular_0';
src: url("http:// YOUR DOMAIN .com/assets/fonts/prata-regular_0.ttf");
}
It works guys...