Skocz do zawartości


Zdjęcie

Sposób jak ustawić polską czcionkę w Wordpressie


  • Zaloguj się, aby dodać odpowiedź
10 odpowiedzi w tym temacie

#1 makensis

makensis

    Naczelny

  • 5 036 postów

Napisano 21 12 2012 - 16:42

Często się zdarza, że korzystając z szablonów zagranicznych Wordpress jesteśmy niejako "skazani" na czcionki bez polskich znaków. W takiej sytuacji polskie znaki wyświetlają się w innej czcionce i wyglądają nieestetycznie. W takiej sytuacji mamy do wyboru, albo zrezygnować z eleganckiej czcionki na rzecz najpopularniejszych dla polskiej lokalizacji, albo.. skorzystać z naszego tricku!

Przykład niepoprawnie wyglądającej czcionki w Wordpressie i jej poprawa po zastosowaniu porady:

Dołączona grafika

Do dzieła!

Najprostszym rozwiązaniem i często wykorzystywanym w szablonach jest pobieranie czcionki z Google API Fonts, w takiej sytuacji w pliku style.CSS(w lokalizacji: wp-content/themes/nazwa-skórki) znajdziemy taki mniej więcej odnośnik:


@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700|Open+Sans:400,700);


gdzie "Open+Sans+Condensed" to nasza egzotyczna czcionka..

Google API Fonts to potężne narzędzie i wbrew pozorom zawiera również polski odpowiednik danej czcionki. Aby wymusić ładowanie polskiej wersji czcionki wystarczy do końcówki zapytania dodać: &subset=latin-ext
Gotowy kod wygląda tak:
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700|Open+Sans:400,700&subset=latin-ext);

Po podmianie zawartości i zapisaniu zmian nasza strona wygląda znów profesjonalnie - prawda, że proste?

Niestety niektóre skórki korzystają z CUFON i ładują czcionki osobno np. poprzez plik js. W tej sytuacji pozostaje skorzystać nam ze strony Cufón Fonts - Free Cufon Font Library [BETA] i tam pobrać paczkę czcionek uzupełnioną o polskie znaki. Niestety sam proces i lokalizacja czcionek jest troszkę trudniejsza i nadaje się następny poradnik :)

  • 0

#2 Gość_Sławek_*

Gość_Sławek_*

Napisano 14 11 2013 - 16:43

Używam wordpressa 3.7.1 z motywem Graphene i w tej wersji w pliku style.css nie ma tych wpisów. Fonty są załadowane do osobnego folderu: 

 

Kod:

@font-face {

font-family: 'Genericons';
src: url('fonts/genericons/genericons-regular-webfont.eot');
src: url('fonts/genericons/genericons-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/genericons/genericons-regular-webfont.woff') format('woff'),
url('fonts/genericons/genericons-regular-webfont.ttf') format('truetype'),
url('fonts/genericons/genericons-regular-webfont.svg#genericonsregular') format('svg');
font-weight: normal;
font-style: normal;
}

Nie wiem co tu by zmienić aby poprawić Polskie znaki:

 

a wyglądają one tak jak podałeś w newsu. 



Użytkownik pawel315 edytował ten post 14 11 2013 - 17:49

  • 0

#3 Simon_say

Simon_say

    Nowy

  • 1 postów

Napisano 06 01 2014 - 13:34

Witam, czy moglby Pan wyjasnic jak zrobic to w nowszej wersji wordpressa? Obecnie mam WP 3.8 i ten sam problem z brakiem Polskiej czcionki. Nie mniej jednak w pliku STYLE.CSS nie ma informacji o czcionke. Prosze o pomoc- odwdziecze sie.


  • 0

#4 makensis

makensis

    Naczelny

  • 5 036 postów

Napisano 06 01 2014 - 14:05

Ostatnio się bawiłem w dodawanie czcionek CUFON do styli, które nie mają domyślnie takiej funkcjonalności. Procedura skraca się do:

  1. Umieszczenia plików czcionki w folderze z Wordpressem np. z FontSquirel
  2. Dodania odpowiednich styli w pliku CSS np.
    ol, ul { list-style: none inside none; font-family: "robotobold", Verdana, sans-serif;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility; }
    

    tzw. font family

  3. Dodanie do custom.css (może też być default.css, zależy od skórki) deklaracji użycia czcionek CUFON:

    @font-face {
        font-family: 'robotobold';
        src: url('Roboto-Bold-webfont.eot');
        src: url('Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
             url('Roboto-Bold-webfont.woff') format('woff'),
             url('Roboto-Bold-webfont.ttf') format('truetype'),
             url('Roboto-Bold-webfont.svg#robotobold') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    

 

I tyle! Na tej stronie co podałem wyżej masz przykład zastosowania - plik HTML, CSS, pliki czcionek i ich prawidłowe użycie.


  • 1

#5 atomi1

atomi1

    Nowy

  • 3 postów

Napisano 05 02 2014 - 23:11

Hey właśnie mam taki problem i google mnie tu przywiał :)

 

Mam taki theme:

 

http://themeforest.net/item/medicenter-responsive-medical-wordpress-theme/4718613

 

Niestety w css brak odniesień do czcionki googla. Znalazłem chyba odpowiednie zapisy w pliku functions.php.

Tylko że totalnie nie wiem jak się za to zabrać :)

 

Pozdrawaim

 

Adam 

//style
	if($theme_options["header_font"]!="")
		wp_enqueue_style("google-font-header", "http://fonts.googleapis.com/css?family=" . urlencode($theme_options["header_font"]));
	else
		wp_enqueue_style("google-font-droid-sans", "http://fonts.googleapis.com/css?family=PT+Sans");
	if($theme_options["subheader_font"]!="")
		wp_enqueue_style("google-font-subheader", "http://fonts.googleapis.com/css?family=" . urlencode($theme_options["subheader_font"]));
	else
		wp_enqueue_style("google-font-droid-serif", "http://fonts.googleapis.com/css?family=Volkhov:400italic");
	wp_enqueue_style("reset", get_template_directory_uri() . "/style/reset.css");
	wp_enqueue_style("superfish", get_template_directory_uri() . "/style/superfish.css");
	wp_enqueue_style("jquery-fancybox", get_template_directory_uri() . "/style/fancybox/jquery.fancybox.css");
	wp_enqueue_style("jquery-qtip", get_template_directory_uri() . "/style/jquery.qtip.css");
	wp_enqueue_style("jquery-ui-custom", get_template_directory_uri() . "/style/jquery-ui-1.9.2.custom.css");
	wp_enqueue_style("main-style", get_stylesheet_uri());
	if((int)$theme_options["responsive"])
		wp_enqueue_style("responsive", get_template_directory_uri() . "/style/responsive.css");
	else
		wp_enqueue_style("no-responsive", get_template_directory_uri() . "/style/no_responsive.css");
	wp_enqueue_style("custom", get_template_directory_uri() . "/custom.css");
	//js

  • 0

#6 makensis

makensis

    Naczelny

  • 5 036 postów

Napisano 06 02 2014 - 12:51

Nikt za ciebie nie wykona czarną robotę. Zobacz najpierw w panelu admina jaką masz domyślną czcionkę i sprawdź jej polski odpowiednik, ewentualnie w kodzie:

    wp_enqueue_style("google-font-header", "http://fonts.googleapis.com/css?family=" . urlencode($theme_options["header_font"]));

zamień na:

    wp_enqueue_style("google-font-header", "http://fonts.googleapis.com/css?family=" . urlencode($theme_options["header_font"] . "&subset=latin-ext"));

Nie każda czcionka w theme ma polski odpowiednik..


  • 0

#7 atomi1

atomi1

    Nowy

  • 3 postów

Napisano 06 02 2014 - 19:32

Nikt za ciebie nie wykona czarną robotę. Zobacz najpierw w panelu admina jaką masz domyślną czcionkę i sprawdź jej polski odpowiednik, ewentualnie w kodzie:

    wp_enqueue_style("google-font-header", "http://fonts.googleapis.com/css?family=" . urlencode($theme_options["header_font"]));

zamień na:

    wp_enqueue_style("google-font-header", "http://fonts.googleapis.com/css?family=" . urlencode($theme_options["header_font"] . "&subset=latin-ext"));

Nie każda czcionka w theme ma polski odpowiednik..

 

Hey dzięki za odpowedź ale niestey nie pomogło :)

Używam czcionki Comfortaa i z tego co widzę w necie powinna mieć poprawne ąę :) Zresztą chyba theme jest na tyle sprytny że nie pozwala mi użyć niktórych czcionek i przełącza się na jakąś standarową w razie brak ąę :)

 

Aktualnie mam tak:

if($theme_options["header_font"]!="")
		wp_enqueue_style("google-font-header", "http://fonts.googleapis.com/css?family=" . urlencode($theme_options["header_font"] . "&subset=latin-ext"));
	else
		wp_enqueue_style("google-font-droid-sans", "http://fonts.googleapis.com/css?family=PT+Sans");
	if($theme_options["subheader_font"]!="")
		wp_enqueue_style("google-font-subheader", "http://fonts.googleapis.com/css?family=" . urlencode($theme_options["subheader_font"]));
	else

  • 0

#8 atomi1

atomi1

    Nowy

  • 3 postów

Napisano 06 02 2014 - 20:18

ok pomogło tak jeszcze raz dzięki za pomoc:

global $themename;
	global $theme_options;
	    //style
        if($theme_options["header_font"]!="")
            wp_enqueue_style("google-font-header", "http://fonts.googleapis.com/css?family=" . urlencode($theme_options["header_font"]) . "&subset=latin,latin-ext");
        else
            wp_enqueue_style("google-font-droid-sans", "http://fonts.googleapis.com/css?family=PT+Sans&subset=latin,latin-ext");
        if($theme_options["subheader_font"]!="")
            wp_enqueue_style("google-font-subheader", "http://fonts.googleapis.com/css?family=" . urlencode($theme_options["subheader_font"]) . "&subset=latin,latin-ext");
        else
            wp_enqueue_style("google-font-droid-serif", "http://fonts.googleapis.com/css?family=Volkhov:400italic&subset=latin,latin-ext");

  • 0

#9 makensis

makensis

    Naczelny

  • 5 036 postów

Napisano 06 02 2014 - 23:22

No właśnie nie dopowiedziałem ;)


  • 0

#10 Maciej K.

Maciej K.

    Początkujący

  • 13 postów

Napisano 03 08 2014 - 20:32

Jak ktoś się na tym zna, to chętnie zlecę poprawienie dla moich 2. Bo moje csss jest do *** :P niestety


  • 0

#11 SIM on

SIM on

    Nowy

  • 1 postów

Napisano 21 02 2015 - 14:35

Witam, 

Mam problem z innym wyglądem polskich czcionek na moim blogu. Sytuacja ma jedynie miejsce w przeglądarce Mozilla Firefox, w Chromie wszystko działa jak należy. Próbowałam się zastosować do rad, które znalazłam na paru forach, jednak bez skutku. Prawdę powiedziawszy próbuję rzeczy na chybił trafił, w nadziei, że nie popsuję wszystkiego jeszcze bardziej, bo kompletnie się na tym nie znam.

 

Mój blog: www.polkawnz.pl

 

Proszę o pomoc.

Z góry bardzo dziękuję.



  • 0

Zobacz więcej tematów z tagiem: polska czcionka spolszczenie Wordpress



Użytkownicy przeglądający ten temat: 0

0 użytkowników, 0 gości, 0 anonimowych