I am using HTML2PDF and so far am having great results. I have stumbled upon a problem that I am wasting lots of time trying to solve.
I am using HTML2PDF v4.0 and I have managed to set the default font for my PDF's to a ttf font that I converted (into 3 files, .z .php and .ufm) These files were placed into the TCPDF fonts directory and the system recognizes them and the final PDF is generating with the correct font.
Now, the style guide I am working from specifies 2 different fonts. I need to use ANOTHER ttf font (also converted and placed into the TCPDF folder and verified by setting it as the default font)
I am having trouble finding a strategy for implementing this scenario into HTML2PDF. I am about to go down the road of splitting the ob_start() buffering into sections for each required font, then re-setting the font between outputs. A simple CSS class would be so much easier but I am unable to get this to work as expected.
After half a day of head scratching over this I managed to finally get it to work.
I have converted both of the ttf fonts using the web utility I mentioned in the question above. Then I was able to set a default font for the whole page using
$html2pdf->setDefaultFont("helvetica45light");
Then when I need to use the other font I just set an inline style similar to the following
<span style="font-family:helvetica65medium">some text here</span>
I went 1 step further, and created the classes as I was originally hoping for.
<style>
.helvetica65medium{
font-family:helvetica65medium;
}
.helvetica45light{
font-family:helvetica45light;
}
</style>
now I can just set the class of the text that I want in either of the defined fonts.
I guess I will count that as a lesson learnt
Related
I am absolutely a novice in the field of html / css programming. I have a font file with extension .woff etc. I know, I may upload it on a server and later on use it with the help of css files generated from tools like fontsquirrel. However, I want to explore the option of getting the font into simple html or css codes so that I may use it on forums like blogger without having to host the font file elsewhere. Is it technically possible? Thank you.
I've been using Font Awesome for a little bit on some of my projects and I have created a bunch of my own icons that I can link locally without a problem; however, I want to be able to link the icons I made from an online source like Font Awesome do and serve them publicly, how exactly is this achieved?
You need to have icon in SVG format that you have created,
then you can use this, it will generate all the necessary font types, CSS/Sass/Less/Stylus , HTML demo page and Name font according to your wish.
Gruntt Web Font
I did a bit of Googling for you to find somewhere for your to offer your files.
You will need to create a font from your SVG files, I use fontastic.me and it's very good, but you could use another service.
You will then need to create a package of your files, and put it on a CDN service so that other people (or just you) can use it publicly. You can try using something like https://www.jsdelivr.com/ or look into how to set up your own CDN.
I am currently working on a responsive page which uses unicode symbols on certain elements and I would like them to have the same "look". As I understand, each browser and each operating system have different fonts for unicode symbols, and I noticed that the font-family property was not helping.
My biggest problem right now is that all the unicode symbols that I use show up as colored emojis on smartphones, which often ruins the page's design. Is there any way to fix that? Am I missing something?
The answer to your question can be split into two:
How to not worry about client-side fonts: web fonts
How to use emoji/pictograms without browser changing the rendering: css icon font
The latter part is more relevant as you are specifically dealing with emoji.
Web fonts
Web fonts would solve the cross-system compatibility issue. These are fonts that are served to the browser. Google fonts is a good place to start —it is actually weird to see how much of the web uses them.
If your unicode is more than just Greek or CJK and uses, say, runes, you will need to make your own web font (which is easy, Googling gives many web servers and guides), which takes advantage of #font-face rule (wiki). One serious drawback to the latter is that there is a copyright problem if you use a font you found on some depository or on your machine, so that is something worth looking out for.
Icon font library
An icon font library is a stylesheet library (with a font) that inserts an icon after an empty element with a class named for that icon, e.g. in FontAwesome <i class="fa fa-hand-spock-o"></i>.
As emoji are a recent addition and the support is more than patchy, websites and browsers add the support themselves, often coloring them (e.g. Chromoji extension). Consequently, I strongly suggest using an icon font library.
I am partial to FontAwesome —e.g. an academic tool of mine—, but there are loads of other options, some are:
Bootstrap's Glyphicons
Typicons
Fontello allows a mishmash of various icon font libraries (a longer list can be found there).
If however, the icon you are looking for is absent, you can create an icon font library using one of the many web resources (eg iconmoon.io). For the images themselves, flaticon has large collection of icons that can be converted to a icon library, which saves you time from having to slave away in illustrator.
I would build my own font-awesome icons set. In particular I would build something which is a copy of font-awesome with all its features, but using just a subset of icons.
Furthermore, I'm really interested how they build files within the fonts folders.
On github I found this repo, which contains all svg icons. On ubuntu, using Font Custom, I was able to generate giving svg files as input, the fonts file, even if I'm not really satisfied. But besides that, I do not understand how to merge those files with font-awesome.
So summarizing, how can I create my own font-awesome set, using my own svg files?
Please, do not say to use fontello, icoMoon or similars, because I would like to do on my local machine, without any third-parties services.
I actually did something similar but have to admit it was never perfect, most likely due to bad font conversion, just never had time to make it perfect. Basically i used the following link (to the most part)
http://www.webdesignerdepot.com/2012/01/how-to-make-your-own-icon-webfont/
An overview of the process
Step 1 - Create the individual gylphs (you should use the special characters to avoid someone "typing" using your font.
Step 2 - Save gylphs selection as an SVG font.
Step 3 - Convert SVG font to web-font (there are plenty of free online converters)
step 4 - generate the CSS classes to use (create all of the possible classes for all individual glyphs) - outcome should be something like: "icon icon-lg icon-blue icon-hand" - (better using LESS / SCSS for this part - you'll get why later)
where one contains the general settings for all icons, the other controls size-overrides, one controls the color, and most important one that using the :after -> outputs the icon.
step 5 - now that you have a working web-font controlled by CSS, make a UI for selecting individual glyphs to be available. most likely you should use LESS, this way you are "exposing" only the classes that are selected by the user (EG. - icon-1, 2, 5, 8 etc) all other icons are still included in the font but their corresponding CSS classes are not outputted in the final CSS.
There might be more advanced ways of doing it but this overview and tutorial should help you get the basics.
I believe you can use FontLab Studio for that: http://store.fontlab.com/
However, you will probably have to write your own css, personally I think generating it with icomoon or similiar web based generator is much easier and faster, because it is made particularly for generating web fonts, in before FontLab Studio or similiar desktop applications were made to design desktop fonts and do not come with prebuilt css compiler/generator.
I would like to see a generator for desktop aswell.
I haven't dug deeply with own font-icon sets, but I assume there's some svg data in use.
Just as an idea of a different way to go- you could even use background-img on set classes :before / :after
useful resource: http://iconizr.com/ I find their data-url generation is useful (better svg conversion than fontello, icoMoon )
I am putting together a tutorial (in .html) on how to use GeoGebra, and I would like to have a css style for the text in my tutorial that will be GGB commands. I would like this to match what GGB uses in its input lines. In other words, I would like the text in my lessons denoting GeoGebra input to look identical (in font, size, etc) as the input when using GeoGebra.
Is there a way (in my css file, or in the header of each html file) that would automatically grab the right font that the current release of GGB uses from GGB's repository on github?
They appear to currently be using unmodified (maybe just stripped of unused characters?) versions of Roboto and Roboto Slab (specifically the regular weights of each), which you could use through Google Fonts. Downloading and opening 'Geogebra Serif Regular' from their GitHub repo opens a font file literally just named "Roboto Slab".
You may be able to hotlink to their github files for their sans and serif fonts, though if you are selling these tutorials it appears that you might be in violation of their license, were you to use these exact files.
Seeing as they seem to move their fonts around a fair bit in their folder structure, and rename the files occasionally, I don't think that there is a guaranteed method to pull "whatever font they happen to be using" from their GitHub in any sort of futureproofed way -- if you hardcode those above links, your own fonts may (and eventually will) spontaneously stop working whenever they decide to shunt folders around.
I surmise that the easiest way for you to match their look-and-feel for the near future would be to simply use Roboto / Roboto Slab via Google Fonts.
AFAIK, these are the only fonts they use in the app.