I'm learning HTML and CSS together to break into the world of programming, and this is the first real problem I've run in to that I can't figure out on my own. Of course, it's a process that can be mindlessly replicated, but I want to understand why it works the way it does.
Currently, I'm learning to link fonts, specifically from google fonts, to expand the resources I have to make a website. The piece of code I'm given is <link href="https://fonts.googleapis.com/css?family=Abril+Fatface&display=swap" rel="stylesheet">. From what I understand, this tells the html document to reference the listed website when an instance of "Abril Fatface" comes up. My question is: how does the computer know to reference the website when I specify in the styling that I want "Abril Fatface"? In other words, how does it know what to call it?
You are just including a css file, if you open it, the name is in the property font-family. In this case:
font-family: 'Abril Fatface';
I'm sure someone can break this down even better than I, but a quick search of use google fonts in css gave me this Getting Started guide from Google.
Here are some highlights:
Add a stylesheet link to request the desired web font(s):
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Font+Name">
Style an element with the requested web font, either in a stylesheet:
.css-selector {
font-family: 'Font Name', serif;
}
What I understood from this is that the Google Font API has a font family parameter where each word in the font family name is separated by a + symbol. The CSS font-family property accepts values as provided and will even accept multiple values. Fortunately, Google's API lets you provide multiple font families if you separate them with a pipe symbol | like so:
https://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans
This is mostly an explanation of why it works. If you want to dig deep into the how, Google also has documentation explaining their API. However, if you are brand new to web development, this might be a bit much.
TL;DR It might be enough to know that the API provides font family information from its servers to your page using formatting known as "JSON" or (J)ava(S)cript (O)bject (N)otation. JSON is a relatively simple way of storing and transporting various combinations of data on the web.
If you want to better understand JSON and APIs, I highly recommend digging into FreeCodeCamp's curriculum. I've personally learned a lot there.
Related
In general, I am trying to find the easiest way to incorporate our brand look which uses the Google font Raleway into emails without having to create the emails from scratch. I am sampling various programs to figure out the easiest route. In the example of using Mailchimp, when I attempt to add CSS to the top of the email body, it works on h1 - h5 headers but the paragraph body text does not. For the text that is translating, it does go through to my desktop Gmail preview, but not to my mobile phone preview.
I realize that not all email servers deliver custom web fonts regardless of the device, but I seem to find other sources that say it is possible to code in, yet I see inconsistent answers on the right CSS and I have tried some but none that work yet. I trialled another program called GetResponse which did everything I needed except still can't get the mobile to show the code I need. Is this even possible to code in?
Looking for any advice in this area - Also if there is an easy HTML template builder that anyone could recommend (such as Envato Market email templates) if this is an easier route, I am open to that but everything I looked at I have to purchase and there is no trial. I know some HTML/CSS but by no means an expert.
Below is a copy of the CSS I used in Mailchimp that works for h1-h5 but not on p text and not on the mobile version, and nothing will show properly on the mobile device. Overall, hoping for any advice on incorporating the code to translate to all devices if this is even possible, and if not, if a custom HTML email builder can generate this as a workaround or not.
<style type="text/css">
#import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');
p {font-family: 'Raleway', sans-serif;}
h1,h2,h3,h4,h5 {font-family: 'Raleway', sans-serif; letter-spacing:0.1em;}
</style>
Unfortunately, Gmail doesn't support Google fonts.
If you want to hand-code the email I would advise you to check out this article from Litmus on the topic.
Otherwise, I would advise you to check out this email builder (Chamaileon), it has the Raleway font built-in with several fallbacks.
I am working on a website that is mainly in Chinese language but has Japanese phrases and sentences scattered all around. It is important for me to maintain an overall unified style in fonts, while at the same time be very careful about the way Japanese characters are displayed. That is, I am not allowed to simply substitute these Japanese characters with their close counterparts in Chinese. To this end, I am currently using different custom fonts for Chinese and Japanese separately. These are visually similar OTF fonts specifically designed for Chinese or Japanese only. I load them through the CSS #font-face command. However, these .otf font files are several MB's large and take seconds, even up to minutes to load. Moreover, this happens for every new web page the viewer opens. I am wondering if there is a faster way of loading these fonts. Your help is much appreciated!
(Warning: I am a beginner.)
P.S. My website caters to mainland Chinese viewers so google fonts might not be a good solution here.
You could use WebFontLoader for improving performances of #font-face. It's developed by Google and Typekit. You can use it with their services and also for self hosted fonts.
Include fonts in css using #font-face, as you already did.
#font-face {
font-family: 'My Font';
src: ...;
}
#font-face {
font-family: 'My Other Font';
src: ...;
}
Add this code to the bottom of your main page, just before </body>
<script>
WebFont.load({
custom: {
families: ['My Font', 'My Other Font']
}
});
</script>
I ended up using the "dynamic subsetting" functionality provided by Adobe Typekit. It dynamically generates font files that only include characters used on the webpage, and sends it via its content delivery network. All I needed to do was to make an account, select fonts form their website, and include some codes for external javascript files in my HTML. One downside of this method is that I can no longer use my own fonts, and the range of Chinese/Japanese fonts provided by Adobe Typekit seems limited. Luckily I was able to find the fonts that suit my need. Also I still experience a certain degree of FOUT but I suppose it's not a big deal for me at present. Still hoping for an open-source solution in the future, though.
I am want to use a font that is not popular. this font exist in google fonts and also in Photoshop. I am confused because both ways will have some loading time, I know that images are not the good way to go for texts (but at least the image will be internal), however google font will introduce some overhead as the font will be requested from an external source
which method has good performance (in terms of load speed):
1) using Photoshop to write the text and save it as an image than use the image in my webpage? or
2) using google font?
3) and if using google font. do i have to download the font file with all formats and then put it in my website folder? or I just use the html link tag to? which one is more efficient.
and thanks a lot in advance.
Google fonts are CDN, so they take up zero of your server resources (while images do). That said, Google fonts can slow down your page. But typically only when you're using a handful of fonts. I wouldn't be concerned at all with 1 or 2. Overall, either method would be little to no concern in the end.
However, using images for text is a flash back to 1998. Bad practice. More so on your end, as updating text, changing design, running A/B tests, accessibility, SEO, and maintaining the site in general will become a major pain in the a**. Simplest answer? Avoid it.
Directly from Google Fonts site:
Tip: Using many font styles can slow down your webpage, so only select
the font styles that you actually need on your webpage.
Tip: If you choose only the languages that you need, you'll help
prevent slowness on your webpage.
Example usage:
// include in the <head/> of your website
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
then:
// in your css:
h1 { font-family: 'Open Sans', Arial, serif; font-weight: 400; }
Done. Very little resources.
Use google fonts.
The Google Fonts CDN is built to deliver content, content loaded from it will probably load faster then it would if it was on your server.
You don't have to download the font, or worry about browser support, simply add the <link> tag to your HTML.
You should NOT use images to display text, for several reasons:
Screen readers can't read text in an image
Size. Depending on the size of the image and font, the image may be larger than the font file.
A major pain to update
UX problems. i.e. Users can't copy text, select, etc.
When should you use images?
When you need a text effect that can't be achieved with CSS, SVG, or canvas(Not that many). As noted by #Stephen P in the comments below, you should still add text, just visually hide it with CSS
You can download google fonts .ttf file or whaterver format you like or supports and call that file instead of accessing from a url. Which will be much much faster. And yes images are truely bad as it makes impossible for search engine to read.
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 )
We are working with digital signage software that is pretty much based on HTML. I have generated a code for date and time from free time and date site, which is nice, and it has our language (serbian) supported.
However, there are a few fonts that are predefined which can we chose, none of which is pretty font. I wanted to know if its possible to add a code into it which can call a custom font which i uploaded on our personal storage. Im not that good with HTML, and seeing that this might be the best site for HTML problems on internet i thought that i might ask here
Here is the code:
<iframe src="http://free.timeanddate.com/clock/i4c0bglr/n3395/tlrs36/fn10/fs36/tct/pct/tt0/tb4" frameborder="0" width="504" height="86" allowTransparency="true"></iframe>
thnx in advance
Yes, you can add custom fonts to your CSS.
It's a little bit tricky to get it right, because you need to convert your font file to 5 different file-types, and you then have to get your font-declarations just right. There are tools for this, but I haven't found one that does everything exactly right yet. Here is one.
If you are, as you say, not good with HTML, I would personally recommend Google Web Fonts. It's the easiest way of getting the results that you need fast.
EDIT:
Pure HTML font selection:
<font face="Helvetica">Text text text</font>
(only system fonts)