Koodaajia paikalla? Apua Google fonttien käytöstä!

Vierailija

Muistan joskus osanneeni muuttaa google fontin formaattia (tai sitä .woff, .ttf tms päätettä) lähdekoodin kautta, mutta enää en muista..

Esimerkiksi kopioin sieltä tämän fontin:

Otin tuon osoitteen tuosta ja linkkasin osoiteriville, jolloin se avautui uudelle sivulle - lähdekoodisivulle -, jossa oli fontin css-koodi eli tämä:

/* latin */
@font-face {
font-family: 'Handlee';
font-style: normal;
font-weight: 400;
src: local('Handlee Regular'), local('Handlee-Regular'), url(https://fonts.gstatic.com/s/handlee/v5/hN5OFJA7DLALxZ1osZb59Q.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

Muistan vain sen verran, että css-koodin avauduttua piti painaa esc + f12 -nappuloita, jolloin tuo lähdekoodisivu muuttui hieman.. En kuitenkaan muista sen enempää, miten jatkaa. Sen verran muistan, että sain jotenkin sellaisen "luettelon" missä oli erilaisia nettiselaimia, kun klikkasin jotain niistä, piti sivu päivittää ja tuo css-koodi muuttui sen verran, että se toimisi valitsemallani selaimella, jota klikkasin listasta? Osaako kukaan neuvoa, miten se tehtiinkään, kun kipeästi tarvisin apua? :D Tai ohjatkaa mut sitten jollekin asiantuntevalle palstalle, jos ei pysty neuvomaan :P

Oma selaimeni on Google Chrome ja mulla on käytössä Windows 7.

Kiitos etukäteen!!

Kommentit (7)

Vierailija

oho, se sitte laittanukkaa tota html-koodia .. :D no joka tapauksessa osoitteen, josta pääsi tuon css-koodin lähdekoodisivulle.

-ap

Vierailija

Siis: teet nettisivuja ja tarvit ohjeen, kuinka Handlee saadaan toimimaan sivuston fonttina? Ei sen formaattia tarvitse muuttaa. Ehkä en ymmärtänyt, mitä halusit kysyä. Joka tapauksessa Google fontsissa on selkeät ohjeet, miten fontit otetaan käyttöön.

Vierailija

Vierailija kirjoitti:
Siis: teet nettisivuja ja tarvit ohjeen, kuinka Handlee saadaan toimimaan sivuston fonttina? Ei sen formaattia tarvitse muuttaa. Ehkä en ymmärtänyt, mitä halusit kysyä. Joka tapauksessa Google fontsissa on selkeät ohjeet, miten fontit otetaan käyttöön.

kysyin, että miten saadaan lähdekoodin kautta muokattua koodia sen verran, että se näkyy jokaisella selaimella + puhelimella. Osaan kyllä käyttää fontteja, mutta tuohon kysymykseeni tarvitsin vastauksen.

- ap

Vierailija

Vierailija kirjoitti:
Vierailija kirjoitti:
Siis: teet nettisivuja ja tarvit ohjeen, kuinka Handlee saadaan toimimaan sivuston fonttina? Ei sen formaattia tarvitse muuttaa. Ehkä en ymmärtänyt, mitä halusit kysyä. Joka tapauksessa Google fontsissa on selkeät ohjeet, miten fontit otetaan käyttöön.

kysyin, että miten saadaan lähdekoodin kautta muokattua koodia sen verran, että se näkyy jokaisella selaimella + puhelimella. Osaan kyllä käyttää fontteja, mutta tuohon kysymykseeni tarvitsin vastauksen.

- ap

Sinun pitää avata editoimasi html-sivu erillisellä editorilla ja tallentaa palvelimelle, et voi muokata lähdekoodia selaimella.

Vierailija

Jaa-a. Itse olen aina antanut vaihtoehtoisen fontin, mikäli selain ei tue Google fontteja. En löytänyt kiertotietä myöskään Googlen omasta ohjekirjastosta. Siellä sanottiin näin:

What browsers are supported?

The Google Fonts API is compatible with the following browsers:

Google Chrome: version 4.249.4+
Mozilla Firefox: version: 3.5+
Apple Safari: version 3.1+
Opera: version 10.5+
Microsoft Internet Explorer: version 6+
Does the Google Fonts API work on mobile devices?

The Google Fonts API works reliably on the vast majority of modern mobile operating systems, including Android 2.2+ and iOS 4.2+ (iPhone, iPad, iPod). Support for earlier iOS versions is limited.
What do unsupported browsers see?

If someone using an unsupported browser visits a page that uses the Fonts API, then the text is displayed using the next available font in your CSS font stack.

In the following example, the text would be displayed in the unsupported browser's default cursive font:

p { font-family: 'Tangerine', cursive; }

Vierailija

ei, kyllä olen saanut lähdekoodin kautta muokattua.. hmph, jotenkin se meni niin..

Kun esimerkiksi fontin osoite on esim. http://esimerkki.woff2, niin sain sen sillä editorilla (katso sivun lähdekoodi -> klikkaa esc + f12) jotenkin muokattua osoitteen .woff-päätteiseksi.. en vain mitenkään muista miten sen tein.. Siinä "luettelossa" näkyi jokaisen selaimen nimi, versiot, mobiiliversiot ja siitä piti painaa, päivittää sivu niin se koodi muuttui sellaiseksi, joka tuki sitä selainta :/

- ap

Tämä kenttä pitää täyttää jotta oikeat käyttäjät erottuvat boteista.

Uusimmat

Suosituimmat