Vidaloka - Typekit font or Google font?

When I started building my website some months ago I selected Vidaloka for headings – I am sure it was in Typekit as otherwise (AIUI) only basic Mac fonts can be used.I wanted to give the site a distinctive look and feel – it is supposed to be a bit like a newspaper.
But now it seems to have disappeared from Typekit.
But it is in Google fonts.
I have seen posts telling me that to use the Google font I have to put various bits of HTML in various places, eg page properties and headers. Don't quite understand this – I come from a newspaper editing background [InDesign is my native app]
My site is londonsriver.com and Vidaloka is used half a dozen times on each of 30 pages.
Do I have to put the HTML code into EVERY HEADING on EVERY PAGE? And then continue doing that with the next 20 pages in the pipeline?
Or is it easier just to find a new Typekit font that looks good and fits?
Any helpful suggestions welcome.
Ken

Believe me, I understand the pain. Unfortunately there's only so much we can do at Adobe as the EULAs provided by the foundries for their respective fonts are very explicit in where you can and can not use them.
For example, packaging an InDeisgn file and sending it off for pre-press with the fonts included in the package is in direct violation of most font EULAs. In a studio environment, you're only allowed to have a font installed on n number of computers and need to have multiple licenses to accomidate >n number of seats. When creating a PDF, fonts explicitly have to be subsetted before embedding into the PDF.
That's just to paint a picture of the fragile state of using fonts in print, usage in digital mediums is just another bee in your bonnet when it comes to considering when you can and cannot use a font.
Services like Typekit Desktop are trying to make this easier by removing a lot of those pain and condierations for you, by blanketing all these fonts under a single license you're free to use for print and the web. There's still some gotchyas, but we're aiming to greatly reduce how much you have to think about it where we can.
So yes there's a bit of education when it comes to mixing embedded HTML content/fonts with DPS, but at least there's options
Sarah

Similar Messages

About Typekit, Edge Fonts and Google Fonts real utility for Web Designers

Hello,
Perhaps it´s a simple situation for the majority of CC User but I´m a little bit confused about that. I have a TypeKit plan included in my Creative Cloud subscription. I have then the possibility of use Web Fonts included in Typeset (which is awesome, by the way). My problem comes when I try to use a TypeKit font for a client who does´t want to pay for a TypeKit plan and I can´t use the same font in the trial plan which is a great way of convince the client he needs TypeKit for a better typography access.
So, my questions are:
There is available TypeKit fonts in Adobe Edge fonts too?
The only fonts available in Edge Fonts are Google Fonts?
How can I know if a specific TypeKit font is available in TypeKit Trial Plan too without searching the entire catalog filtered by Trial Library or in Adobe Edge?
Do you recommend to me a workflow in which I can use TypeKit fonts for clients avoiding the need to pay the client for that font? (it´s hard to convince him, not to use free alternatives like Google Fonts or Adobe Edge Fonts)
Thanks in advance.

I haven’t tried it so this may be a shot in the dark but you might be able to hack into the CSS and use @font-face to call a local font.
Check the license of the font to be sure it allows this.

How to install both infinality-fonts and google-fonts?

I would like to install (one of the) google-fonts AUR packages, but it conflicts with infinality font packages. Is there a way to only install the fonts from the google-fonts package which don't already exist in infinality versions?

karol wrote:Maybe you can just 'rm -rf' the fonts that are already provided by infinality font packages?
It's a bit complicated. I checked to see if the otf-google-fonts-hg package would work as none of infinality-bundle-fonts are OTF. Nope. bohoomil has conflicts for all sorts of packages and the font names aren't obvious:
~ > pacman -Qi ttf-chromeos-ib | egrep "Name|Conflicts"
Name : ttf-chromeos-ib
Conflicts With : otf-google-fonts-hg ttf-google-fonts-git ttf-google-fonts-hg ttf-chromeos-fonts ttf-chromeos-extra-fonts
There is no font by that name in the otf-google-fonts-hg package; it's an infinality font meta-package.
Last edited by skottish (2014-12-17 23:51:09)

Communication problem when using Google Font api

Hi
When I try linking to the Google font api I receive a communication error in BrowserLab. The page renders OK outside of BrowserLab in my usual browser and if I remove the link then the page works in BrowserLab (but obviously doesn't include the fonts).
I have tried increasing the delay time but still no luck.
Is this something that just won't work? I'd love to be able to use BrowserLab to help build out my site but can't at present.
The page in question is http://rockingdesign.co.nz.
Thanks for looking,
Tim

Hi Tim, I just tested that link in BrowserLab and I don't think I'm seeing any issue. I'm attaching a screenshot of Firefox 4 Windows taken by BrowserLab. I didn't get any error, and the screenshot looks ok to me.
Was this possibly a temporary issue or do you not have the proper link back in? If you still see it, can you give me more info, the exact error message you see, and possibly a screenshot?
Thanks,
Mark

Firefox 3.6.3 is not supported by the Google Font API

I have Firefox 3.6.3 on my Macbook, but is only detected as 3.0.1on this form. When I link to the Google font website, it says, "We're sorry, but your browser is not supported by the Google Font API. To browse the fonts in the Google font directory please switch to a more modern browser." So I have to use Safari to get to the page.
== URL of affected sites ==
http://code.google.com/webfonts

Maybe this article will help - [[Websites or add-ons incorrectly report incompatible browser]]

Firefox doesn't display Romanian diacritics properly (Google Fonts)

Hello,
I have a blog on Blogger, which is in Romanian. I am using Arimo (Google Font). I tested my blog on several popular browsers (Google Chrome, Opera, even Internet Explorer) to check if the diacritics are displayed properly. They work perfectly on all 3 browsers.
However, on Firefox, only two of them work Î & Â, while the other three (Ș, Ț, Ă) are replaced with another font. What could be the problem? I would love for all my visitors to see the same design, regardless of the browsers they use. Can you help? Thanks in advance.
Here's an image, to better understand my issue - http://i.imgur.com/257QyId.png

The link for my blog is http://ferdy.ro
@guigs2 - thank you filling a bug report.
@cor-el,
As you can see, if you access my blog, it displayes the Arimo font, yet three Romanian diacritics (ș, ț, ă) are displayed with the Arial font. I used the sans-serif trick in my CSS code and it sort of fixes the problem, but not entirely.
Arimo has tons of diacritics (including Romanian diacritics) and special characters, yet this issue occurs only on Firefox and Yandex (tested today), however it is displayed properly in Chrome, Opera and even Internet Explorer.
The 'Allow pages to index...' setting is already enabled on my browser. Also, the Page Inspector generates a 'Not found' for me. This is weird, if it was because of the font, then it shouldn't work on all the browsers.
If there is nothing I can about it, then I'll switch to Arial entirely or keep it this way - it's very important for me to have the same design on all of the browsers.

After upgrading, font in google is FAT and UGLY

*blocked by the greatwall, google hongkong-ing
so after upgrading to Mountain Lion, I've tried to search around and learnt a new term called font conflict,
I'm not sure if it is a font conflict, however, I truly can't bear with seeing this ugly and fat font in google,
seems this font has shown itself everywhere when it's a default(?) font setting in Safari (same as in Chrome).
Please HELP!!!

Reset the page zoom on pages that cause problems: <b>View > Zoom > Reset</b> (Ctrl+0 (zero); Cmd+0 on Mac)
*http://kb.mozillazine.org/Zoom_text_of_web_pages

How to use Google Fonts in email?

Hi,
I would like to know how I use google fonts in my emails.
We're using the ubuntu font and I see the fonts on my computer but after sending an email the fonts change.
I'm using the addon SmartTemplate4.
Hope any f you know the answer!
Thanks in advance

Several online resources point to these two articles at Campaign Monitor:
* [https://www.campaignmonitor.com/blog/post/3897/using-web-fonts-in-email Using web fonts in email] (Dec. 2012)
* [https://www.campaignmonitor.com/resources/will-it-work/webfonts/ Web Fonts] (permanent resource)
The first link provides examples on how to do this, while the second one has informaiton about email client support & compatibility with this feature.
Keep in mind using web fonts will have a limited effect if viewing such emails while offline.
[http://kb.mozillazine.org/Default_HTML_font_for_new_messages_-_Thunderbird This older MozillaZine article] also has information about fonts use in Thunderbird. In my experience in most cases the receiving party will have to have the fonts locally installed for the best results.

How to use Google fonts not in an H tag?

How do you do it?
I ask this because Im under the impression h tags have attributes that come along with it to make it like a paragraph, right?
Im looking at making a few word a Google font and a caption. How would I apply this to a div? Inline? Or a new css rule? Both?
Im not good at handcoding CSS, so this is why I ask.
I have the Google font in my CSS and call a few HTML headers h1,h2,h2 to it fine. How do I make text not in an H tag the Google font?
(yes, I think it's a super easy answer, but not too knowledgeable about it)
Also, does CS5 DW have some sort of support to make the Google font a selectable from the dropdown?

Use CSS classes.
.google {
google font rules go here...
HTML:
<p class="google">This paragraph uses google font</p>
<h1 class="google">This heading uses google font</h1>
<h1>This heading uses standard font</h1>
<p>This paragraph uses standard font</p>
CSS classes appear in the drop-list on your properties panel.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Google fonts no longer display in FF 35

Hi all,
Earlier this week my fonts in Google Docs stopped displaying properly - sometimes I'll get the message to try reloading the page but it doesn't work. They show up in the Document as one uniform font (Arial?) instead of Limelight & Unlock to name a couple.
The fonts do show up in my Chrome Browser.
I've tried clearing the cache & re-updating FF, to no avail.
Is this a bug or is Firefox about to update again?
Thanks in advance for any help!

Many site issues can be caused by corrupt cookies or cache.
* Clear the Cache and
* Remove Cookies<br> '''''Warning ! ! '' This will log you out of sites you're logged in to.'''
Type '''about:preferences'''<Enter> in the address bar.
* '''Cookies;''' Select '''Privacy.''' Under '''History,''' select Firefox will '''Use Custom Settings.''' Press the button on the right side called '''Show Cookies.''' Use the search bar to look for the site. Note; There may be more than one entry. Remove '''All''' of them.
* '''Cache;''' Select '''Advanced > Network.''' Across from '''Cached Web Content,''' Press '''Clear Now.'''
If there is still a problem,
'''[https://support.mozilla.org/en-US/kb/troubleshoot-firefox-issues-using-safe-mode Start Firefox in Safe Mode]''' {web link}
While you are in safe mode;
Type '''about:preferences#advanced'''<Enter> in the address bar.
Under '''Advanced,''' Select '''General.'''
Look for and turn off '''Use Hardware Acceleration'''.
Poke around safe web sites. Are there any problems?
Then restart.
You can check for corrupted and duplicate fonts and other font issues:
http://www.thexlab.com/faqs/multipleappsquit.html - Font Book 2.0 Help: Checking for damaged fonts
http://www.creativetechs.com/iq/garbled_fonts_troubleshooting_guide.html
Type '''about:preferences#content'''<enter> in the address bar.
Across from '''fonts and colors,''' press the '''Advanced''' button.
On the bottom, turn on '''Allow Web Sites To Choose Their Own.'''

Google fonts all but unreadable in Safari

I just downloaded the latest version of Safari and happen to notice that the Google font I am using for my website--"Exo"--is completely unreadable in paragraph form. Is this intentional on the part of Apple? It looks fine in every other browser and I hate having to dumb down my design, especially for Apple...

Changing Preferences > font settings > Windows standard (I am on a Windows machine)
to
> Best for CRT
Solved the problem. The weird thing is that this setting only affected the home page content: The other pages looked fine!
If anyone has a conjecture why this might be I'd love to hear it. The bigger question is whether we should rely on browser settings to render our particular fonts correctly. Should <p> tags still still stick to the traditional font families or are Safari users savvy enough to make the adjustment? I don't want the user of a particular browser to think I don't know what I'm doing...

How to make firefox render fonts as google-chrome does? (screenshot)

How do I make firefox render fonts as google chrome does as shown in screenshot? (Chrome below and firefox above)
Notice for instance the dash "/", "Explore", "Features" etc and the text at the bottom "added git_fixes".
I'm no expert but is it antialiasing that makes the difference? Cause it seems the font is the same, right?
.Xresources
Xft.dpi: 120
Xft.antialias: true
Xft.hinting: true
Xft.hintstyle: hintmedium
Xft.rgba: rgb
Xft.lcdfilter: lcdlight
~/.config/fontconfig/fonts.conf
<?xml version="1.0"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>
<match target="font">
<edit name="antialias" mode="assign">
<bool>true</bool>
</edit>
<edit name="hinting" mode="assign">
<bool>true</bool>
</edit>
<edit name="hintstyle" mode="assign">
<const>hintfull</const>
</edit>
<edit name="rgba" mode="assign">
<const>rgb</const>
</edit>
<edit mode="assign" name="lcdfilter">
<const>lcdlight</const>
</edit>
</match>
</fontconfig>
I have ttf-win7-fonts installed, and also recently I've installed Infinality (haven't configured it, necessary?).
Advice appreciated.

bleach wrote:
well in firefox you can chose your font and then unclick the let sites chose there own fonts.
ya looking at your picture I do see the diff. but I do not have that pixelation in my firefox.
.Xresources has nothing to do with gtk
I do want to let sites choose their own fonts though.
When I look closely on my screenshot I wonder if it's even the same font though (the "3" looks very different).
Perhaps that's where the problem lies.
If I force firefox to use Arial, it looks good. If I set it to Helvetica which seems to be the font used, it looks like in the screenshot - pixelated.
$ fc-match helvetica
helvR12-ISO8859-1.pcf.gz: "Helvetica" "Regular"
Seems it doesn't use truetype (helvetica.ttf?) as default font for helvetica - shouldn't it?

Firefox doesn't display Google fonts on parts of my site

I'm creating a website, using Joomla 3. My template uses Google Fonts (Roboto & Roboto Condensed).
On Headers and Paragraphs the font is shown correctly, but not on my TopMenu (and submenus). Why is that? How can I fix this?
Here's a link:
http://s560994685.onlinehome.us/access2/

Many site issues can be caused by corrupt cookies or cache. In order to try to fix these problems, the first step is to clear both cookies and the cache.
Note: ''This will temporarily log you out of all sites you're logged in to.''
To clear cache and cookies do the following:
#Go to Firefox > History > Clear recent history or (if no Firefox button is shown) go to Tools > Clear recent history.
#Under "Time range to clear", select "Everything".
#Now, click the arrow next to Details to toggle the Details list active.
#From the details list, check ''Cache'' and ''Cookies'' and uncheck everything else.
#Now click the ''Clear now'' button.
Further information can be found in the [[Clear your cache, history and other personal information in Firefox]] article.
Did this fix your problems? Please report back to us!

Google fonts not showing in Greek

Hi Community: Problem is pretty simple. Google fonts are not displayed in Greek text. English text looks fine.
Why is that? How can this be fixed?
Font mainly used: Roboto Condensed.

Problem resolved.
The reference to the google font needed to also be secure when on a secure page:
<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>

Google Fonts, DIVS, student needs help

For a class project I am trying to replicate this magazine page I selected. The idea of the project is to use things such as google web fonts.
So far, I have done this - the font's don't have to match. It just needs to have the same sort of look:
OK, so far so good. But I KNOW that this isn't semantic markup! The name "Andre Benjamin" should be the <h1>, but I cannot figure out how to do that using google web fonts since the heading used 3 different fonts and different sizes.
Additionally, though it looks great in firefox this is how it renders in IE - No google font showing up, the divs are not lining up right. The site is not "live", this is the view from previewing in IE. Maybe IE needs it loaded on a server for google font to show?:
So thanks for any help you can provide. I know that I need to clean up this code before I go much further.
The html is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="typography.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Ewert' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Asset' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Chivo:900' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="container">
<div id="largeH1">A</div>
<div id="medH1">NDR</div>
<div id="medH1_2">&eacute</div>
<div id="smallH1">BENJAMIN</div>
</div>
</body>
</html>
The CSS is:
@charset "utf-8";
body {
    background-color: #333;
#container {
    height: 1242px;
    width: 960px;
    margin-top: 20px;
    margin-right: auto;
    margin-bottom: 20px;
    margin-left: auto;
    background-image: url(images/bgNapkin.jpg);
    border: thin solid #ADC2A1;
#largeH1 {
    font-family: 'Ewert', cursive;
    font-size: 300px;
    color: #d94730;
    margin-left: 35px;
    height: 300px;
    width: 215px;
    float: left;
#medH1 {
    font-family: 'Asset', cursive;
    font-size: 75px;
    margin-left: 200px;
    color: #D94730;
    padding-top: 60px;
#medH1_2 {
    font-family: 'Chivo', sans-serif;
    color: #D94730;
    font-size: 110px;
    margin-left: 625px;
    margin-top: -120px;
#smallH1 {
    font-family: 'Chivo', sans-serif;
    color: #D94730;
    font-size: 36px;
    letter-spacing: 40px;
    margin-left: 255px;
    margin-top: -10px;

Read up on nth-child pseudo-selectors.
http://css-tricks.com/how-nth-child-works/
Below, a quick and dirty example with span tags.
CSS:
span:nth-child(1)
{font-size:250%}
span:nth-child(2)
{font-size:150%}
span:nth-child(3)
{font-size:100%}
span:nth-child(4)
{font-size:75%}
span:nth-child(5)
{font-size:50%}
HTML:
<h1><span>This</span> <span>is</span> <span>a</span> <span>spanned</span> <span>heading</span></h1>
The result:
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Vidaloka - Typekit font or Google font?

Similar Messages

Maybe you are looking for